-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
100 lines (83 loc) · 3.37 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
<!DOCTYPE html>
<html lang = "en">
<head>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
#map { width: 100%; height: 80%; background: transparent; }
.legend, .legend_label {
display: block;
width: 70px;
height: 18px;
float: left;
opacity: 0.7;
text-align: center;
font-size: 90%;
}
.leaflet-control-container { margin-left: 100px;}
.grid-container {
display: inline-grid;
grid-template-columns: auto auto;
text-align: center;
column-gap: 50px;
row-gap: 10px;
}
.select {
text-align-last: center;
}
.centered{
text-align: center;
}
</style>
<!-- D3 js -->
<script src="js/d3.min.js" charset="utf-8"></script>
<!-- Leaflet css -->
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
<!-- Leaflet js -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<!-- Omnivore js -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet-omnivore/0.3.4/leaflet-omnivore.min.js'></script>
<!-- Loadash js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<!-- JQuery js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<!-- Selectors -->
<div class="centered">
<div class="grid-container">
<div class="grid-item">Circle size</div>
<div class="grid-item">Circle Color</div>
<div class="grid-item">
<select id="size" onChange = update_size()>
<option value="cpr_scaled" selected>Coal production</option>
<option value="opr_scaled">Oil production</option>
<option value="ngp_scaled">Natural gas production</option>
</select>
</div>
<div class="grid-item">
<select id="colr" onChange = update_colr()>
<option value="ecd" selected>Economic status</option>
<option value="bdg">% with less than Bachelor's Degree</option>
<option value="rur">Rurality</option>
</select>
</div>
<div class="grid-item"> </div>
<div class="grid-item">
<span class = "legend" style="background:#008c00"> </span>
<span class = "legend" style="background:#61c600"> </span>
<span class = "legend" style="background:#ff9567"> </span>
<span class = "legend" style="background:#ff0000"></span>
<br>
<span class = "legend_label">0%–25%</span>
<span class = "legend_label">25%–50%</span>
<span class = "legend_label">50%–75%</span>
<span class = "legend_label">75%–100%</span>
</div>
</div>
</div>
<!-- Map -->
<div id="map"></div>
<!-- Data -->
<script type="text/javascript" src="js/counties_data.js"></script>
<!-- Js -->
<script type="text/javascript" src="js/map.js"></script>
</html>