-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
432 lines (402 loc) · 21.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
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
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Page Title -->
<link rel="icon" href="./favicon.ico" type="image/x-icon">
<title>U.S. Wildfires 2020</title>
<!-- Used for Beautify map icons -->
<script src="https://kit.fontawesome.com/6546e7b150.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./assets/dist/leaflet-beautify-marker-icon.css">
<!-- Spectre.CSS -->
<link rel="stylesheet" href="./assets/dist/spectre.min.css">
<link rel="stylesheet" href="./assets/dist/spectre-exp.min.css">
<link rel="stylesheet" href="./assets/dist/spectre-icons.min.css">
<!-- Leaflet and myStylesheet -->
<link rel="stylesheet" href="./assets/dist/leaflet.zoomhome.css" />
<link rel="stylesheet" href="./assets/style.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
</head>
<body>
<!-- Navigation bar -->
<header class="navbar text-bold text-large font-serif px-2 py-0">
<section class="navbar-section">
<a href="docs/project-proposal.pdf" class="btn btn-link text-dark">Project Proposal</a>
<a href="about.html" class="btn btn-link text-dark">About</a>
<a href="https://youtu.be/J4yhI7hhRPM" class="btn btn-link text-dark">Video Walkthrough</a>
</section>
<section class="navbar-center">
<!-- centered logo or brand -->
<a id="title" href="#" class="text-dark text-large">U.S. Wildfires Visualization</a>
</section>
<section class="navbar-section">
<a href="docs/process-book.pdf" class="btn btn-link text-dark">Process Book</a>
<a href="https://github.com/reepoi/data-vis-2020-fires/tree/main" class="btn btn-link text-dark">GitHub</a>
</section>
</header>
<div class="divider"></div>
<!-- Page Content -->
<div class="container">
<!-- Visualization Name/options -->
<div class="columns font-serif">
<div class="column col-3"></div>
<div class="column col-6">
<ul id="menu" class="tab tab-block">
<li class="">
<button id="menu-back" onclick="tabBackClicked()" class="btn disabled btn-link btn-lg icon icon-back"></button>
</li>
<li class="tab-item">
<a href="#fire-map" class="active">2020 U.S. Fire Map</a>
</li>
<li class="tab-item">
<a href="#compare-years" class="">California Wildfire History</a>
</li>
<li class="tab-item">
<a href="#national">National Wildfire History</a>
</li>
<li class="">
<button id="menu-forward" onclick="tabForwardClicked()" class="btn btn-link btn-lg icon icon-forward"></button>
</li>
</ul>
</div>
<div class="column col-3"></div>
</div>
<!-- Visualization content -->
<!-- USE spectre.css class: `d-none` to hide container -->
<div id="fire-map-div" class="hashPage d-none">
<!-- Brief Data column -->
<br>
<div id="us2020-fire-text" class="col-6 col-mx-auto text-justify font-serif">
<h4 class="text-bold mb-0">
The 2020 wildfire season was another record breaker in the US
</h4>
<p class="text-semilarge">
As of October 27th, the estimated area burned is 8.28 million acres which is 127% of the 10-year average of 6.54 million acres <em>(<a href="https://www.nifc.gov/fireInfo/nfn.htm">NIFC</a>)</em>. California was particularly hard hit,
accounting for about half of the area burned and shattering records, including the August Complex fire which is pushing a million acres alone. The visual below shows major fires across the United States, their causes, the area burned,
suppression cost, and structures destroyed. Though in many ways the fires in 2020 have toppled records in terms of acres burned, this is part of a bigger trend where acres burned is on an upward trajectory. As the climate warms and
dries, wildfires are likely to continue increasing in size <em>(<a href="https://www.pnas.org/content/113/42/11770.short">Abatzoglou & Williams 2016</a>)</em>.
</p>
</div>
<div id="intro-div" class="columns col-mx-auto text-center col-6 font-serif">
<div class="column col-1 col-mx-auto text-center text-dark">
<h4 class="text-bold mb-0">8.28</h4>
<p class="text-italic mb-0">
millions acres <br> burned
</p>
</div>
<div class="column col-1 col-mx-auto text-center text-dark">
<h4 class="text-bold mb-0">$2.65</h4>
<p class="text-italic mb-0">
billion in <br> suppresion costs
</p>
</div>
<div class="column col-1 col-mx-auto text-center text-dark">
<h4 class="text-bold mb-0">16,116</h4>
<p class="text-italic mb-0">
structures <br> burned
</p>
</div>
<div class="column col-1 col-mx-auto text-center text-dark">
<h4 class="text-bold mb-0">46</h4>
<p class="text-italic mb-0">
fatalities
</p>
</div>
</div>
<br>
<!-- FIRE MAP MAIN VISUALIZATIONS -->
<div class="columns">
<div id="vis-1" class="column col-5 col-mr-auto col-sm-10">
<div class="panel">
<div class="panel-header text-center py-0">
<button id="storybox-btn-activate" class="btn btn-primary s-circle float-right disabled tooltip" data-tooltip="See Guidelines">
<i class="gg-info"></i>
</button>
<div class="panel-title h3 font-serif">Total Area Burned </div>
<div class="panel-subtitle h5 text-bold font-serif">Size by Acres</div>
<!-- Pagination on bar chart -->
<div class="columns">
<div class="column col-6 col-mx-auto">
<ul class="pagination">
<li class="page-item page-prev text-left">
<a id="vis-1-prev" class="btn btn-link text-left disabled">
<div class="">Previous</div>
<div class="page-item-title h5 d-none">Area</div>
</a>
</li>
<li class="page-item page-next">
<a id="vis-1-next" class="btn btn-link text-right">
<div class="">Next</div>
<div class="page-item-title h5">Structures</div>
</a>
</li>
</ul>
</div>
</div>
<!-- Error toast when no fire data -->
<div class="divider"></div>
<div id="vis-1-toast" class="toast d-none">
<button class="btn btn-clear float-right"></button>
<p id="vis-1-toast-msg"></p>
</div>
</div>
<div class="panel-body">
<!-- Filter Dropdown: -->
<div class="columns form-group col-gapless">
<div class="column col-auto col-xs-10">
<span id="cause-counter" class="text-bold d-inline">341</span>
<label for="cause-dropdown" class="form-label label-sm d-inline"> Major Wildfires Caused by </label>
</div>
<div class="column col-5 col-xs-10 mx-2">
<select id="cause-dropdown" name="cause" class="form-select select-sm">
<option value="all">All</option>
<option value="H">Human</option>
<option value="L">Lightning</option>
<option value="U">Undetermined</option>
</select>
</div>
</div>
<!-- Visualization 1 -->
<div id="vis-1-div">
<svg id="vis-1-svg"></svg>
</div>
</div>
</div>
</div>
<div id="vis-2" class="column col-7 col-sm-11">
<!-- Visualization 2 -->
<svg id="vis-2-svg"></svg>
</div>
<!-- Deleted Vis-3 -->
<div id="vis-3" class="d-none"></div>
</div>
<!-- Guideline box content -->
<div id="story-container" class="">
<div id="storybox" class="columns d-none">
<div id="story-card" class="column col-3 card text-dark m-0 p-0">
<div id="story-header" class="card-header">
<button id="story-btn-exit" class="btn btn-clear float-right"></button>
</div>
<div id="story-body" class="card-body h5 font-serif">
<p id="story-text"></p>
</div>
<div class="card-footer font-serif">
<ul class="step">
<li class="step-item active">
<a role="button" class="tooltip" data-tooltip="Step-1">1</a>
</li>
<li class="step-item">
<a role="button" class="tooltip" data-tooltip="Step-2">2</a>
</li>
<li class="step-item">
<a role="button" class="tooltip" data-tooltip="Step-3">3</a>
</li>
<li class="step-item">
<a role="button" class="tooltip" data-tooltip="Step-4">4</a>
</li>
</ul>
<button id="storybox-btn-prev" class="btn btn-sm btn-primary s-circle float-left disabled"><i class="icon icon-arrow-left"></i></button>
<button id="storybox-btn-next" class="btn btn-sm btn-primary s-circle float-right"><i class="icon icon-arrow-right"></i></button>
</div>
</div>
</div>
<div id="story-svg-container" class="d-none">
<svg id="storybox-svg"></svg>
</div>
</div>
</div>
<!-- Compare years Visualization-->
<!-- ids: #vis-4 #vis-5 #vis-6 #vis-7 -->
<div id="compare-years-div" class="hashPage d-none">
<!-- Brief Data column compare Years -->
<div id="compareyears-intro-div" class="columns font-serif">
<div class="column col-6 col-mx-auto text-dark">
<br>
<h4 class="text-bold mb-0">Comparing the past two climate periods in California</h4>
<p class="text-justify text-semilarge">
To get a sense of how wildfire seasons are changing with time, the two most recent climatological periods are compared below. A climate period is typically defined as a 30 year period to measure average weather. It is important to consider long-term trends
because certain events, like the El Niño-Southern Oscillation, can cause major shifts in weather patterns in 3-7 year periods, and therefore influence the number of wildfires each year. California was chosen as a study area due
to their long history with wildfires and the available data. Cal Fire, California's fire agency, keeps comprehensive wildfire records dating as far back as 1878. The visualization shows fires aggregated into two periods, 1960-1989
and 1990-2019. For the State of California, the period of 1990-2019 has had <strong>2.18x more area impacted by wildfires</strong> compared to 1960-1989. Most counties have seen a significant increase in
area impacted in the recent climate period. Of the top 20 wildfires in California history, only 1 occurred pre-1960, 2 occurred between 1960-1989, and 11 occurred between 1990-2019. The other 6 have occurred in 2020 alone.
</p>
</div>
<div id="vis-7" class="column col-5 col-mr-auto col-sm-12">
<svg id="vis-7-svg"></svg>
</div>
</div>
<!-- COMPARE YEARS MAIN VISUALIZATIONS -->
<div class="columns">
<div id="vis-4" class="column col-5 col-mr-auto col-sm-12">
<div class="panel">
<div class="panel-header text-center py-0">
<div class="panel-title h3 font-serif">Ratio of Area Impacted Per Period:</div>
<div class="panel-subtitle h5 text-bold font-serif">1960-1989 vs. 1990-2019</div>
<div class="divider"></div>
</div>
<div class="panel-body">
<div id="vis-4-div">
<svg id="vis-4-svg"></svg>
</div>
</div>
</div>
</div>
<div id="vis-5" class="column col-7 col-sm-12">
<!-- Visualization 5 -->
</div>
<div id="vis-6" class="d-none"></div>
</div>
</div>
</div>
<!-- NATIONAL WILDFIRE HISTORY Tab -->
<div id="national-div" class="hashPage d-none">
<div class="columns">
<div id="national-text" class="col-6 col-mx-auto text-justify font-serif">
<br>
<h4 class="text-bold mb-0">
The trend of larger wildfires extends beyond California, nationally
</h4>
<p class="text-semilarge">
The National Interagency Fire Center (NIFC) keeps records of the acres burned on US wildlands. Since 1983, which is the year the NIFC began confirming these records, the number of fires has not increased, but the area burned has increased year-over-year.
As with California's wildfires, there is a national trend of larger fires. On average throughout the period of 1983 to 2020, the area burned increases by about 175,000 acres each year while there is no trend in the number of fires.
It is clear that wildfires are becoming a larger problem with time in the United States.
</p>
</div>
</div>
<!-- Scatterplot visualization for national -->
<div class="columns">
<div id="vis-8" class="column col-11 col-mx-auto">
<svg id="vis-8-svg"></svg>
</div>
</div>
</div>
<!-- TOOLTIP -->
<div id="tooltip" class="d-none">
<div class="card text-dark">
<div class="card-header">
<div class="columns">
<div class="column col-auto card-title h5"></div>
<div class="column rank col-auto col-ml-auto label label-secondary rank text-tiny text-muted">
_a_ in _StatName_
</div>
</div>
<div class="card-subtitle text-gray"></div>
</div>
<div class="card-body">
<!-- sizeacre -->
<div>
Size in Acres: <span class="h5"></span>
</div>
<!-- structures destroyed -->
<div>
Structures Destroyed: <span class="h5"></span>
</div>
<!-- suppresion cost-->
<div>
Suppresion Cost: <span class="h5"></span>
</div>
</div>
<div class="card-footer">
<div class="text-small text-muted">
Start Date: <span id="tooltip-startdate" class="text-bold"></span>
</div>
</div>
</div>
</div>
<!-- TOOLTIPCMPYEAR -->
<div id="tooltipcmpyear" class="d-none">
<div class="card text-dark">
<div class="card-header">
<div class="columns">
<div class="column col-auto card-title h5"></div>
</div>
</div>
<div class="card-body">
<!-- sizeacre -->
<div>
Total Acres Impacted: <span class="h5"></span>
</div>
<!-- structures destroyed -->
<div>
<span class="h5"></span> acres impacted compared to other period.
</div>
</div>
<div class="card-footer">
<div class="text-small text-muted">
Period: <span id="tooltipcmpyear-period" class="text-bold"></span>
</div>
</div>
</div>
</div>
<!-- TOOLTIPCMPYEAR fire bubbles -->
<div id="tooltipcmpyearfire" class="d-none">
<div class="card text-dark">
<div class="card-header">
<div class="columns">
<div class="column col-auto card-title h5"></div>
</div>
</div>
<div class="card-body">
<!-- CA fire rank -->
<div>
Rank: <span class="h5"></span>
</div>
<!-- sizeacre -->
<div>
Total Acres Burned: <span class="h5"></span>
</div>
</div>
<div class="card-footer">
<div class="text-small text-muted">
Year: <span id="tooltipcmpyearfire-period" class="text-bold"></span>
</div>
</div>
</div>
</div>
<!-- Tooltip for national tab -->
<div id="national-tooltip" class="d-none">
<div class="card text-dark text-small">
<div class="card-body">
<!-- NumFires -->
<div>
Est. <span class="h5 text-error"></span> Wildfires
</div>
<!-- Total Areas-->
<div>
Est. <span class="h5 text-primary"></span> Total Acres Burned nation-wide
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="divider"></div>
<div class="columns bg-gray m-2 p-2">
<div class="column col-6 col-mx-auto text-centered text-small">
<p class="text-center my-0">
A Wildfire visualization project for <a href="http://dataviscourse.net/2020/index.html">CS6630-Fall 2020</a>
</p>
<p class="text-center my-0">
Designed and built by Huy Tran, Taos Transue, Troy Saltiel
</p>
</div>
</div>
<!-- JS files at bottom of page: -->
<script src="https://d3js.org/d3.v6.min.js"></script>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="js/leaflet-beautify-marker-icon.js"></script>
<script src="js/leaflet.zoomhome.js"></script>
<script src="js/constants.js"></script>
<script src="js/mapView.js"></script>
<script src="js/mapViewCompareYears.js"></script>
<script src="js/fireInfo.js"></script>
<script src="js/fireMapStory.js"></script>
<script src="js/top20fires.js"></script>
<script src="js/compareYears.js"></script>
<script src="js/nationalHistory.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>