-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
255 lines (233 loc) · 8.06 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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes"/>
<title>Heatmap</title>
<style>
html {
height: auto;
}
body {
height: auto;
margin: 0;
padding: 0;
font-family: Georgia, serif;
font-size: 0.9em;
}
#map_canvas {
height: 600px;
bottom: 0;
left: 0;
right: 0;
top: 0;
}
@media print {
#map_canvas {
height: 950px;
}
}
#floating-panel {
top: 10px;
left: 25%;
z-index: 5;
background-color: #fff;
padding: 5px;
border: 1px solid #999;
text-align: center;
font-family: 'Roboto', 'sans-serif';
line-height: 30px;
padding-left: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div>
The University heights area is bound by: <br/>
north-east corner: 35.081011, -106.613277<br/>
south-west corner: 35.073688, -106.622083<br/>
<pre>
mysql> select YEAR, count(*) from uhaRecords WHERE (GIS_LAT >= 35.07378816436824) and (GIS_LAT <= 35.081171328253525) and (GIS_LONG <= -106.61331860351561) and (GIS_LONG >= -106.62242300415039) group by year;
+------+----------+
| YEAR | count(*) |
+------+----------+
| 2011 | 187 |
| 2012 | 173 |
| 2013 | 157 |
+------+----------+
3 rows in set (0.00 sec)
mysql>
</pre>
This doesn't look so bad. However, we also have data from 2010....?
<pre>
mysql> select YEAR, count(*) from uhaRecords group by year;
+------+----------+
| YEAR | count(*) |
+------+----------+
| 2010 | 15448 |
| 2011 | 16943 |
| 2012 | 15532 |
| 2013 | 16006 |
+------+----------+
4 rows in set (0.03 sec)
mysql>
</pre>
<b>PROBLEM 1</b> - What happened to 2010 for our neighborhood?<br/>
<b>ANSWER 1</b> - The 2010 data had all latitudes and longitudes transposed. We corrected the error in commit #81ea2d053e2.
<br/>
<br/>
After rerunning the population routines, and then rerunning our query, we have better looking results:<br/>
<pre>
mysql> select YEAR, count(*) from uhaRecords WHERE (GIS_LAT >= 35.07378816436824) and (GIS_LAT <= 35.081171328253525) and (GIS_LONG <= -106.61331860351561) and (GIS_LONG >= -106.62242300415039) group by year;
+------+----------+
| YEAR | count(*) |
+------+----------+
| 2010 | 156 |
| 2011 | 187 |
| 2012 | 173 |
| 2013 | 157 |
+------+----------+
4 rows in set (0.03 sec)
mysql>
</pre>
When looking at specific intersections, it becomes clear that that 2010-2013 also have problems. Let's consider one particularly busy intersection, Central and Yale.
north-east corner: 35.081172, -106.621928<br/>
south-west corner: 35.080886, -106.622207<br/>
<br/>
<pre>
myql> select YEAR, count(*) from uhaRecords WHERE (GIS_LAT >= 35.080886) and (GIS_LAT <= 35.081172) and (GIS_LONG <= -106.621928) and (GIS_LONG >= -106.622207) group by year;
+------+----------+
| YEAR | count(*) |
+------+----------+
| 2010 | 32 | # 20.51%
| 2011 | 59 | # 37.82%
| 2012 | 36 | # 23.07%
| 2013 | 29 | # 18.58%
+------+----------+
4 rows in set (0.03 sec)
mysql>
I'm actually not sure if this is a problem. These variations seem OK.
</pre>
<br/>
<br/>
<br/>
<br/>
<br/>
</div>
<center>Here's a heatmap from the origional dataset</center>
<div id="floating-panel">
<button onclick='getPoints(this)'>2010</button>
<button onclick="getPoints(this)">2011</button>
<button onclick="getPoints(this)">2012</button>
<button onclick="getPoints(this)">2013</button>
<button onclick="getPoints(this)">All</button>
<button onclick="getPoints(this)">Reset</button>
<div>
<input type="checkbox" id="fromUNM" > BernCo_Traffic_Accident_Data_2010_to_2013.csv
</div>
<div>
<input type="checkbox" id="fromNMDOT" > DR782_Albuquerque 2012-2015.xlsx
</div>
<div>
<input type="checkbox" id="dataset" > primary-secondary-coal.csv
</div>
<script>
<!-- here Sabastian was trying to link the "checkboxes" to the buttons - not too sure what i was doing -->"
function showInput() {
var test=null;
var obj=`.getElementById("fromUNM");
obj?test='t':test='f';
var message_entered = ">RSP=" +test+ document.getElementById("IMEI").value + ";" + document.getElementById("Command").value + "<";
document.getElementById('display').innerHTML = message_entered;
</script>
</div>
<div id="map_canvas"></div>
<script>
var heatmap;
var year2010 = [];
var year2011 = [];
var year2012 = [];
var year2013 = [];
var allData = [];
function initMap() {
var gm = google.maps;
var map = new gm.Map(document.getElementById('map_canvas'), {
mapTypeId: gm.MapTypeId.ROADMAP,
center: new gm.LatLng(35.077349, -106.617071),
zoom: 16
});
var rectangle = new google.maps.Rectangle({
strokeColor: 'blue',
strokeOpacity: 0.5,
strokeWeight: 2,
fillColor: 'blue',
fillOpacity: 0.2,
map: map,
bounds: {
north: 35.081011,
south: 35.073688,
east: -106.613277,
west: -106.622083
}
});
$.getJSON("php/locations.json", function(json1) {
$.each(json1, function(key, data) {
if (data.year === '2010') {
allData.push({location: new gm.LatLng(data.lng, data.lat), weight: data.accidentCount});
} else {
allData.push({location: new gm.LatLng(data.lat, data.lng), weight: data.accidentCount});
}
switch (data.year) {
case '2010':
year2010.push({location: new gm.LatLng(data.lng, data.lat), weight: data.accidentCount});
break;
case '2011':
year2011.push({location: new gm.LatLng(data.lat, data.lng), weight: data.accidentCount});
break;
case '2012':
year2012.push({location: new gm.LatLng(data.lat, data.lng), weight: data.accidentCount});
break;
case '2013':
year2013.push({location: new gm.LatLng(data.lat, data.lng), weight: data.accidentCount});
break;
}
});
});
index = new gm.visualization.HeatmapLayer({
dissipating: true,
maxIntensity: 10,
radius: 20
});
index.setMap(map);
}
function getPoints(obj) {
switch ($(obj).text()) {
case '2010':
index.setData(year2010);
break;
case '2011':
index.setData(year2011);
break;
case '2012':
index.setData(year2012);
break;
case '2013':
index.setData(year2013);
break;
case 'All':
index.setData(allData);
break;
case 'Reset':
index.setData([]);
}
}
</script>
This is for text after the map.
<!-- after June 2016 a key is required on new domains, this key provisioned by Brian Stinar on 2/25/2017 for CodeForABQ -->
<!-- gratitude https://developers.google.com/maps/documentation/javascript/get-api-key -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDJGEBxqglCB2Np5aoE8c8fkpJ_017IHVE&v=3&libraries=visualization&callback=initMap">
</script>
</body>
</html>