-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmapExplore.html
65 lines (54 loc) · 2.33 KB
/
mapExplore.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" http-equiv="encoding">
<title>Map Exploration</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src='js/d3.v6.1.1/d3.min.js'></script>
<script src='js/topojson.js'></script>
</head>
<body>
<nav>
<div class="navicon">
<div></div>
</div>
<a href="index.html">Home</a>
<a href="map.html">Map Analysis and Exploration</a>
<a href="poverty.html">Poverty Rate Analysis</a>
</nav>
<p class="groove"> <h1>Explore the Map</h1> </p>
<p>Explore more of the map by hovering and zoom!</p>
<p>Click below to <strong>return</strong> to the brushable map and associated scatterplots.</p>
<div id = 'expNav'>
<a href="map.html">Back to Analysis</a>
</div>
<div class ='mapSect'>
<div class='mapRow'>
<div id="map" class = 'col right'>
</div>
<div id='legend' class = 'col left'>
<h4> Legend: </h4>
<p> Population </p>
<p class = 'leg'>
<svg class = 'pop'> <circle cx='10px' cy='20px' r='4px'/>></svg>
<svg class = 'pop'> <circle cx='10px' cy='20px' r='6px'/>></svg>
<svg class = 'pop'> <circle cx='10px' cy='20px' r='8px'/>></svg>
<svg class = 'pop'> <circle cx='10px' cy='20px' r='10px'/>></svg>
<svg class = 'pop'> <circle cx='13px' cy='20px' r='12px'/>></svg>
</p>
<p class = 'legText'> Severity </p>
<p> (% of people greater than 10 miles from a grocery store) </p>
<p class = 'subText'>0% --> 100% (20% increments)</p>
<p class = 'leg'>
<svg id = 'sev1'> <circle cx='10px' cy='20px' r='8px'/>></svg>
<svg id = 'sev2'> <circle cx='10px' cy='20px' r='8px'/>></svg>
<svg id = 'sev3'> <circle cx='10px' cy='20px' r='8px'/>></svg>
<svg id = 'sev4'> <circle cx='10px' cy='20px' r='8px'/>></svg>
<svg id = 'sev5'> <circle cx='10px' cy='20px' r='8px'/>></svg>
</p>
</div>
</div>
</div>
<script type="module" src="./js/mapExplore.js"></script>
</body>
</html>