-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·69 lines (57 loc) · 2.54 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Police Mapper</title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQ1sVSKZozy7U7kxsWE2D1B6HgT9QsjH8&libraries=visualization" async defer></script>
<link rel="stylesheet" href="src/css/css-reset.css">
<link rel="stylesheet" href="src/css/index.css">
<link rel="stylesheet" href="src/css/switch.css">
</head>
<body id="main">
<section id="main-left">
<h1 id="visualizer-title">Police Mapper</h1>
<p id="visualizer-about">This is a data visualization of crime stats and police
department size. Department size is determined by the number of neighborhood
coordination officers employed by each precinct. Heat map points are centered on the
location of the primary station for each precinct.
Use the selector below to toggle between views and visually explore the data.
</p>
<br/>
<form>
<!-- <p class="selector-title">Show Police Precinct Size</p>
<label class="switch">
<input type="checkbox" checked>
<span class="slider round"></span>
</label> -->
<br/>
<p class="selector-title">Show Crime Stats</p>
<br/>
<select>
<option name="selector" id="Police Precinct Size" value="0">Off</option>
<!-- <option class="selector" id="All Crimes">All Crimes</option> -->
<option name="selector" id="Burglaries" value="1">Burglaries</option>
<option name="selector" id="Felony Assault" value="2">Felony Assault</option>
<option name="selector" id="Grand Larceny" value="3">Grand Larceny</option>
<option name="selector" id="Grand Larceny of Auto" value="4">Grand Larceny of Auto</option>
<option name="selector" id="Murder" value="5">Murder</option>
<option name="selector" id="Rape" value="6">Rape</option>
<option name="selector" id="Robbery" value="7">Robbery</option>
</select>
<br/>
<br/>
<input id="submit" type="submit">
</form>
<div id="main-left-bottom">
<a href="https://github.com/rainrues"><img className="icon" src="images/298822-32.png" alt="Github icon"></a>
<a href="https://www.linkedin.com/in/rainrues/"><img className="icon" src="images/107159-32.png" alt="Linkedin icon"></a>
<a href="mailto:rainrues@gmail.com"><img className="icon" src="images/1167979-32.png" alt="Email icon"></a>
</div>
<link rel="stylesheet" href="">
</section>
<section id="main-right">
<div id="map"></div>
</section>
</body>
<script src="./dist/bundle.js"></script>
</html>