-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
362 lines (330 loc) · 26.9 KB
/
index.html
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
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
<!DOCTYPE html>
<html lang='en' data-version='1504895452960'>
<head>
<title>Energy: A Visual Story</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='description' content="An overview of how we consume energy, what that means for the planet, and how we can do better."/>
<meta name='news_keywords' content='tk' />
<meta property='og:title' content='A Visual Story of Energy' />
<meta property='og:site_name' content='The Pudding' />
<meta property='og:url' content='https://pudding.cool/year/month/name/' />
<meta property='og:description' content="An overview of how we consume energy, what that means for the planet, and how we can do better."/>
<meta property='og:type' content='article' />
<meta property='og:locale' content='en_US' />
<meta property='og:image' content='https://pudding.cool/year/month/name/' />
<meta property='og:image:type' content='image/jpeg' />
<meta property='og:image:width' content='1200' />
<meta property='og:image:height' content='600' />
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:site' content='https://pudding.cool' />
<meta name='twitter:creator' content='@nehaludyavar' />
<meta name='twitter:title' content='A Visual Story of Energy' />
<meta name='twitter:description' content="An overview of how we consume energy, what that means for the planet, and how we can do better." />
<meta name='twitter:image:src' content='https://pudding.cool/year/month/name/' />
<link rel='canonical' href='https://pudding.cool/year/month/name/' />
<!-- smoosh -->
<!-- endsmoosh -->
<link rel="stylesheet" href="css/critical.css" />
<link rel="stylesheet" href="css/bundle.css" />
<!-- Custom CSS -->
<link rel="stylesheet" href="css/style.css"/>
<style>
/*
This font software is the property of Commercial Type.
You may not modify the font software, use it on another website, or install it on a computer.
License information is available at http://commercialtype.com/eula
For more information please visit Commercial Type at http://commercialtype.com or email us at info[at]commercialtype.com
Copyright (C) 2017 Schwartzco Inc.
License: 1704-GNCLGK
*/
/* Canela */
@font-face {
font-family: 'Canela Web';
src: url('https://pudding.cool/assets/fonts/canela/Canela-Light-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/canela/Canela-Light-Web.woff') format('woff');
font-weight: 300;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: 'Canela Web';
src: url('https://pudding.cool/assets/fonts/canela/Canela-Bold-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/canela/Canela-Bold-Web.woff') format('woff');
font-weight: 700;
font-style: normal;
font-stretch: normal;
}
/* Publico Text */
@font-face {
font-family: 'Publico Text Web';
src: url('https://pudding.cool/assets/fonts/publico/PublicoText-Roman-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/publico/PublicoText-Roman-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: 'Publico Text Web';
src: url('https://pudding.cool/assets/fonts/publico/PublicoText-Bold-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/publico/PublicoText-Bold-Web.woff') format('woff');
font-weight: 700;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: 'Publico Text Web';
src: url('https://pudding.cool/assets/fonts/publico/PublicoText-Italic-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/publico/PublicoText-Italic-Web.woff') format('woff');
font-weight: 400;
font-style: italic;
font-stretch: normal;
}
/* Atlast Grotesk */
/*
@font-face {
font-family: 'Atlas Grotesk Web';
src: url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Light-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Light-Web.woff') format('woff');
font-weight: 300;
font-style: normal;
font-stretch: normal;
}
*/
@font-face {
font-family: 'Atlas Grotesk Web';
src: url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Regular-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Regular-Web.woff') format('woff');
font-weight: 400;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: 'Atlas Grotesk Web';
src: url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Medium-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Medium-Web.woff') format('woff');
font-weight: 500;
font-style: normal;
font-stretch: normal;
}
@font-face {
font-family: 'Atlas Grotesk Web';
src: url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Bold-Web.woff2') format('woff2'),
url('https://pudding.cool/assets/fonts/atlas/AtlasGrotesk-Bold-Web.woff') format('woff');
font-weight: 600;
font-style: normal;
font-stretch: normal;
}
</style>
<!-- smoosh -->
<script src='js/critical.js'></script>
<!-- endsmoosh -->
<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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-90567923-1', 'auto');
ga('send', 'pageview');
</script>
</head>
<body class='tk-publico'>
<header>
<a href='https://pudding.cool' target='_blank' class='logo'>
<svg xmlns="http://www.w3.org/2000/svg" width="296.91" height="47.52" viewBox="19.42 11.31 296.911 47.518" aria-labelledby="logo-title" role="img">
<title id="logo-title">The Pudding</title>
<path d="M47.77 56.8c-2.5-.2-15.5-.2-18 0v-.44l2.05-.3c1.8-.25 2.5-1.35 2.5-9.35V15.1h-1.9c-3.6 0-5.5 1.75-9.7 9.4l-2.8 5.25h-.5c.3-3.2 1-13.24 1.1-16.6l.1-.04c1.8.2 9.3.5 11.1.5h17.5c2.3 0 11.1-1.4 13.2-2.1l.1.1v15.8h.27l1-1.1c2.9-3.3 5.3-4.4 8-4.4 4.4 0 7 2.4 7 7.5v11.5c0 7.7.7 8.9 2.6 9.2l1.1.2v.5c-2.4-.2-12.4-.2-14.8 0v-.4l.5-.1c1.6-.4 2.3-1.3 2.3-9.2v-11c0-2.5-.9-3.4-3.1-3.4-.8 0-1.8.2-3.2.7l-1.8.6v12.9c0 7.9.6 8.8 2.2 9.3l.56.2v.5c-2.38-.2-12.4-.2-14.78 0v-.4l1.03-.2c1.97-.3 2.7-1.5 2.7-9.2V21c-2.43-4.6-5.13-5.75-8.63-5.75h-2.1v31.6c0 8 .6 9.07 2.4 9.37l1.9.3v.46l-.1-.18zm3.25-.64h55.7v.65H51v-.6zm45-5.1c-8.5 0-12.3-4.55-12.3-13.8v-1.7c0-8.86 4.3-13.76 13.28-13.76 7.66 0 11.1 3.26 11.1 12.36v1.8H92.97v3.2c0 7.1 1.9 9 6 9 2.45 0 5-1.25 7.4-2.9l2-1.35.1 1.4-1.6 1.5c-2.95 2.7-6.75 4.4-10.85 4.4v-.1zm-3-16.6h7.4v-2.7c0-6.75-1-7.95-3.7-7.95-2.6 0-3.7 1.2-3.7 9.3v1.4zm35.2 22.35c-2.5-.2-15.7-.2-18.2 0v-.4l1.9-.3c1.8-.3 2.4-1.3 2.4-9.3V23.5c0-8.04-.6-9.14-2.4-9.4l-1.8-.24v-.45c1.36.1 7.8.2 9 .2 1.46 0 8.06-.1 9.3-.1 10.36 0 14.96 5.1 14.96 12.8v1.5c0 7.8-4.55 12.8-14.9 12.8h-2.2V39c.55.04 1.1.04 1.5.04 3.8 0 5.35-2.9 5.35-10.44v-3.3c0-7.54-1.54-10.44-5.44-10.44-.4 0-2.6 0-4.1.05v31.8c0 8 .7 9.1 2.5 9.4l2.3.3v.5l-.3-.1zm3.3-.6H282.3v.7H131.5v-.7zm22.6-5c-4.4 0-7-2.4-7-7.5V33.2c0-7-.4-8.56-1.8-9l-.6-.2v-.4c1.8-.2 8.4-1.1 10.7-1.66v20.9c0 2.5.9 3.4 3.1 3.4.74 0 1.7-.24 3.1-.64l1.84-.5V33.2c0-6.9-.8-8.2-2.7-8.86l-1.1-.34v-.4c2.1-.2 9.7-1.1 12-1.66v17.9c0 6.86.75 8.2 2.65 8.8l1.1.36v.45c-2.1.16-9.2 1.06-11.5 1.66l-.3-5.4h-.2l-1 1.1c-2.9 3.3-5.3 4.4-8.1 4.4zm32 0c-5.4 0-9-4.4-9-13.6v-2.2c0-9.5 4.3-13.6 11.1-13.6 2.4 0 4.24.5 6.14 2.2l.8.7h.24v-2.6c0-6.5-.76-7.7-2.66-8.3l-1.1-.3v-.4c2.14-.2 9.44-1.1 11.74-1.6v28.2c0 7 .8 8.5 2.7 9.1l1.05.4v.5c-2.1.2-8.95 1.1-11.25 1.7l-.35-5.4h-.27l-1 1.1c-2.95 3.3-5.4 4.4-8.1 4.4l-.05-.2zm7.7-5.6l1.6-.5V33.9c0-6.96-1.36-8.8-4.6-8.8-3.3 0-4.66 2.6-4.66 9.54v3.7c0 6.2 1.44 7.9 4.5 7.9.84 0 1.84-.2 3.2-.64h-.05zm24.1 5.6c-5.46 0-9-4.4-9-13.6v-2.2c0-9.5 4.2-13.6 11-13.6 2.44 0 4.2.6 6.14 2.2l.84.7h.24v-2.6c0-6.5-.8-7.6-2.7-8.3l-1.06-.3v-.4c2.1-.2 9.45-1.1 11.75-1.6v28.2c0 7 .75 8.5 2.65 9.1l1.1.4v.5c-2.15.2-9 1.1-11.3 1.7l-.36-5.4h-.27l-1 1.1c-2.95 3.3-5.35 4.4-8.1 4.4l.06-.2zm7.64-5.6l1.6-.5V33.9c0-6.96-1.36-8.8-4.66-8.8-3.26 0-4.6 2.6-4.6 9.54v3.7c0 6.2 1.4 7.9 4.44 7.9.84 0 1.84-.2 3.2-.64h.02zm28.1 5.1c-2.16-.2-11.56-.2-13.76 0v-.4l.54-.1c1.6-.4 2.2-1.3 2.2-9.2v-7.7c0-6.9-.76-8.2-2.66-8.8l-1.1-.3v-.4c2.15-.2 9.7-1.1 12-1.6V41c0 7.9.7 8.8 2.24 9.27l.5.14v.5l.03-.1zm-12.1-35.3c0-2.6 1.6-4.1 5.1-4.1 3.54 0 5.1 1.5 5.1 4.1 0 2.6-1.56 4.1-5.1 4.1-3.5 0-5.1-1.5-5.1-4.1zm45.13 35.3c-2.4-.2-12.4-.2-14.8 0v-.4l.5-.1c1.5-.4 2.2-1.3 2.2-9.2V30.1c0-2.5-.9-3.4-3.1-3.4-.8 0-1.8.2-3.2.66l-1.8.55v12.9c0 7.9.6 8.8 2.2 9.3l.53.2v.5c-2.35-.2-12.4-.2-14.75 0v-.4l1.07-.2c1.92-.3 2.7-1.5 2.7-9.2v-7.7c0-6.9-.8-8.2-2.7-8.8l-1.1-.3v-.4c2.1-.2 9.2-1.1 11.5-1.6l.33 5.4h.28l1-1.1c2.94-3.2 5.4-4.4 8.1-4.4 4.44 0 7.04 2.4 7.04 7.5V41c0 7.7.77 8.9 2.67 9.2l1.1.2v.5l.1-.15zm15.6 7.9h-4.7c-10.5 0-12.3-1.3-12.3-3.4V55c0-1.85 2.5-4.35 7.3-4.35h.2V54c0 1.8 1 2.6 4.7 2.6h4.6c5.02 0 6.82-1.3 6.82-3.2V53c0-1.8-.85-3.2-3.5-3.2h-13.3c-2.75 0-4.2-1.3-4.2-3.7v-.16c0-1.94 1.2-3.54 4.75-5.4l3-1.54v-.5c-5.64-1-8.2-3.46-8.2-7.86v-.24c0-5.55 4.16-8.55 13.1-8.55 2.46 0 4.46.26 6.46.8l.16-.34c1.7-3.4 3.93-5 8-5h.9v5.4h-5.6c-.5 0-1.9.1-2.27.2l-.36.1v.5c3.8 1.1 5.76 3.6 5.76 7.1v.3c0 5.6-4.13 8.6-13.03 8.6-1.3 0-2.5-.1-3.7-.2l-.9 1.1c-.85 1-1.05 1.5-1.05 1.8 0 .4.2.5.6.5h11.62c5.8 0 8.9 3 8.9 7.4v.4c0 5.28-5.9 8.5-14 8.5l.1-.2zm2.5-27.7v-.7c0-4.7-.9-6.3-4.1-6.3-3.3 0-4.1 1.6-4.1 6.3v.8c0 4.7.9 6.3 4.1 6.3 3.2 0 4-1.6 4-6.3v-.1z"/>
</svg>
</a>
</header>
<section id="heading">
<div class="intro">
<h1 class='intro__hed tk-canela'>A Visual Story of Energy</h1>
<p class='intro__dek tk-atlas'>An overview of how we consume energy, what that means for the planet, and how we can do better.</p>
<p class='intro__byline tk-atlas'>By <a href='https://twitter.com/nehaludyavar' target='_blank'><strong>Nehal Udyavar</strong></a></p>
</div>
</section>
<section id="content">
<div class="prose">
<h3 class="prose-subtitle">Introduction</h3>
<p>On September 15, 1830, the Liverpool and Manchester Railway, the first railway to rely exclusively on the steam engine, was opened to the public. Steam locomotives powered by coal hauled passengers, including the then Prime Minister, across the 56km of track between the Port of Liverpool and Manchester. A little more than half a century later, on January 12, 1882, the Edison Electric Light Station, the world's first coal-fired power station, began generating electricity in London. The plant illuminated 968 incandescent street lamps along a 1 km stretch between Holborn Circus (not actually a circus) and St. Martin's Le Grand (a former parish).</p>
<p>Nearly two centuries after the opening of L&M, on December 12, 2015, in a well-lit exhibition complex in Le Bourget, Paris, a consensus was reached at the annual United Nations Climate Change Conference (COP21) on a global agreement to reduce climate change, conventionally called the Paris Agreement. The Agreement, which went into effect almost a year later, aims to keep the global temperature rise this century well below 2°C by, among other ways, reducing global greenhouse emissions, like the ones released when burning coal.</p>
<p>Between these events, the world of energy transformed like no time period has ever seen. Electricity went from being the subject of intriguing scientific experiments to an essential part of civilization. Soon after the first coal-fired power station in London, electricity began being generated by larger and more complex machines, using an ever-growing list of energy sources. Around the world, coal power-stations, oil refineries, and nuclear power-plants sprung up near cities and towns and oil drills littered the ocean surface.</p>
<p>Transportation transformed entirely too. A mere twenty years after the inaugural L&M train ride, Britain had managed to lay over 10,0000 km of railway tracks; a hundred years after, gasoline-guzzling automobiles replaced grass-munching horses as the primary form of personal transportation. Ships went from large to gargantuan, and planes went from gliding one individual 120 feet in North Carolina to transporting, on average, 8 million people a day across six continents.</p>
<p>Evidently, the billowing smoke from the burning of all these fossil fuels was overlooked and its effects on our environment underestimated. Global warming is now the defining crisis of our time, and an incredibly difficult problem to mitigate even under the best conditions. Ignoring the political and legal hurdles of implementing the Agreement, the move towards utilizing renewable energy sources has been slow for two main reasons: cost, which we will get to later in the visual essay, and our voracious and ever-growing appetite for — and dependence on — energy, which we will dive into now…</p>
</div>
<div id="energy-consumption" class="container line-scrolly">
<div class="graphic-prose-container">
<div id="energy-prose" class="graphic-prose">
<div class="spacer"></div>
<div class="slide-wrapper">
<p class="trigger slide" id="energy-slide-1" data-step=0>Large-scale iron and steel production, the beginning of electrification, and the invention of the internal combustion engine were some of the technological hallmarks of the late 19<sup>th</sup> and early 20<sup>th</sup> century. It also marked the beginning of the exponential rise in energy demand.</p>
</div>
<div class="slide-wrapper">
<p class="trigger slide" id="energy-slide-2" data-step=0>These and subsequent technologies got more efficient and more mainstream during the '50s, and the booming populations of Western Europe and the United States required more energy to sustain their new, modern lifestyle.</p>
</div>
<div class="slide-wrapper">
<p class="trigger slide" id="energy-slide-3" data-step=0>The final third of the 20<sup>th</sup> century saw the Asian-Pacific countries, especially the incredibly populous nations of China and India, increase their energy consumption as they became more developed.</p>
</div>
<div class="slide-wrapper last-slide">
<p class="trigger slide" id="energy-slide-4" data-step=0>
As of 2016, the yearly World Energy Consumption is a little above 154,000 TWh.
<br>
If you could somehow squeeze all the energy into a Tesla Model S P100D battery, you could drive to the Sun - and back - 2450 times!
</p>
</div>
</div>
</div>
<div class="graphic-container">
<div id="energy-chart" class="graphic line-scrolly-chart">
<h2 class="tk-canela graphic-title">World Energy Consumption</h2>
<h4 class="tk-atlas graphic-subtitle">World primary energy consumption, measured in terawatt hours (TWh).</h4>
</div>
</div>
</div>
<div class="prose">
<p>Of course, this period that saw both the Industrial and the Digital Revolution was also the period where the human population "exploded". It took from the beginning of human history till the early 19<sup>th</sup> century for the population to reach 1 billion, another 120 years to reach 2 billion, and not even a century since then to reach the 7.6 billion we are today. So, it's probably fair that we factor population into the plot…</p>
</div>
<div id="energy-per-capita" class="container line-scrolly">
<div id="energy-per-capita-graphic" class="graphic-container">
<div id="energy-per-capita-chart" class="graphic line-scrolly-chart">
<h2 class="tk-canela graphic-title">Energy Consumption per capita</h2>
<h4 class="tk-atlas graphic-subtitle">Energy consumption per capita for countries around the world, measured in kilowatt hours (kWh).</h4>
<div id="energy-per-capita-tooltip" class="tooltip">
<p class="tooltip-heading tk-atlas"><span id="energy-per-capita-tooltip-heading">X</span></p>
<p class="tooltip-data tk-atlas">
<span id="energy-per-capita-tooltip-y">Y</span>
</p>
<p class="tooltip-data tk-atlas">
<span id="energy-per-capita-tooltip-x">X</span>
</p>
</div>
</div>
</div>
<div id="energy-per-capita-graphic-prose" class="graphic-prose-container">
<div id="energy-per-capita-prose" class="graphic-prose">
<div class="spacer"></div>
<div class="slide-wrapper">
<p class="trigger slide slide-right" id="energy-per-capita-slide-1" data-step=0>Since the '70s, the average energy consumption per capita for the World has been steadily rising, from about 15,500 kWh in 1971 to a little over 22,000 kWh in 2014.</p>
</div>
<div class="slide-wrapper">
<p class="trigger slide slide-right" id="energy-per-capita-slide-2" data-step=0>In today's developed countries, per capita consumption rose rapidly in the '60s and early 70s, and are now stable anywhere between 40,000-100,000 kWh.</p>
</div>
<div class="slide-wrapper">
<p class="trigger slide slide-right" id="energy-per-capita-slide-3" data-step=0>Developing countries, like China, Brazil, and India, are in the midst of a rise in energy demand thanks to their rapidly-growing economies.</p>
</div>
<div class="slide-wrapper">
<p class="trigger slide slide-right" id="energy-per-capita-slide-4" data-step=0>And then, of course, there are countries like Iceland and Qatar, that devour a collosal amount of energy</p>
</div>
</div>
</div>
</div>
<div class="prose">
<p>It's no surprise that developed countries tend to consume more energy per capita. After all, the widespread infrastructure that are the hallmarks of a developed nation, like expansive electricity-grids, comprehensive public transit and road networks, and technological prowess, are quite energy-intensive to create and maintain. And, of course, developing countries are actively pursuing the expansion of said infrastructure, which will mean a likely continuation in the rising–energy–consumption–per–capita trend.</p>
<p>So, it really comes down to the fuels used. Today, the world utilizes a variety of energy sources: heat from the earth, radiation from the Sun, the burning of fossil fuels, and the splitting of uranium atoms, just to name a few. A country might adopt a range of fuels to meet their energy needs; its location, politics, and technology playing important roles in which ones it chooses. Qatar and Iceland both consume an enormous amount of energy, but Iceland's electricity is generated completely by renewable sources (geothermal, mostly), whereas Qatar's is generated using natural gas.</p>
<p>Iceland is the exception, however, and most countries in the world use fossil fuels to power themselves. To get an idea of how challenging it will be to make the complete shift to renewables, let's take a look at the fuel breakdown of The United States, the second-largest primary energy consumer in the world:</p>
</div>
<div id="fuel-sankey" class="container">
<div id="fuel-flow-title" class="tk-canela graphic-title">
<h2>Fuel Flowchart</h2>
</div>
<div id="fuel-flow-chart" class="graphic">
</div>
<div id="fuel-flow-info-container">
<div id="fuel-flow-prose-container">
<div id="fuel-flow-prose">
<p>This is where the step-by-step explanation will go</p>
</div>
</div>
<div id="fuel-flow-prose-arrows">
<div class="fuel-arrow" id="fuel-left-arrow">
<img src="assets/icons/left-arrow.svg"/>
</div>
<div class="fuel-spacer">
</div>
<div class="fuel-arrow" id="fuel-right-arrow">
<img src="assets/icons/right-arrow.svg"/>
</div>
<!--<div>Icons made by <a href="https://www.flaticon.com/authors/lucy-g" title="Lucy G">Lucy G</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></div>
</div>-->
</div>
<div id="fuel-flow-calc" class="tk-atlas">
<div id="fuel-summary-stats">
<h3 id="fuel-name">Energy Calculator</h3>
<table>
<tr>
<td id="fuel-total-energy-field">Energy Produced:</td>
<td id="fuel-total-energy-value"></td>
</tr>
<tr>
<td id="fuel-percent-total-field">% Total Energy:</td>
<td id="fuel-percent-total-value"></td>
</tr>
</table>
</div>
<div id="fuel-sector-breakdown-stats">
<h4 id="fuel-sector-breakdown-title">Breakdown by Sector</h4>
<table id="fuel-sector-breakdown-table">
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="prose">
<p>And remember, the United States is not even the largest consumer of energy. That spot is taken by China, with 35,506 TWh (25% more than the U.S.), of which 88% is produced from fossil fuels. Along with third-place India, which consumes 8,419 TWh (74% fossil fuels), the three countries make up roughly 45% of the world’s energy consumption.</p>
<p>Combining the other 190 members of the United Nations, about 81% of the world’s energy consumption comes from fossil fuels (as of 2014). Clearly, there’s a large mountain to climb for renewable energy to be able to meet current and future energy demand, and subsequently, accomplish the goals of The Paris Agreement. But, there’s good news…</p>
<h3 class="prose-subtitle">The Green That Saves the Green</h3>
<p>The shift to renewable energy is inevitable; non-renewable fuels are, by definition, finite, and eventually going to run out. The purpose of The Agreement, as well as countless companies, organizations, legislation, and policies, is to accelerate that inevitability so that the costs to society are lessened.</p>
<p>Historically, the argument against renewables has been economic: the cost of solar photovoltaics was much higher than that of coal or natural gas. That’s not the case anymore. The levelized cost of wind and solar – the estimated cost of building and operating a plant over its lifetime – has fallen significantly over the last few decades, and in certain regions, is competitive with coal and other fossil fuels. As of 2017, the levelized cost for various energy-generating technologies looks like this:</p>
</div>
<div id="levelized-energy-cost" class="container scrolly">
<div id="levelized-energy-cost-graphic" class="centered-graphic-container">
<div id="levelized-energy-cost-chart" class="graphic line-scrolly-chart">
<h2 class="tk-canela graphic-title">Levelized Cost of Energy</h2>
<h4 class="tk-atlas graphic-subtitle">An estimate of the cost of electricity generating technologies over its lifetime, taking into account initial investment, operations and maintenance, cost of fuel, and cost of capital. Measured in $/MWh.</h4>
</div>
</div>
</div>
<div class="prose">
<p>While cost ranges for utility-scale solar and wind are both lower or within the range of coal and natural gas, it’s important to acknowledge that their costs are dependent on region: sunnier and windier places will invariably have lower levelized costs. According to Bloomberg New Energy Finance, solar already rivals coal in cost in Australia, Germany, Italy, Spain, and the U.S., and is expected to rival coal in China and India by 2021. And prices are expected to continue falling; they estimate that by 2040, prices will fall 66% for solar, 47% for onshore wind, and 71% for offshore wind.</p>
<p>Surely, the falling prices points to renewable energy being adopted more quickly. In any case, the plummeting prices have made investors quite optimistic:</p>
</div>
<div id="renewable-energy-investment" class="container scrolly">
<div id="renewable-energy-investment-graphic" class="centered-graphic-container">
<div id="renewable-energy-investment-chart" class="graphic line-scrolly-chart">
<h2 class="tk-canela graphic-title">Renewable Energy Investment</h2>
<h4 class="tk-atlas graphic-subtitle">Global investment into renewable energy technologies in 2005 and 2015. Measured in USD.</h4>
</div>
</div>
</div>
<div class="prose">
<p>Between 2005 and 2015, investment in renewable energy went from $73 billion to $286 billion, an increase of 392 percent. Leading this flood of capital is China, who has gone from just over $8 billion to $103 billion during the same period. That’s almost the same as the United States, Europe, and India combined. The BNEF report predicts that, between now and 2040, $10.2 trillion will be invested into power generation, of which 72% will be in renewables.</p>
<p>In mid-2017, the International Energy Agency said that the amount of renewable capacity commissioned almost matched that of coal and natural gas. The encouraging news doesn’t end there – in 2016, global coal consumption declined by 1.7% (compared to the previous year), and coal production fell by 6.2%. The U.K., U.S., and China, saw declines in coal consumption of 52.5%, 8.8%, and 1.6% respectively.</p>
<h3 class="prose-subtitle">The Road to 2°C</h3>
<p>Falling costs and rising investments have made renewable power generation a more desirable option, but there are challenges ahead. The intermittency of solar and wind – (the sun isn’t always shining and the wind always blowing) – mean that new infrastructure is required to accommodate renewable technology. The current power infrastructure is designed for fuel to be transported to a central location, and then the electricity distributed outwards. With renewables, the fuel (sunshine, wind, etc.), is dispersed everywhere, and the generators convert it into electricity right there, and then transport it elsewhere. This requires a more inter-connected and more expansive grid system, which requires countless permits and policy changes.</p>
<p id="last-para">Whether or not the Paris Agreement will be able to achieve its goal of keeping global warming to 2°C is highly contested among scientists. But what it has managed to do, so far, is promote the idea of renewable energy from a global conversation into national policy. It has pushed for research, investment, cooperation, and technological collaboration, and sometimes, a little spark is all that's needed.</p>
</div>
<!--<div id="tooltip">
</div>-->
</section>
<!-- Pudding JS -->
<script src='https://pudding.cool/assets/scripts/d3.v4.9.1.min.js'></script>
<script src='js/bundle.js?version=1504895452960' async></script>
<script src='https://pudding.cool/assets/scripts/pudding-footer.js' async></script>
<!--D3js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://unpkg.com/d3-sankey@0"></script>
<!-- ScrollMagic JS -->
<script src="assets/scripts/ScrollMagic.min.js"></script>
<!-- Custom JS -->
<script src="js/energy-chart.js"></script>
<script src="js/energy-per-capita.js"></script>
<script src="js/fuel-flow-chart.js"></script>
<script src="js/renewable-energy-investment.js"></script>
<script src="js/levelized-energy-cost.js"></script>
<!--<script src="js/co2-ppm-chart.js"></script>-->
</body>
</html>