-
Notifications
You must be signed in to change notification settings - Fork 0
/
ocean_impacts.html
197 lines (184 loc) · 7.03 KB
/
ocean_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
<!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 | Ocean 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 class="wrapper style3 ocean-banner">
<div class="inner">
<header class="align-center">
<p>Ocean Impacts</p>
<h2>How have the world's waters been affected?</h2>
</header>
</div>
</section>
<!-- main body container -->
<section id="two" class="wrapper style2">
<div class="inner">
<div class="box">
<div class="content">
<header class="align-center">
<p>at the north pole</p>
<h2>Shrinkage of Northern Sea Ice</h2>
<br>
</header>
<div class="row 200%">
<div class="6u 12u$(medium)">
<h4>Sea ice at the North Pole is <b>rapidly dwindling.</b></h4>
<h5>GeoTIFFs from the National Snow & Ice Data Center (NSIDC), <i><a href="https://nsidc.org/data/g02135" target="_blank">Sea Ice
Index</a></i>,
Sept. 1980-2020</h5>
<hr>
<p>
The <i>average extent of northern sea ice</i> has changed dramatically since 1980
as seen in the corresponding figure.
This is consistent with rising global temperatures, both <a
href="global_temperature.html">atmospheric</a> and
oceanic.
This also directly contributes to rising sea levels, which in turn leads to flooding and
higher likelihood of hurricane formation.
<br><br>
GeoTIFF files of September sea ice extent every 5 years were obtained from the
<a href="https://nsidc.org/data/g02135" target="_blank">NSIDC</a>, polygonized with
<a href="https://qgis.org/en/site/" target="_blank">QGIS</a>, and further manipulated
with
<a href="https://mapshaper.org/" target="_blank">mapshaper</a> to return files in
geoJSON format.
<br><br>
Hover over the sea ice (depicted in white)
to view the numerical measure of the area. The interactive globe can also be dragged and
zoomed out.
</p>
</div>
<div class="6u 12u$(medium)">
<div id='icechartdiv' style="width: 100%; height: 600px;"></div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="two" class="wrapper style2" style="padding-top: 0px;">
<div class="inner">
<div class="box">
<div class="content">
<header class="align-center">
<p>rising tides</p>
<h2>Sea Levels & Temperatures</h2>
<br>
</header>
<div class="row 200%">
<div class="7u 12u$(medium)">
<h4>The seas are <b>warming</b>, and sea levels are <b>rising</b>.</h4>
<h5>Data from the Environmental Protection Agency (EPA),
<br>
<i><a href="https://datahub.io/core/sea-level-rise"
target="_blank">Global Average Absolute Sea Level Change</a>,
2018;
<br><a href="
https://www.epa.gov/climate-indicators/climate-change-indicators-sea-surface-temperature"
target="_blank">Climate Change Indicators: Sea Surface Temperature</a></i>,
2016</h5>
<hr>
<div id='seatemps' style="width: 100%; height: 500px;"></div>
</div>
<div class="5u 12u$(medium)">
<p>
As global temperatures steadily rise and the average extent of northern sea ice
depletes, <i>sea level</i> continues to increase each year.
To model this increase, a <i>linear regression model</i> was used with inputs
including historical global temperature, sea temperature, and
CO<sub>2</sub> emissions.
</p>
<p>
A comparison was done between the <i>machine learning linear regression model</i> and
the
<i> basic linear regression</i> performed on only the historical sea level data. As
can be seen, these two methodologies output very similar forecasts, with the machine
learning model projecting slightly lower sea levels by the year 2200.
</p>
<p>
In addition to sea level analysis, a linear regression model was also employed to
predict <i>sea temperature change (anomaly)</i> using sea level, global temperature,
and glacier mass.
</p>
<p>
In both sea temperature and sea level models, <b>a steady increase is predicted</b>.
<br><br>
Hover over the model to view values, and toggle visible projections in the legend.
</p>
</div>
</div>
<div class='row 200%'>
<div class='2u'></div>
<div class='8u'><br><br><br>
</div>
<div class='2u'></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 src="assets/js/custom/sea_ice.js"></script>
<script src="assets/js/custom/sea_levels_temp.js"></script>
</body>
</html>