-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
211 lines (207 loc) · 14.3 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
<html>
<head>
<title>ClimateGraph - Visualising Climate Change</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.12.0/d3.min.js"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:700,800,900|Heebo:300,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
<meta name="description" content="ClimateGraph.io aims to simplify the understanding of climate change by visualising data easily.">
<meta name="keywords" lang="de" content="Klimawandel, Daten, Visualisierung, Fridays for Future">
<meta name="keywords" lang="en" content="Climate Change, Data, Visualisation, Fridays for Future">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body>
<img class="hero__bg-img" src="https://viperdev.io/images/background.svg" alt="background">
<img class="hero__graphic" src="img/hero_home.svg" alt="building blocks">
<section id="main">
<div class="container">
<div class="row">
<div class="col m6 s12">
<a href="#" class="brand-logo"><img width="150px" src="logo_wide.svg" height="auto"></a>
<h1>ClimateGraph.io</h1>
<p>Visualising Data about Climate Change</p>
<div class="row">
<div class="col s12 m12 social-icons black-text">
<a target="_blank" rel="nofollow" href="https://www.facebook.com/sharer.php?u=https://climategraph.io">
<i class="fab fa-facebook-f"></i>
</a>
<a title="Share on Twitter" rel="nofollow" target="_blank" href="https://twitter.com/intent/tweet?url=https://climategraph.io/ &text= Visualise Data about Climate Change at ClimateGraph.io %23climatechange %23FridaysForFuture">
<i class="fab fa-twitter"></i>
</a>
<a href="https://www.reddit.com/submit?url=https://climategraph.io/&title=Visualise Data about Climate Change at ClimateGraph.io %23climatechange %23FridaysForFuture" target="_blank" rel="nofollow">
<i class="fab fa-reddit-alien"></i>
</a>
<a title="Click to share on WhatsApp" rel="nofollow" href="whatsapp://send?text=Visualise Data about Climate Change at ClimateGraph.io %23climatechange %23FridaysForFuture https://climategraph.io/">
<i class="fab fa-whatsapp"></i>
</a>
<a title="Click to share on Telegram" rel="nofollow" href="https://telegram.me/share/url?url=https://climategraph.io/&text=Visualise Data about Climate Change at ClimateGraph.io %23climatechange %23FridaysForFuture">
<i class="fab fa-telegram"></i>
</a>
</div>
</div>
<p>
Here you can see how the CO2 emissions are, which are driving climate change. In your country and in the world.
</p>
<p>
You can play with the graphs, compare your country with others and at the end choose the level of climate policy you like and see how it affects emissions and the associated global warming.
You'll also get an idea of which industries cause the most emissions and to which countries they contribute the most.
</p>
<div class="control-row">
<select class="usercountry">
<option selected disabled>Choose Your Country</option>
</select>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="line-charts">
<div class="container">
<div class="row">
<div class="col m4 left s12">
<h2 class="title">Emissions Per Capita</h2>
<p>
This graph shows you the emissions per capita in your country, compared to the world.
You want to know how your country compares to others? Select a country to compare with.
</p>
<div class="control-row">
<select class="countrydata1">
<option selected disabled>Compare with another country</option>
</select>
</div>
<p>Source: <a href="https://data.worldbank.org/indicator/en.atm.co2e.pc" target="_blank">Worldbank</a></p>
</div>
<div class="col m8 s12">
<div id="emissions-per-capita"></div>
</div>
</div>
<div class="row">
<div class="col m4 s12 right">
<h2 class="title">Total Emissions</h2>
<p>
Here you can see the total emissions in kt.
You can also compare your country with other countries and the world.
Rule of thumb: the smaller the population, the smaller the emissions.
</p>
<div class="control-row">
<select class="countrydata2">
<option selected disabled>Compare with another country</option>
</select>
</div>
<p>Source: <a href="https://data.worldbank.org/indicator/EN.ATM.CO2E.KT" target="_blank">Worldbank</a></p>
</div>
<div class="col m8 s12">
<div id="emissions-total"></div>
</div>
</div>
<div class="row">
<div class="col m6 left s12">
<h2 class="title">Emissions in Million Tons per Year</h2>
<p>
Okay, now we know about the emissions, but where do the emissions come from?
This chart shows how emissions (in million tons per year) were distributed across the different industries in 2010.
With a click on the industries you can see which country amounts to how much to this sector.
</p>
<p>
Do note that for Agriculture, Land use and Forestry some countries produce negative emissions which is not renderable in a graph like this. Any values smaller than 200 million are stripped away here, for other countries we have stripped values smaller than 50 million for better browser performance.
</p>
<p>Source: <a href="https://ourworldindata.org/grapher/global-carbon-dioxide-emissions-by-sector" target="_blank">Our World in Data</a></p>
</div>
<div class="col m6 s12">
<div id="emissions-sector-sunburst"></div>
</div>
</div>
<div class="row center">
<h2 class="title">What the future holds for us</h2>
<p>Let's take a look into the future. How will emissions change, based on the climate policies of the coming years? </p>
<p>Decide for yourself what kind of climate policy you think is appropriate and observe how the temperature will have changed in 2100.</p>
<p>
This graph shows you potential future emissions pathways of global carbon dioxide emissions in the case of no climate policies, current implemented policies, national pledges within the Paris Agreement, and 2°C and 1.5°C consistent pathways.
To visualize the range for a given scenario you can see high, median and low pathways.
</p>
<div id="prediction"></div>
<div class="prediction-text-container">
Temperature rise in scenario
<span class="chip prediction-scenario"></span>
<div class="prediction-temperature"></div>
</div>
<p>Source: <a href="https://ourworldindata.org/grapher/future-greenhouse-gas-emission-scenarios?time=1990..2100" target="_blank">Our World in Data</a></p>
<p>
<a href="https://climateactiontracker.org/countries/" target="_blank">
Find out more about climate policies in your country.
</a>
</p>
</div>
</div>
</div>
</section>
<section class="preflight">
<div class="container center">
<div class="cta-wrapper">
<h4>Thinking About What You Can Do?</h4>
<p>There are a lot of small changes you can do in your lifestyle that can improve your lifes quality while saving resources and cash.</p>
<a href="data/sustainability_ideas.pdf" class="cta ripple" target="_blank">
Download the Ideas
</a>
</div>
</div>
</section>
<section>
<div class="container center">
<div class="cta-wrapper">
<h4>Our Misson</h4>
<p>We want to provide simple, beautiful and easy to understand data about climate change.</p>
<p>Please help us understand climate change better.</p>
<p>If you are a coder, you can contribute data sources and graphs at GitHub.</p>
<a href="https://github.com/viper-development/climategraph" class="cta ripple" target="_blank">
Star us on GitHub
</a>
</div>
</div>
</section>
<footer class="footer">
<div class="footer__links">
<div class="container">
<div class="logo">
<img src="https://viperdev.io/images/logo-invers.svg" alt="">
</div>
<div class="col">
<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Companies</font></font></h3>
<ul>
<li><a href="https://viperdev.io/about" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">About us</font></font></a></li>
</ul>
</div>
<div class="col">
<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Keep in touch</font></font></h3>
<ul>
<li><a href="https://twitter.com/viperdev_io" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Twitter</font></font></a></li>
<li><a href="https://www.linkedin.com/company/viperdev/" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">LinkedIn</font></font></a></li>
<li><a href="mailto:[email protected]" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">E-mail</font></font></a></li>
</ul>
</div>
<div class="col">
<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Legal</font></font></h3>
<ul>
<li><a href="https://viperdev.io/imprint" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Imprint</font></font></a></li>
<li><a href="https://viperdev.io/disclaimer" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Disclaimer</font></font></a></li>
<li><a href="https://viperdev.io/privacy" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">data protection</font></font></a></li>
<li><a href="https://viperdev.io/terms" target="_blank"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Terms of Service</font></font></a></li>
</ul>
</div>
<div class="copyright">
<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
© 2019 - Viper Development UG (limited liability) | </font><font style="vertical-align: inherit;">All rights reserved
</font></font></p>
</div>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>