-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
231 lines (211 loc) · 10.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Climate Change</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta name="description" content="Climate Change Visualization" />
<link rel="stylesheet" href="static/style.css">
<link rel="stylesheet" href="static/scroll.css">
</head>
<body>
<div class="canvas">
<div id="canvas"></div>
</div>
<div id="overall-progress-bar"></div>
</div>
<div id="opening-panel" class="opening-panel" style="z-index: 2; background-color: black;">
<div class="center">
<h1>Climate Change</h1>
<p>As seasons continue to change, every season is becoming hotter due to the ongoing issues of climate change.</p>
<p>Presented by Christopher Lee, Amanda Nitta, and Justin Yip</p>
<br></br>
<div>
<p style="font-size: 15px;">Scroll Down</p>
<div class='icon-scroll' style="top: 135%"></div>
</div>
</div>
</div>
<div class="panel-container">
<div id="panel1" class="panel">
<div style="position: absolute;" id="globeViz"></div>
<div class="info-panel-container" id="info-panel1">
<div id="legendContainer" class="legend-container"></div>
<div class="text-container" id="globe-prompt" style="position: absolute; bottom: 0px; background-color: #161B22; color: #E6EDF3;">
<div class="center-top">
<h2>Global Temperature Rise</h2>
</div>
<p>Over time earths temperatures are increasing. GreenHouse gas emissions are affecting the earth’s atmosphere removing earth's layer of protection from the sun with China, The United States, and India being the top polluters. From 1850 to 2013 the average global temperature has risen by 17 percent overall, causing temperatures in the U.S to rise from 8 ℃ to 11℃. Observe how the regions are increasingly becoming hotter. Hover over the countries to see temperatures. The slider shows global changes over the years.</p>
<br/>
<div class="range" style="--step:10; --min:1850; --max:2013;">
<input id="year-slider" class="slider" type="range" min="1850" max="2013" step="1" value="1840" oninput="onYearSliderChange()">
<span id="selected-year">1840</span>
<div class='range-slider__progress'></div>
</div>
<p style="text-align: center;">Adjust the Year</p>
</div>
<!-- text-shadow: #00303d 1px 0 10px;" -->
<div style="position: absolute; left: 50px; top: 50px;">
<h3>Year</h3>
<h1 id="year"></h1>
</div>
<div class="scroll-down">
<p>Scroll down to continue to the next slide.</p>
</div>
<div style="position: absolute; right: 50px; margin:auto; top: 50px; text-align: right;">
<h3>Global Average Temperature</h3>
<h1 id="temperature"></h1>
</div>
<!-- <div style="position: absolute; bottom: 50px; left: 50px; width: calc(100% - 100px);">
</div> -->
</div>
</div>
<div id="panel2" class="panel">
<div class="text-container" id="change-prompt" style="position: absolute; top: 0px;">
<div class="scroll-down">
<p>Scroll down to continue to the next slide.</p>
</div>
<div class="center-top">
<h2>What Does Climate Change Affect</h2>
</div>
<p>Many people associate climate change with rising temperatures and increasing sea level rise, however there are many consequences to climate change affecting, the to cultivate food, safety, work and housing.</p>
<p></p>
<p>These things include increased sun waves, causing bleached coral, damaging our precious ocean ecosystems. Warmer waters have led to severe storms, leading to deaths and economic losses. </p>
<br>
<span style="display: inline;">
<p style="display: inline;">Additional Resources can be found at</p>
<a href="https://www.un.org/en/climatechange/science/causes-effects-climate-change" style="display: inline;">United Nations</a>
</span>
<br>
<br>
<div class = 'center-top'>
<img src="static/img/climate.jpg" width="720" height="400">
<p>Image Credit: National Oceanic and Atmosphere Administration</p>
</div>
<br/>
<div class="info-panel-container" id="info-panel2">
<!-- Content for info-panel3 goes here -->
</div>
</div>
</div>
<div id="panel3" class="panel">
<div class="info-panel-container" id="info-panel3">
<div style="position: absolute; left: 50px; bottom: 50px;">
<h3>Year</h3>
<h1 id="sea-year"></h1>
</div>
<div style="position: absolute; right: 50px; margin:auto; bottom: 50px; text-align: right;">
<h3>Adjusted Sea Level</h3>
<h1 id="sea-rise"></h1>
</div>
<div style="position: absolute; left: 0px; margin:auto; bottom: 150px; text-align: right;">
<div class="text-container" style="display: flex; flex-flow: row;">
<!-- <h3>Sea </h3> -->
<img src="static/img/penny.png" alt="USD Penny" style="height: 100px; width: 100px;"></img>
<div style="padding: 0 10px;">
<div class="vertical-slider">
<div class="vertical-bar" id="sea-coin-bar">
</div>
</div>
</div>
<div style="height: 100px;">
<div style="position: relative;">
<p> 19mm</p>
</div>
<div style="position: absolute; bottom: 75px;">
<p> 0mm</p>
</div>
</div>
</div>
</div>
</div>
<div class="text-container" id="sea-prompt" style="position: absolute; top: 0px;">
<div class="scroll-down">
<p>Scroll down to continue to the next slide.</p>
</div>
<div class="center-top">
<h2>Sea Level Rise</h2>
</div>
<p>Due to the increasing temperatures, colder areas have become warmer leading to sea level rise. The effects of sea level rise are primarily felt by the island nations and states, leading to rising tides and increased flooding.</p>
<br/>
<div class="info-panel-container" id="info-panel3-slider">
<br/>
<div class="range" style="--step:10; --min:1880; --max:2013;">
<div class="slider-container">
<input id="sea-slider" class="slider" type="range" min="1880" max="2013" step="1" value="1880" oninput="onSeaSliderChange()">
<span id="selected-sea-year">1880</span>
</div>
</div>
<p style="text-align: center;">Adjust the Year</p>
</div>
</div>
</div>
<!--<div class="panel reflection" style="background-color: beige;">
Test test
</div>-->
<!-- </div> -->
<div id="panel4" class="panel" style="">
<div class="text-container" id="resolution-prompt" style="display: flex; flex-flow: column; position: absolute; top: 0px; height: calc(100% - 100px);">
<!-- <div class="text-container" id="sea-prompt" style="position: absolute; top: 0px; height: calc(100% - 100px);"> -->
<div class="scroll-down">
<p>Scroll down to continue to the next slide.</p>
</div>
<div class="center-top">
<h2>Resolution</h2>
</div>
<p>Despite the rising temperatures, and sea level rise, there are efforts to mitigate these ongoing issues. These efforts include reducing carbon dioxide emissions and converting to renewable sources of energy. In 2021, the United States was readmitted to the Paris Agreement, where nations from around the world move to mitigate the effects of climate change.</p>
<p>The state of Hawaii aims to have 100% of its energy from renewable resources by 2045. As of 2022, Hawaii has 29% of all its energy from renewable sources.</p>
<br/>
<div id="ClimateStatesGraph" style="flex-grow: 1;"></div>
</div>
<div class="info-panel-container" id="info-panel4">
</div>
<!-- <div class="shadow"></div> -->
</div>
<div id="panel5" class="panel">
<div class="text-container" id="reference-prompt" style="position: absolute; top: 0px; height: calc(100% - 100px); width: calc(100% - 100px);">
<div class = "center-top">
<h2>References</h2>
</div>
<p style="word-wrap: break-word;">Clean Energy States Alliance. (2023, November 3). Table of 100% clean energy states. https://www.cesa.org/projects/100-clean-energy-collaborative/guide/table-of-100-clean-energy-states/#:~:text=2015%20legislation%20(HB623)%20made%20Hawaii,RPS%20for%20the%20electricity%20sector.&text=2021%20legislation%20(SB2408)%20established%20a,2030%20and%2050%25%20by%202040</p>
<br>
<p>Core. (n.d.). Global average absolute sea level change, 1880-2014. DataHub. https://datahub.io/core/sea-level-rise</p>
<br>
<p>Kaggle: Your Machine Learning and Data Science Community. (n.d.). Climate change: Earth surface temperature data. https://www.kaggle.com/datasets/berkeleyearth/climate-change-earth-surface-temperature-data/</p>
<br>
<p>National Oceanic and Atmospheric Administration. (n.d.). Climate change impacts. https://www.noaa.gov/education/resource-collections/climate/climate-change-impacts</p>
<br>
<p>Pink, J. (2018, 7). 5 ways that climate change affects the ocean. Conservation International. https://www.conservation.org/blog/5-ways-that-climate-change-affects-the-ocean?gclid=CjwKCAiAx_GqBhBQEiwAlDNAZlV94v8-6frhLZWoXkWolJELOqPWiFKTtkeAD9PWvdeFxRWNxjzuqxoC-m4QAvD_BwE</p>
<br>
<p>United Nations. (n.d.). Causes and effects of climate change. https://www.un.org/en/climatechange/science/causes-effects-climate-change</p>
</div>
<div class="info-panel-container" id="info-panel5">
</div>
</div>
</div>
<script type="importmap">
{
"imports": {
"three": "./static/lib/three/three.module.min.js",
"three/addons/": "./static/lib/three/addons/"
}
}
</script>
<script src="static/lib/three/three.min.js"></script>
<script src="static/lib/plotly-latest.min.js"></script>
<script src="static/lib/d3.min.js"></script>
<script src="static/lib/globe.gl.min.js"></script>
<script src="static/lib/pako.min.js"></script>
<script src="static/scene.js"></script>
<script type="module" src="static/scenewater.js"></script>
<script type="module" src="static/sceneloaders.js"></script>
<script src="static/utils.js"></script>
<!-- <script src="static/wavegraph.js"></script> -->
<!-- async -->
<script src="static/climatestatesgraph.js"></script>
<script src="static/globlegraph.js"></script>
<script src="static/sealevel.js"></script>
<script defer src="static/runtime.js"></script>
</script>
</body>
</html>