Skip to content

Instantly share code, notes, and snippets.

@matallo
Created November 30, 2016 14:04
Show Gist options
  • Save matallo/c44ee10f08626600954ccaa0d977eabc to your computer and use it in GitHub Desktop.
Save matallo/c44ee10f08626600954ccaa0d977eabc to your computer and use it in GitHub Desktop.
<!doctype><html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Odyssey.js Slides</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">
<link rel="icon" type="image/png" href="http://cartodb.github.io/odyssey.js/sandbox/favicon.png">
<link rel="stylesheet" href="map.css">
<link rel="stylesheet" href="main.css">
<script src="http://cartodb.github.io/odyssey.js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div id="map" style="width: 100%; height: 100%;"></div>
<div id="slides_container" style="display:block;">
<div id="dots"></div>
<div id="slides"></div>
<ul id="navButtons">
<li><a class="prev"></a></li>
<li><a class="next"></a></li>
</ul>
</div>
<div id="credits">
<span class="title" id="title">Title</span>
<span class="author"><strong id="author">By Name using</strong> <a href="http://cartodb.github.io/odyssey.js/">Odyssey.js</a><span>
</span></span></div>
<div class="ig-footer__sources-and-credits"><div><span class="ig-footer__sources"><span class="ig-footer__prefix">Sources: </span><span class="ig-footer__credit"><span class="ig-footer__credit"><a href="http://www.mapbox.com" target="_blank">Base map design: Mapbox</a></span>, <span class="ig-footer__credit"><a href="http://www.openstreetmap.org/copyright" target="_blank">Base map data: OpenStreetMap contributors</a></span>&nbsp;</span><span class="ig-footer__credits"><span class="ig-footer__prefix">Graphic by </span><span class="ig-footer__credit"><a href="http://search.ft.com/search?queryText=%22John+Burn-Murdoch%22" target="_blank">John Burn-Murdoch</a></span> <span class="ig-footer__credit">and FT reporters</span></span></div></div>
<script src="http://cartodb-libs.global.ssl.fastly.net/cartodb.js/v3/cartodb.js"></script>
<script src="http://cartodb.github.io/odyssey.js/dist/odyssey.js" charset="UTF-8"></script>
<script>
var resizePID;
function clearResize() {
clearTimeout(resizePID);
resizePID = setTimeout(function() { adjustSlides(); }, 100);
}
if (!window.addEventListener) {
window.attachEvent("resize", function load(event) {
clearResize();
});
} else {
window.addEventListener("resize", function load(event) {
clearResize();
});
}
function adjustSlides() {
var container = document.getElementById("slides_container"),
slide = document.querySelectorAll('.selected_slide')[0];
if (slide) {
if (slide.offsetHeight+169+40+80 >= window.innerHeight) {
container.style.bottom = "80px";
var h = container.offsetHeight;
slide.style.height = h-169+"px";
slide.classList.add("scrolled");
} else {
container.style.bottom = "auto";
container.style.minHeight = "0";
slide.style.height = "auto";
slide.classList.remove("scrolled");
}
}
}
var resizeAction = O.Action(function() {
function imageLoaded() {
counter--;
if (counter === 0) {
adjustSlides();
}
}
var images = $('img');
var counter = images.length;
images.each(function() {
if (this.complete) {
imageLoaded.call( this );
} else {
$(this).one('load', imageLoaded);
}
});
});
function click(el) {
var element = O.Core.getElement(el);
var t = O.Trigger();
// TODO: clean properly
function click() {
t.trigger();
}
if (element) element.onclick = click;
return t;
}
O.Template({
init: function() {
var seq = O.Triggers.Sequential();
var baseurl = this.baseurl = 'http://a.tiles.mapbox.com/v3/financialtimes.map-0q4wwrge/{z}/{x}/{y}.png';
var map = this.map = L.map('map').setView([0, 0.0], 4);
var basemap = this.basemap = L.tileLayer(baseurl, {
attribution: 'data OSM - map CartoDB'
}).addTo(map);
// enanle keys to move
O.Keys().on('map').left().then(seq.prev, seq)
O.Keys().on('map').right().then(seq.next, seq)
click(document.querySelectorAll('.next')).then(seq.next, seq)
click(document.querySelectorAll('.prev')).then(seq.prev, seq)
var slides = O.Actions.Slides('slides');
var story = O.Story()
this.story = story;
this.seq = seq;
this.slides = slides;
this.progress = O.UI.DotProgress('dots').count(0);
},
update: function(actions) {
var self = this;
if (!actions.length) return;
this.story.clear();
if (this.baseurl && (this.baseurl !== actions.global.baseurl)) {
this.baseurl = actions.global.baseurl || 'http://a.tiles.mapbox.com/v3/financialtimes.map-0q4wwrge/{z}/{x}/{y}.png';
this.basemap.setUrl(this.baseurl);
}
if (this.cartoDBLayer && ("http://ft.cartodb.com/api/v2/viz/6f7e036e-0925-11e4-8c54-0e230854a1cb/viz.json" !== actions.global.vizjson)) {
this.map.removeLayer(this.cartoDBLayer);
this.cartoDBLayer = null;
this.created = false;
}
if (actions.global.vizjson && !this.cartoDBLayer) {
if (!this.created) { // sendCode debounce < vis loader
cdb.vis.Loader.get(actions.global.vizjson, function(vizjson) {
self.map.fitBounds(vizjson.bounds);
cartodb.createLayer(self.map, vizjson)
.done(function(layer) {
self.cartoDBLayer = layer;
var sublayer = layer.getSubLayer(0),
layer_name = layer.layers[0].options.layer_name,
filter = actions.global.cartodb_filter ? " WHERE "+actions.global.cartodb_filter : "";
sublayer.setSQL("SELECT * FROM "+layer_name+filter)
self.map.addLayer(layer);
self._resetActions(actions);
}).on('error', function(err) {
console.log("some error occurred: " + err);
});
});
this.created = true;
}
return;
}
this._resetActions(actions);
},
_resetActions: function(actions) {
// update footer title and author
var title_ = actions.global.title === undefined ? '' : actions.global.title,
author_ = actions.global.author === undefined ? 'Using' : 'By '+actions.global.author+' using';
document.getElementById('title').innerHTML = title_;
document.getElementById('author').innerHTML = author_;
document.title = title_ + " | " + author_ +' Odyssey.js';
var sl = actions;
document.getElementById('slides').innerHTML = ''
this.progress.count(sl.length);
// create new story
for(var i = 0; i < sl.length; ++i) {
var slide = sl[i];
var tmpl = "<div class='slide' style='diplay:none'>";
tmpl += slide.html();
tmpl += "</div>";
document.getElementById('slides').innerHTML += tmpl;
this.progress.step(i).then(this.seq.step(i), this.seq)
var actions = O.Parallel(
this.slides.activate(i),
slide(this),
this.progress.activate(i),
resizeAction
);
actions.on("finish.app", function() {
adjustSlides();
});
this.story.addState(
this.seq.step(i),
actions
)
}
this.story.go(this.seq.current());
},
changeSlide: function(n) {
this.seq.current(n);
}
});
</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-20934186-21', 'cartodb.github.io');
ga('send', 'pageview');
</script>
<script id="md_template" type="text/template">```
-title: "A World Without Water"
-author: "Financial Times"
```
#A World Without Water
```
- center: [-23.535308, -69.519024]
- zoom: 11
```
Water scarcity is starting to hit the balance sheets of multinationals, who have spent more than $84bn managing their water usage in the last three years.
The Financial Times has gathered data on 78 corporate water projects around the globe. Here are some of the ways those billions have been spent.
#Xstrata and partners, Chile
```
- center: [-23.425308, -69.509024]
- zoom: 12
L.marker([-23.425308, -69.509024]).actions.addRemove(S.map)
```
Xstrata, the global mining corporation, has invested $1.1m in water optimisation at its copper mine in Lomas Bayas, Chile.
#Rio Tinto, Western Australia
```
- center: [-22.727956, 119.310399]
- zoom: 11
L.marker([-22.767956, 119.219399]).actions.addRemove(S.map)
```
Pilbara, Western Australia is home to dozens of iron-ore mines, such as the one highlighted.
Rio Tinto has invested $310m in a pipeline that will bring 10 gigalitres of water a year to its borefield, saving the state $370m on a proposed desalination project.
#BHP Biliton and Rio Tinto, Chile
```
- center: [-24.266667, -69.066667]
- zoom: 12
```
Rio Tinto and BHP Billiton are together spending more than $1bn at another copper mine in Chile’s Atacama Desert.
The two mining corporations had investment approved in 2013 to build a desalination plant in Escondida.
#SASOL, Qatar
```
- center: [25.893357, 51.513472]
- zoom: 13
L.marker([25.873357, 51.563472]).actions.addRemove(S.map)
```
Ras Laffan Industrial City, Qatar, is home to a cluster of oil refineries.
South African energy giant Sasol is investing an undisclosed amount on wastewater management at its Oryx gas-to-liquids plant.
#Shell and Qatar Petroleum, Qatar
```
- center: [25.896418, 51.505314]
- zoom: 13
L.marker([25.896418, 51.505314]).actions.addRemove(S.map)
```
The neighbouring Pearl gas-to-liquids plant is run by Shell and Qatar Petroleum.
The two are jointly spending $640m on various water-reuse initiatives.
#Newmont Mining, Peru
```
- center: [-6.983589, -78.500344]
- zoom: 14
```
Newmont mining is spending $37.5m on two reservoirs at its Conga facilities in Peru.
The first was completed in 2013 at a cost of $12.5m, with the second still in progress.
#SABMiller, India
```
- center: [20.608104, 86.416921]
- zoom: 12
```
Brewer SABMiller is spending an undisclosed sum on rainwater harvesting in villages in Orissa, eastern India.
#Google, Belgium
```
- center: [50.473047, 3.865240]
- zoom: 16
L.marker([50.470047, 3.865240]).actions.addRemove(S.map)
```
Google is launching water management schemes at several of its data centres, including this one in St Ghislain, Belgium.
The plant uses water from the nearby industrial canal for cooling.
#Mondi, South Africa
```
- center: [-29.287277, 30.357106]
- zoom: 16
```
Mondi, one of the world's largest paper manufacturers, has spent $19.4m on conservation of wetlands in South Africa's Karkloof nature reserve, just North of Pietermaritzburg.
#PepsiCo, Jordan
```
- center: [30.973309, 35.715784]
- zoom: 15
```
PepsiCo established a partnership with the Ministry of Water and Irrigation and funded the entire construction cost of the Wadi Al-Ahmar dam project in Tafileh.
On completion, the dam will collect rainwater using advanced harvesting techniques, which subsequently will contribute to local community development and rehabilitate ecosystems affected by climate change.
#Rio Tinto, Western Australia
```
- center: [-16.712222, 128.3875]
- zoom: 15
```
Rio Tinto has spent $4.5m on water recycling equipment at its mine in Argyle, East Kimberley.
#Namakwa Diamonds, Lesotho
```
- center: [-29.023920, 28.628588]
- zoom: 16
```
In Northern Lesotho, Namakwa Diamonds invested $1.8m on a pipeline taking water to its dam for power generation after local levels proved too low.
#Nestlé, South Africa
```
- center: [-34.146170, 22.112620]
- zoom: 16
L.marker([-34.146170, 22.106620]).actions.addRemove(S.map)
```
Just across the sea from the protected Seal Island nature reserve, Nestlé's Mossel Bay factory has put in place a series of water-use reduction measures at a cost of $145,000.
#Freeport-McMoRan, Chile
```
- center: [-27.527512, -70.299864]
- zoom: 15
L.marker([-27.527512, -70.299864]).actions.addRemove(S.map)
```
Copper and gold mining firm Freeport-McMoRan has built a desalination plant at its Candelaria copper mine at a cost of $315m.
In 2012 recycled water accounted for 67 per cent of the company's global usage.
#Anglo American, Chile
```
- center: [-26.544920, -70.350114]
- zoom: 15
```
Anglo American has invested $96m in a desalination plant at its Mantoverde copper mine.
The plant has a predicted life of 20 years and it is hoped it will supply all of Anglo American’s water needs in the region.
#Coca-Cola, UK
```
- center: [52.694527, 0.429750]
- zoom: 17
L.marker([52.693927, 0.429750]).actions.addRemove(S.map)
```
Coca-Cola has invested roughly $2m (£1.2m) over three years in Norfolk to reshape the Nar and Cray rivers in partnership with the World Wildlife Fund.
By restoring meanders to the previously straightened channels, they hope to recreate natural floodplains, improve irrigation and create habitats for the local wildlife.
#Anglo American, Queensland, Australia
```
- center: [-21.808485, 147.958766]
- zoom: 12
L.marker([-21.878485, 147.958766]).actions.addRemove(S.map)
```
Another Anglo American desalination plant was built in Queensland in 2010.
Situated at the Moranbah North coal mine, the plant cost $2.6m and has an estimated payback period of four years, providing commercial as well as ecological value.
#Anglo American, South Africa
```
- center: [-25.940624, 29.330084]
- zoom: 15
```
In Emalahleni, Anglo American is spending $100m on water reclamation, pumping water from its Witfield coal mines for reuse.
#QGC, Queensland, Australia
```
- center: [-26.948135, 150.457762]
- zoom: 15
L.marker([-26.948135, 150.457762]).actions.addRemove(S.map)
```
QGC is converting some of the water it creates as a byproduct of gas production for use by agriculture and industry.
This and other schemes have cost a total of $920m.
#BP, Australia
```
- center: [-32.230467, 115.766976]
- zoom: 15
```
BP has taken steps to reduce its use of drinking water for industrial purposes.
An overall investment of $13m at its Kwinana refinery had by 2012 improved its water efficiency by more than 50 per cent.
#EDF, France
```
- center: [45.914584, 6.936125]
- zoom: 14
L.marker([45.914584, 6.936125]).actions.addRemove(S.map)
```
In the French Alps, water scarcity is less obvious but prudent use of resources is no less important.
EDF has put $20m into a series of subglacial channels that carry meltwater down to a dam in Chamonix, where it can be used for electricity generation.
![Des Bois](http://interactive.ftdata.co.uk/_other/johnTest/water_map/desbois.jpg)
Explore all 78 water improvement projects for which the FT has gathered data in our [interactive world map](http://interactive.ftdata.co.uk/_other/johnTest/water_map/secondmap.html).
</script></body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment