-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
103 lines (84 loc) · 3.84 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Earthquakers</title>
<!-- add leaflet map css component -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<!-- maplibre -->
<link href="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.css" rel="stylesheet" />
<link rel="stylesheet" href="ui/css/general.css">
</head>
<body>
<header>
<span>Earthquaker 2024</span>
<h1>Monthly Updates on Global Seismic Activity</h1>
<img
class="logo"
src="eq_logo.svg"
alt="triangle with all three sides equal"
height="55"
width="55" />
</header>
<main>
<div id="map"></div>
<div id="control-panel">
<div class="options">
<label>Radius</label>
<label class="slider">
<input class="widget" id="radius" type="range" min="3000" max="80000" step="1000" value="30000"></input>
</label>
<span id="radius-value"></span>
</div>
<div class="options">
<label>Coverage</label>
<label class="slider">
<input class="widget" id="coverage" type="range" min="0" max="1" step="0.1" value="0.9" ></input>
</label>
<span id="coverage-value"></span>
</div>
<div class="options">
<label>Elevation Scale</label>
<label class="slider">
<input class="widget" id="elevationScale" type="range" min="50" max="200" step="1" value="100"></input>
</label>
<span id="elevationScale-value"></span>
</div>
</div>
<div class="chart-series">
<div class="topEQ chart"></div>
<div class="EQbyContinent chart"></div>
<div class="EQbyMag chart"></div>
<div class="text">
<p class="description">
This dashboard displays historical seismic activity and provides comprehensive insights into earthquakes occurrences worldwide. The hexagons on the map are colored by the largest earthquake magnitude inside and the height represents their significance, a proxy for the maximum MMI, felt reports, and estimated impact of an earthquake. The charts below show the distribution of earthquakes by continent and by magnitude for the top-200 earthquakes with the highest magnitude.
</p>
<p class="reference">
Data source: <a href="https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php">USGS</a>, <a href="https://hub.arcgis.com/datasets/esri::world-continents/about">ArcGIS Hub</a>
</p>
<p class="reference">
Published: May 2024
</p>
<p class="reference">
© Junyi Yang & Emily Zhou. All rights reserved.
</p>
</div>
</div>
</main>
<!-- add leaflet library -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<!-- add deck gl -->
<script src="https://unpkg.com/deck.gl@latest/dist.min.js"></script>
<!-- add d3 library -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- maplibre -->
<script src="https://unpkg.com/maplibre-gl@3.0.0/dist/maplibre-gl.js"></script>
<!-- link js file -->
<script type="module" src="ui/js/main.js"></script>
</body>
</html>