-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (154 loc) · 8.01 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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title>VisionZero</title>
<link rel="stylesheet" href="style/style.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/48938155eb24b4ccdde09426066869504c6dab3c/dist/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<header class="header">
<img src="assets/VisionZeroLogo.svg" class="logo"/>
<nav>
<a href="#">About</a>
<a href="#">Features</a>
<a href="#">Data</a>
</nav>
</header>
<div class="content">
<div class="filters">
<div class="tab">
<button id="collision-tab" class="tablinks" onclick="openTab(event, 'collision')" >Traffic Collisions</button>
<button class="tablinks" onclick="openTab(event, 'context')" >Context</button>
</div> <!-- tab -->
<form>
<div id="collision" class="tabcontent">
<h3 class="sub-header">Toronto Police Services Data: 2007-2017</h3>
<h3 class="filter-title">Collision Resulting in Fatality or Serious Injury</h3>
<div class="filter-criteria collision-type">
<h5>
<p>
<label class="filter-options title">
<input type="checkbox" name="collisions" value="allcollisions"/>
<span>All Collisions</span>
<span>
<button class="info">
<img src="assets/alert-circle-i.svg" alt="">
<div class="info-content collisions-info">
<p>This dataset from the Toronto Police Service’s Open Data Portal includes all traffic collisions where a person was either killed or seriously injured (KSI) from 2007-2017.</p>
<p>Pedestrians, school children, older adults, cyclists, and motorcyclists make up six of the seven emphasis areas outlined in the City of Toronto’s Vision Zero Road Safety Plan.</p>
<p>Pedestrian and bicycle data can be filtered by “all ages”, “School Children” (ages 4-19), and “Older Adults” (over the age of 55).</p>
</div>
</button>
</span>
</label>
</p>
<p>
<label class="filter-options">
<input type="radio" name="accidents" value="pedestrians" >
<span>🚶 Pedestrians</span>
<span>
<img src="assets/Pedestrians-Magenta-Circle.svg" alt="">
</span>
</label>
</p>
<p>
<label class="filter-options">
<input type="radio" name="accidents" value="cyclists" >
<span>🚲 Cyclists</span>
<span>
<img src="assets/Bicycle-Cyan-Circle.svg" alt="">
</span>
</label></p>
<p>
<label class="filter-options">
<input type="radio" name="accidents" value="motorcycles" >
<span> 🏍️ Motorcyles</span>
<span>
<img src="assets/Motorcycle-Purple-Circle.svg" alt="">
</span>
</label>
</p>
<p>
<label class="filter-options">
<input type="radio" name="accidents" value="motorists" >
<span> 🚘 Motorists</span>
<span>
<img src="assets/Automobile-Orange-Circle.svg" alt="">
</span>
</label>
</p>
</h5>
</div>
<h3 class="sub-header">Filters</h3>
<h3 class="filter-title">Date Range</h3>
<div class="filter-criteria date-range">
<select id=selectYear>
<option value="Years">All Years</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
</select>
</div>
<h3 class="filter-title">Contributing Factors Recorded by Toronto Police</h3>
<div class="filter-criteria contributing-factors">
<h5>
<p>
<label class="filter-options title">
<input type="checkbox" name="contributing-factors" value="allfactors">
<span>All Contributing Factors</span>
<span>
<input class="info" type="image" src="assets/alert-circle-i.svg">
<div class="info-content contributing-factors-info">
<p>The collision data (KSI) provided on the Toronto Police Service’s Open Data Portal includes a record of the factors that were determined by the police to have played a role in each of the collisions. This filter allows the collision data to be sorted by these contributing factors.</p>
<p>“Aggressive Driving” is one of the seven emphasis areas outlined in the City of Toronto’s Vision Zero Road Safety Plan. </p>
</div>
</span>
</label>
</p>
<p><label class="filter-options"><input type="checkbox" name="factors" value="aggresive-driving" ><span> 😡 Aggressive Driving</span></label></p>
<p><label class="filter-options"><input type="checkbox" name="factors" value="alcohol" ><span> 🍸 Alcohol</span></label></p>
<p><label class="filter-options"><input type="checkbox" name="factors" value="speeding" ><span> 💨 Speeding</span></label></p>
<p><label class="filter-options"><input type="checkbox" name="factors" value="ran-red-light" ><span> 🚦 Ran Red Light</span></label></p>
</h5>
</div>
<h3 class="filter-title">Predictive Indicators</h3>
<div class="filter-criteria predictive-indicators">
<h5>
<p><label class="filter-options"><input type="checkbox" name="indicators" value="road-closures-construction"><span> 🚧 Road Closures/Construction</span></label></p>
<p><label class="filter-options"><input type="checkbox" name="indicators" value="major-cultural-event" ><span> 🎭 Major Cultural/Sporting Event</span></label></p>
</h5>
</div>
<button type="button" class="submit" id='reset_filters' name="button">Reset Filters</button>
<button type="button" class="submit" id='bike_route' name="button">Bike Route</button>
</div> <!-- collision tab -->
<div id="infrastructure" class="tabcontent">
infrastructure info
</div>
<div id="context" class="tabcontent">
Context info
</div>
</form>
</div> <!-- filters -->
<div id="map">
</div>
</div> <!-- container -->
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDuMcVxBFxHVNO9b_QOrpocTQj9u4LC6U&v=3.31">
</script>
<script src="index.js"></script>
</body>
</html>