-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
276 lines (266 loc) · 17 KB
/
Copy pathindex.html
File metadata and controls
276 lines (266 loc) · 17 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
<!doctype html>
<html>
<head>
<title>Data Visualization</title>
<link rel="icon" type="image/png" href="imgs/favicon.png"/>
<link rel="stylesheet" href="lib/fullpage.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="fullpage">
<section id="planetB" class="section">
<img src="imgs/planetB.jpg" class="image" alt="Title image: There is no Planet B">
</section>
<section id="intro" class="section">
<h1 class="introTitle">INTRODUCTION</h1>
<div class="flex-container">
<div class="item textBlock lessRight introduction">
Hey, welcome to our website!
<br/>
We are three EPFL students and we wanted to dedicate our data visualization knowledge to a topic we care about,
and we really think you should too: <strong>Climate Change</strong>. The recent increase in temperature globally
is very likely due to our CO<sub>2</sub> emissions that have been exploding in the past few decades <a href="#ref_1">[1]</a>.
This phenomenon is known as the greenhouse effect <a href="#ref_2">[2]</a>.
<br/>
<br/>
We are not specialists in the subject, and while diving deeper, we realised that we were lacking simple
resources that introduce the topic in its globality. We wanted everyone to have a basic understanding
of greenhouse gases emissions, and where they are coming from.
We will start with a <strong>Global overview of emissions</strong>, and then dive into
each sector: <strong style="color: #fca311">Energy</strong>,
<strong style="color: #495057">Industry</strong>, <strong style="color: #4daf4a">Agriculture</strong>,
and <strong style="color: #023e8a">Transportation</strong>.
<br/>
<br/>
In the following part, you will have an overview of CO<sub>2</sub> emissions worldwide, from 1990 to 2017 <a href="#ref_4">[4]</a>.
We used the CO<sub>2</sub>e metric <a href="#ref_3">[3]</a>, thus allowing us to gather all greenhouse gases emissions in the same value.
Please feel free to explore by choosing different years (slider), countries (click).
</div>
<div class="item textBlock lessLeft introduction">
<br/>
<span>Observe the total emissions changing, the split between each sector evolving…</span>
<span>Ps: Have a look at Norway in 2017 or countries in green to see the effects of reforestation.</span>
<img src="imgs/planet.svg" class="planetImage" alt="Planet image">
</div>
</div>
</section>
<section id="overview" class="section">
<h1 id="countryData">
<span id="countryName"></span>
<span> - </span>
<span id="value-time"></span>
<span>: </span>
<span id="countryEmission"></span>
</h1>
<div id="slider-time"></div>
<img class="click_me_left" src="imgs/click_me_left.png" alt="Click me arrow">
<div class="flex-container" id="mapChart">
<div class="mapLeft">
<div id="sectorChart"></div>
</div>
<div class="mapRight">
<div id="worldmap"></div>
</div>
</div>
<div class="flex-container" id="legends">
<div id="sectorLegend"></div>
<div id="colorLegend"></div>
</div>
</section>
<section id="energy_section" class="section">
<div class="slide">
<h1 class="energy_title">Energy</h1>
<div class="flex-container">
<div class="item textBlock lessRight">
<br/><br/>
<br/><br/>
With around <strong>35%</strong> of the total emissions, <strong>energy</strong> is the biggest contributing sector.
It includes both producing <strong>electricity</strong> (80% of the total) and <strong>heating/refrigerating</strong> our buildings (20%) <a href="#ref_5">[5]</a>.
The good news is that most of the CO<sub>2</sub> emissions linked to this sector can be drastically decreased.
<br/><br/>
On one hand, innovation in the past two decades has driven the cost of <strong>renewable energies</strong> down <a href="#ref_6">[6]</a>.
Although nuclear energy is not widely accepted because of the danger it presents, and the nuclear waste
it produces, it is a form of energy that does not emit CO<sub>2</sub>.
It is the second biggest source of low carbon energy, just after hydropower <a href="#ref_7">[7]</a>.
<br/><br/>
The following visualization <a href="#Energy/1">(click arrow to the right)</a> shows the current state of electricity production in all the countries in
the world <a href="#ref_8">[8]</a>. Feel free to rank the countries based on one kind of production, look at relative or
absolute data.
</div>
<img class="lessLeft lightbulbImage" src="imgs/ampoule.jpg" alt="Lightbulp">
</div>
</div>
<div class="slide">
<img class="click_me_right" src="imgs/click_me_right.png" alt="Click me arrow">
<div id="energyHeader"></div>
<div id="energyChart" class="scrollable height60"></div>
<div class="flex-container buttons-energy">
<button class="textButton" id="changeMode">Absolute values</button>
<button class="textButton" id="changeCountries">Exclude World and Continents</button>
<button class="secTextButton" id="resetView">Reset</button>
</div>
</div>
</section>
<section id="industry_section" class="section">
<h1>Industry</h1>
<div class="flex-container">
<div id="industryviz" class="item lessRight"></div>
<div class="item textBlock lessLeft">
<br/>
<br/>
<br/>
<br/>
It is not widely known, but <strong>producing materials, objects and chemicals</strong> is one of the biggest sources of
emissions, 23% of the total.
Unfortunately, It is also one of the sectors that need the most innovation to reduce its emissions.
<br/>
<br/>
For example, the <strong>process</strong> (calcination reaction) needed to create cement <strong>directly emits CO<sub>2</sub> </strong><a href="#ref_9">[9]</a>.
Moreover, we will not stop building cities (cement, iron, steel) any time soon, as the total population
will increase until 2100 according to estimations.
<br/>
It is thus crucial to find <strong>new ways to produce</strong> these materials without emitting too much CO<sub>2</sub>.
<br/>
<br/>
In this plot, have a look at the trends regarding materials productions since 1990 <a href="#ref_10">[10]</a>.
</div>
</div>
</section>
<section id="agriculture_section" class="section">
<div class="slide">
<h1 class="agriculture_title">Agriculture</h1>
<div class="flex-container">
<div class="item textBlock lessRight">
<br/>
The agricultural sector accounts for 21% of the total CO<sub>2</sub> emissions.
We can distinguish three main sources <a href="#ref_5">[5]</a>:
Food production (65%),
Deforestation (19%), and
Food waste (16%).
<br/>
<br/>
The emissions from <strong>food production</strong> are mostly due to <strong>cattle</strong>, and the use of <strong>fertilizers</strong> <a href="#ref_11">[11]</a>.
As a <strong>consumer</strong>, the best way to reduce our carbon footprint is to reduce the consumption of food
emitting lots of CO<sub>2</sub> while being produced.
<br/>
Then, comes <strong>deforestation</strong>, which is expanding to increase the size of cultivable lands. Whenever we
burn a tree, the CO<sub>2</sub> it had accumulated over its lifetime is directly dumped into the atmosphere.
<br/>
Finally, <strong>food waste</strong> is still responsible for a large amount of the emissions of the agricultural sector.
In most industrialized countries, around 20% of food is wasted. Not so surprisingly, the winner of this
controversial price is the USA: between 30 and 40% of the food supply ends up in the trash <a href="#ref_12">[12]</a>.
<br/>
<br/>
For this part, we invite you to discover the amount of CO<sub>2</sub> produced per 1kg for various products <a href="#Agriculture/1">(click arrow to the right)</a>. <a href="#ref_13">[13]</a>.
</div>
<img class="item columnsImage lessLeft" src="imgs/deforestation.jpg" alt="Deforestation image">
</div>
</div>
<div class="slide">
<div id="agriculture_plot"></div>
<div class="flex-container buttons-agriculture">
<a id="all" class="button active">Altogether</a>
<a id="type" class="button">Grouped by type</a>
</div>
</div>
</section>
<section id="transportation_section" class="section">
<h1>Transportation</h1>
<div class="flex-container">
<div id="transportationViz" class="item lessRight"></div>
<img class="move_me" src="imgs/move_me.png" alt="Move me arrow">
<div class="item lessLeft">
<div class="textBlock">
Finally, with around 18% of the total emissions, the <strong>transportation sector</strong> comes last.
Usually, people tend to overestimate the emissions linked to this sector.
<br/>
<br/>
The good news is that <strong>most terrestrial vehicles can be electrified</strong>.
Combined with low carbon energy sources, we can decarbonate most of those emissions.
<br/>
<br/>
However, reducing the impact of bigger means of transport such as planes, or shipping will be difficult.
Indeed, batteries used for electric vehicles are too heavy to be used for aviation or shipping.
The future of aviation will <strong>require innovations</strong> that are currently, either still in development
(hydrogen for example) or too expensive (sustainable fuels) compared to fossil fuels <a href="#ref_14">[14]</a>.
<br/>
<br/>
For this last part, we invite you to place each icon (representing a means of transportation) into
its corresponding box (total emissions). The pipe corresponds to pipelines emissions <a href="#ref_15">[15]</a>. When you are ready, click on the button to see if you are correct.
</div>
<div class="center topPadding20">
<button class="button" id="correct-button">Show Solution</button>
</div>
</div>
</div>
</section>
<section id="references_section" class="section">
<h1>References</h1>
<div class="flex-container">
<div class="item references">
<span id="ref_1">[1] <a href="https://climate.nasa.gov/evidence/">https://climate.nasa.gov/evidence/</a></span>
<span id="ref_2">[2] <a href="https://en.wikipedia.org/wiki/Greenhouse_effect">https://en.wikipedia.org/wiki/Greenhouse_effect</a></span>
<span id="ref_3">[3] <a href="https://en.wikipedia.org/wiki/Global_warming_potential">https://en.wikipedia.org/wiki/Global_warming_potential</a></span>
<span id="ref_4">[4] <a href="https://www.climatewatchdata.org/data-explorer">https://www.climatewatchdata.org/data-explorer</a></span>
<span id="ref_5">[5] <a href="https://www.breakthroughenergy.org/go-deeper/sectoral-analysis">https://www.breakthroughenergy.org/go-deeper/sectoral-analysis</a></span>
<span id="ref_6">[6] <a href="https://ourworldindata.org/cheap-renewables-growth#">https://ourworldindata.org/cheap-renewables-growth#</a></span>
<span id="ref_7">[7] <a href="https://www.iaea.org/nuclear-power-and-the-clean-energy-transition/what-is-the-clean-energy-transition-and-how-does-nuclear-power-fit-in">https://www.iaea.org/nuclear-power-and-the-clean-energy-transition/what-is-the-clean-energy-transition-and-how-does-nuclear-power-fit-in</a></span>
<span id="ref_8">[8] <a href="https://github.com/owid/energy-data">https://github.com/owid/energy-data</a></span>
<span id="ref_9">[9] <a href="https://www.iea.org/articles/the-challenge-of-reaching-zero-emissions-in-heavy-industry">https://www.iea.org/articles/the-challenge-of-reaching-zero-emissions-in-heavy-industry</a></span>
<span id="ref_10">[10] <a href="https://ourworldindata.org/food-choice-vs-eating-local">https://ourworldindata.org/food-choice-vs-eating-local</a></span>
<span id="ref_11">[11] <a href="http://www.fao.org/resources/infographics/infographics-details/en/c/218650/">http://www.fao.org/resources/infographics/infographics-details/en/c/218650/</a></span>
<span id="ref_12">[12] <a href="https://www.usda.gov/foodwaste/faqs#">https://www.usda.gov/foodwaste/faqs#</a></span>
<span id="ref_13" >[13] <a href="https://ourworldindata.org/food-choice-vs-eating-local">https://ourworldindata.org/food-choice-vs-eating-local</a></span>
<span id="ref_14">[14] <a href="https://centreforaviation.com/analysis/reports/europe-leads-world-aviation-towards-net-zero-carbon-emissions-553358">https://centreforaviation.com/analysis/reports/europe-leads-world-aviation-towards-net-zero-carbon-emissions-553358</a></span>
<span id="ref_15">[15] <a href="https://www.iea.org/data-and-statistics/charts/transport-sector-co2-emissions-by-mode-in-the-sustainable-development-scenario-2000-2030">https://www.iea.org/data-and-statistics/charts/transport-sector-co2-emissions-by-mode-in-the-sustainable-development-scenario-2000-2030</a></span>
</div>
</div>
</section>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="lib/fullpage.min.js"></script>
<script src="lib/d3.min.js"></script>
<script src="lib/d3-legend.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-geo-projection.v1.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.10.3/babel.min.js'></script>
<script src="https://unpkg.com/d3-simple-slider"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.js"></script>
<script src="JS/map.js"></script>
<script src="JS/d3-tip.js"></script>
<script src="JS/industry.js"></script>
<script src="JS/transportation.js"></script>
<script src="JS/energy.js"></script>
<script src="JS/agriculture.js"></script>
<script>
$(document).ready(function () {
$("#fullpage").fullpage({
navigation: true,
navigationTooltips: [
"Welcome",
"Introduction",
"Overview",
"Energy",
"Industry",
"Agriculture",
"Transport",
"References"
],
anchors: ["Welcome", "Introduction", "Global-Overview", "Energy", "Industry", "Agriculture", "Transport", "References"],
slidesNavigation: true,
controlArrows: true,
showActiveTooltip: true,
});
});
</script>
<script type="text/javascript">
displayMap();
industry();
transportation();
energy();
displayAgriculturePlot()
</script>
</html>