-
Notifications
You must be signed in to change notification settings - Fork 0
/
weather_impacts.html
303 lines (283 loc) · 11.1 KB
/
weather_impacts.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
<!DOCTYPE HTML>
<!--
Hielo by TEMPLATED
templated.co @templatedco
Released for free under the Creative Commons Attribution 3.0 license (templated.co/license)
-->
<html>
<head>
<title>Climateers | Weather Impacts</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/png" href="images/favicons/favicon2_green.png">
<link rel="stylesheet" href="assets/css/main.css" />
</head>
<body class="subpage">
<!-- Header -->
<header id="header">
<div class="logo"><b><a href="index.html">C L I M A T E E R S </a></b> by the Hindsight Team</div>
<a href="#menu">Menu</a>
</header>
<!-- Nav -->
<nav id="menu">
<ul class="links">
<li><a href="index.html">Home</a></li>
<li><a href="temperature_emissions.html">Temperatures & Emissions</a></li>
<li><a href="ocean_impacts.html">Ocean Impacts</a></li>
<li><a href="weather_impacts.html">Weather Impacts</a></li>
<li><a href="public_sentiment.html">Public Sentiment</a></li>
<li><a href="awareness.html">Awareness</a></li>
<li><a href="http://apizzo1-hindsight-2020.herokuapp.com/" target="_blank"><i>Visit our first
project</i></a></li>
</ul>
</nav>
<!-- title header -->
<section id="One" class="wrapper style3 weather-banner">
<div class="inner">
<header class="align-center">
<p>Weather Impacts</p>
<h2>How has our weather changed?</h2>
</header>
</div>
</section>
<!-- main body container -->
<!-- Precipitation -->
<section id="two" class="wrapper style2">
<div class="inner">
<div class="box">
<div class="content">
<header class="align-center">
<p>Precipitation Patterns</p>
<h2>Has the amount of precipitation changed over time?</h2>
<br>
</header>
<div class="row 200%">
<div class="5u 12u$(medium)">
<h4><b>Snow fall</b> may decrease sharply, while
<b>general precipitation</b> may stay level.</h4>
<h5>Data from the National Oceanic & Atmospheric Association (NOAA),
<a href="https://www.ncdc.noaa.gov/cdo-web/datasets" target="_blank">Global Summary of
the Year</a></h5>
<hr>
<p>With global temperatures continuing to rise, the behavior of the Earth's weather is
drastically affected as a result. Although precipitation in general does not have
drastic changes,
the decrease in snow is quite significant in comparison.
</p>
<p style="margin-bottom: 10px;">This chart displays changes in snow and other precipitation
side-by-side. The projection model here uses the past <i>100 years* </i> to predict:</p>
<ul>
<li><b>Projection</b> - the continued climb in temperature on our current trajectory;
</li>
<li><b>Easing rules</b> - temperatures if an addtional 0.05% CO<sub>2</sub> were allowed
each year;</li>
<li><b>Stricter rules</b> - temperatures if CO<sub>2</sub> emissions were decreased
0.05% each year.</li>
</ul>
<p>Hover over the model to view specific values.
<br>Click on values in the legend to add and remove series.</p>
<p><i>* 100 years of past data were used because values vary so drastically from year to
year.
More data was utilized to gather the overall trend.
<br><br>
</i></p>
</div>
<div class="7u 12u$(medium)">
<div id='precipitation_chart' style="width: 100%; height: 750px;"></div>
</div>
</div>
<div class="row 200%">
<div class='7u 12u$(medium)'>
<div id='snow_chart' style="width: 100%; height: 600px;"></div>
</div>
<div class="5u 12u$(medium)">
<br>
<h4>A <b>closer look</b> at snow fall data.</h4>
<hr>
<p>This chart shows a more detailed visual of the observed snow fall data over the past
<i>130 years</i>.
<br><br>
Although the most drastic decrease in snow happened during the Industrial
Revolution, the overall continued decline of snow fall throughout the 21st century
shows the effects of global temperature increases.
The increased non-frozen water in our ecosystem also has further
implications.
<br><br>
More information about the effect of climate change on our oceans
can be viewed on our <a href="ocean_impacts.html">
<i>Ocean Impacts</i></a> page.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Snow -->
<!-- <div class="inner">
<div class="box">
<div class="content">
<header class="align-center">
<p>Snow</p>
<h2>Has the amount of snow changed over time?</h2>
<br>
</header>
<div class="row 200%">
<div class='7u 12u$(medium)'>
<div id='snow_chart' style="width: 100%; height: 700px;"></div>
</div>
<div class="5u 12u$(medium)">
<br>
<h4>A <b>closer look</b> at snow fall data</h4>
<hr>
<p>This chart shows a more detailed visual of the observed snow fall data over 130 years of the
past. Although the most drastic decrease in snow happened during the Industrial Revolution,
the overall continued decline throughout the 21st century shows the effects of the global
temperature increases. The increased non-frozen water in our ecosystem also has further impacts.
<br><br>
More detailed information about those impacts can be viewed on our <a href="ocean_impacts.html">
<i>Ocean Impacts</i> page</a>
</p>
</div>
</div>
</div>
</div>
</div> -->
<section class="wrapper style3 weather-banner">
<div class="inner">
<header class="align-center">
<p>Severe Weather</p>
<h2>What about severe weather changes?</h2>
</header>
</div>
</section>
<!-- Hurricanes -->
<section class="wrapper style2">
<div class="inner">
<div class="box">
<div class="content">
<header class="align-center">
<p>Tracking Hurricanes</p>
<h2>How will hurricanes evolve?</h2>
<br>
</header>
<div class="row 200%">
<div class="5u 12u$(medium)">
<h4>Hurricane <b>frequency</b> and <b>intensity</b> are forecasted to increase.</h4>
<h5>Statistics from the National Hurricane Center (NHC), <i><a
href="https://www.kaggle.com/noaa/hurricane-database?select=atlantic.csv"
target="_blank">Hurricanes and Typhoons</a></i>,
2016</h5>
<hr>
<p>The data used to analyze hurricane frequency and intensity ranged back to the 1850s,
and therefore did not include the customary
Saffir-Simpson Hurricane Wind Scale categorization scheme (Category 1, 2, etc.).
Therefore,
a <i>K-means clustering model</i> was used to classify the hurricanes based on their
minimum pressure and maximum wind speed. The model was
optimized to group the hurricanes into 4 categories.
</p>
<p>Next, linear regression models were used to predict the total number of hurricanes
up until 2200, as well as the number of hurricanes
in each category. The models used inputs such as historical sea temperature,
sea level, and global temperature to create these forecasts.
<br><br>
As can be
seen by this chart, the frequency as well as intensity of hurricanes is projected to
increase over time based on current historical data.
</p>
</div>
<div class="7u 12u$(medium)">
<div id='hurricane_chart' style="width: 100%; height: 700px;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="wrapper style2" style="padding-top: 0px;">
<!-- Tornado -->
<div class="inner">
<div class="box">
<div class="content">
<header class="align-center">
<p>Tracking Tornadoes</p>
<h2>How will tornadoes evolve?</h2>
<br>
</header>
<div class="row 200%">
<div class='7u 12u$(medium)'>
<h4>Tornado <b>frequency</b> and <b>intensity</b> are also forecasted to increase.</h4>
<h5>Statistics from NOAA, <i><a
href="https://oasishub.co/dataset/usa-tornado-historical-tracks-noaa"
target="_blank">USA - Historical Tornado Tracks</a></i>,
2020</h5>
<hr>
<div id='tornado_chart' style="width: 100%; height: 600px;"></div>
</div>
<div class="5u 12u$(medium)">
<p style="margin-bottom: 10px;">
Linear regression models were used to project:
<ul>
<li>the number of tornadoes we could potentially see up to 2200,</li>
<li>number of magnitude 0 (F0 on the Fujita scale) tornadoes, and</li>
<li>magnitude 2 (F2 on the Fujita scale) tornadoes.</li>
</ul>
These 2 magnitudes were chosen for display
as they demonstrated relatively reliable linear regression accuracies of above 70%,
likely because there is a slight increase
in these tornadoes in the available historical data.
<br><br>
The models used inputs such as historical changes in CO<sub>2</sub> emissions,
gas fuel emissions, and global temperature to make these forecasts.
</p>
<p>
It is worth mentioning that the model shows a greater number of predicted magnitude 0
tornadoes than predicted total tornadoes. As these
were created from separate linear regression models, the intent is to display the future
trends that could be seen, rather than predict the exact
frequency that can be expected.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<div class="container">
<h4><b>Check out our project repository on GitHub:</b></h4>
<ul class="icons">
<a href="https://github.com/rmoesw01/Climateers" target="_blank"><img
src="images/GitHub-Mark-Light-32px.png" alt="Github link" /></a>
</ul>
</div>
<div class="copyright">
© 2020 The Climateers Project, <br>template created by
<a href="https://templated.co/" target="_blank">Templated</a>.
</div>
</footer>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
<!-- amcharts libs -->
<script src="//cdn.amcharts.com/lib/4/core.js"></script>
<script src="//www.amcharts.com/lib/4/charts.js"></script>
<script src="//cdn.amcharts.com/lib/4/maps.js"></script>
<script src="//cdn.amcharts.com/lib/4/geodata/worldLow.js"></script>
<script src="//cdn.amcharts.com/lib/4/geodata/continentsLow.js"></script>
<script src="https://cdn.amcharts.com/lib/4/themes/animated.js"></script>
<script src="//www.amcharts.com/lib/4/themes/amchartsdark.js"></script>
<!-- d3 -->
<script src="https://d3js.org/d3.v6.min.js"></script>
<!-- custom scripts -->
<script type="text/javascript" src="assets/js/custom/hurricanes.js"></script>
<script type="text/javascript" src="assets/js/custom/tornadoes.js"></script>
<script type="text/javascript" src="assets/js/custom/precipPyramid.js"></script>
<script type="text/javascript" src="assets/js/custom/snowfall.js"></script>
</body>
</html>