2 |
3 | # Halifax Crime Heatmap
4 |
5 | [Halifix Crime Heatmap](https://www.davidhampgonsalves.com/crime-heatmaps/) is an HTML5 animated heatmap visualization of crime for the city of Halifax.
6 |
7 | It was created as an entry for the [Apps4Halifax](http://www.apps4halifax.ca/) contest and recieved second place in its category.
8 |
9 | ## Current Status
10 |
11 | This project is in a working but shuttered state. I've stood it back up and converted many times but the latest (and final) was from Node/Postgres backend to static HTML. This was done to preserve it here with data from 2015-2017.
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 david hamp-gonsalves
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/js/h-gmap.js:
--------------------------------------------------------------------------------
1 | /*
2 | * heatmap.js GMaps overlay
3 | *
4 | * Copyright (c) 2011, Patrick Wied (http://www.patrick-wied.at)
5 | * Dual-licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
6 | * and the Beerware (http://en.wikipedia.org/wiki/Beerware) license.
7 | */
8 |
9 | function HeatmapOverlay(map, cfg){
10 | var me = this;
11 |
12 | me.heatmap = null;
13 | me.conf = cfg;
14 | me.latlngs = [];
15 | me.bounds = null;
16 | me.setMap(map);
17 |
18 | //google.maps.event.addListener(map, 'idle', function() { me.draw() });
19 | }
20 |
21 | HeatmapOverlay.prototype = new google.maps.OverlayView();
22 |
23 | HeatmapOverlay.prototype.onAdd = function(){
24 |
25 | var panes = this.getPanes(),
26 | w = this.getMap().getDiv().clientWidth,
27 | h = this.getMap().getDiv().clientHeight,
28 | el = document.createElement("div");
29 |
30 | el.style.cssText = "position:absolute;top:0;left:0;width:"+w+"px;height:"+h+"px;";
31 |
32 | this.conf.element = el;
33 | panes.overlayLayer.appendChild(el);
34 |
35 | this.heatmap = h337.create(this.conf);
36 | }
37 |
38 | HeatmapOverlay.prototype.onRemove = function(){
39 | // Empty for now.
40 | }
41 |
42 | HeatmapOverlay.prototype.draw = function(){
43 | console.log('draw called');
44 | return;
45 |
46 | /*var me = this,
47 | overlayProjection = me.getProjection(),
48 | currentBounds = me.map.getBounds();
49 |
50 | if (currentBounds.equals(me.bounds)) {
51 | return;
52 | }
53 | me.bounds = currentBounds;
54 |
55 | var ne = overlayProjection.fromLatLngToDivPixel(currentBounds.getNorthEast()),
56 | sw = overlayProjection.fromLatLngToDivPixel(currentBounds.getSouthWest()),
57 | topY = ne.y,
58 | leftX = sw.x,
59 | h = sw.y - ne.y,
60 | w = ne.x - sw.x;
61 |
62 |
63 | me.conf.element.style.left = topY + 'px';
64 | me.conf.element.style.top = leftX + 'px';
65 | me.conf.element.style.width = w + 'px';
66 | me.conf.element.style.height = h + 'px';
67 | me.heatmap.store.get("heatmap").resize();
68 |
69 | if(this.latlngs.length > 0){
70 | this.heatmap.clear();
71 |
72 | var len = this.latlngs.length,
73 | projection = this.getProjection();
74 | d = {
75 | max: this.heatmap.store.max,
76 | data: []
77 | };
78 |
79 | while(len--){
80 | var latlng = this.latlngs[len].latlng;
81 | if(!currentBounds.contains(latlng)) { continue; }
82 |
83 | // DivPixel is pixel in overlay pixel coordinates... we need
84 | // to transform to screen coordinates so it'll match the canvas
85 | // which is continually repositioned to follow the screen.
86 | var divPixel = projection.fromLatLngToDivPixel(latlng),
87 | screenPixel = new google.maps.Point(divPixel.x - leftX, divPixel.y - topY);
88 |
89 | var roundedPoint = this.pixelTransform(screenPixel);
90 | d.data.push({
91 | x: roundedPoint.x,
92 | y: roundedPoint.y,
93 | count: this.latlngs[len].c
94 | });
95 | }
96 | this.heatmap.store.setDataSet(d);
97 | }*/
98 | }
99 |
100 | HeatmapOverlay.prototype.pixelTransform = function(p){
101 | var w = this.heatmap.get("width"),
102 | h = this.heatmap.get("height");
103 |
104 | while(p.x < 0){
105 | p.x+=w;
106 | }
107 |
108 | while(p.x > w){
109 | p.x-=w;
110 | }
111 |
112 | while(p.y < 0){
113 | p.y+=h;
114 | }
115 |
116 | while(p.y > h){
117 | p.y-=h;
118 | }
119 |
120 | p.x = (p.x >> 0);
121 | p.y = (p.y >> 0);
122 |
123 | return p;
124 | }
125 |
126 | HeatmapOverlay.prototype.setDataSet = function(data){
127 |
128 | var me = this,
129 | currentBounds = me.map.getBounds(),
130 | mapdata = {
131 | max: data.max,
132 | data: []
133 | },
134 | d = data.data,
135 | dlen = d.length,
136 | projection = me.getProjection(),
137 | latlng, point;
138 |
139 | me.latlngs = [];
140 |
141 | while(dlen--){
142 | latlng = new google.maps.LatLng(d[dlen].lat, d[dlen].lng);
143 |
144 | if(!currentBounds.contains(latlng)) {
145 | continue;
146 | }
147 |
148 |
149 | me.latlngs.push({latlng: latlng, c: d[dlen].count});
150 | point = me.pixelTransform(projection.fromLatLngToContainerPixel(latlng));
151 | mapdata.data.push({x: point.x, y: point.y, count: d[dlen].count});
152 | }
153 |
154 |
155 | var ne = projection.fromLatLngToDivPixel(currentBounds.getNorthEast()),
156 | sw = projection.fromLatLngToDivPixel(currentBounds.getSouthWest()),
157 | topY = ne.y,
158 | leftX = sw.x;
159 |
160 | me.conf.element.style.left = leftX + 'px';
161 | me.conf.element.style.top = topY + 'px';
162 |
163 | me.heatmap.clear();
164 | me.heatmap.store.setDataSet(mapdata);
165 | }
166 |
167 | HeatmapOverlay.prototype.addDataPoint = function(lat, lng, count){
168 |
169 | var projection = this.getProjection(),
170 | latlng = new google.maps.LatLng(lat, lng),
171 | point = this.pixelTransform(projection.fromLatLngToDivPixel(latlng));
172 |
173 | this.heatmap.store.addDataPoint(point.x, point.y, count);
174 | this.latlngs.push({ latlng: latlng, c: count });
175 | }
176 |
177 | HeatmapOverlay.prototype.toggle = function(){
178 | this.heatmap.toggleDisplay();
179 | }
180 |
--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | padding: 0;
3 | margin: 0;
4 |
5 | font-family: "Open Sans", sans-serif;
6 | font-weight: 300;
7 |
8 | -webkit-touch-callout: none;
9 | -webkit-user-select: none;
10 | -khtml-user-select: none;
11 | -moz-user-select: none;
12 | -ms-user-select: none;
13 | user-select: none;
14 | }
15 | html,
16 | body {
17 | width: 100%;
18 | height: 100%;
19 | color: black;
20 | background: #95db8f;
21 | }
22 |
23 | #header {
24 | z-index: 99;
25 | margin: 20px;
26 | position: fixed;
27 | }
28 |
29 | h1 {
30 | font-size: 45px;
31 | font-weight: 700;
32 |
33 | line-height: 160%;
34 | margin: 0 25px 0 10px;
35 |
36 | display: block;
37 | float: left;
38 | }
39 |
40 | h1 span {
41 | font-size: 53px;
42 | font-weight: 300;
43 | }
44 |
45 | #animation-control-button {
46 | float: left;
47 | }
48 |
49 | #animation-control-button .play {
50 | border: solid transparent;
51 | margin-left: 5px;
52 | border-width: 25px 0px 25px 39px;
53 | border-left-color: black;
54 | height: 0;
55 | width: 0;
56 | }
57 |
58 | #animation-control-button .pause {
59 | width: 20px;
60 | height: 50px;
61 | border-left: 12px solid black;
62 | border-right: 12px solid black;
63 | }
64 |
65 | #heatmapArea {
66 | height: 100%;
67 | width: 100%;
68 | }
69 |
70 | #progress-bar-background {
71 | position: fixed;
72 | width: 100%;
73 | height: 3px;
74 | left: 0;
75 | bottom: 0;
76 | background: white;
77 | z-index: 98;
78 | }
79 |
80 | #progress-bar-container {
81 | position: fixed;
82 | overflow: visible;
83 | left: 0;
84 | bottom: 0;
85 | z-index: 99;
86 | }
87 |
88 | #progress-bar-pointer {
89 | position: absolute;
90 | right: -160px;
91 | bottom: 0;
92 | right: 0;
93 |
94 | background: #87d69b;
95 | margin-right: -45px;
96 | margin-bottom: 20px;
97 | padding-top: 17px;
98 | text-align: center;
99 | height: 80px;
100 | width: 90px;
101 | line-height: 150%;
102 |
103 | cursor: pointer;
104 | }
105 |
106 | #progress-bar-pointer:after {
107 | position: absolute;
108 | content: " ";
109 | top: 100%;
110 | left: 50%;
111 | border: solid transparent;
112 | border-top-color: #87d69b;
113 | border-width: 15px;
114 | margin-left: -15px;
115 | }
116 |
117 | #progress-bar-pointer .date-prefix {
118 | font-size: 10px;
119 | }
120 |
121 | #progress-bar-pointer .year {
122 | font-size: 13px;
123 | }
124 |
125 | #progress-bar {
126 | position: absolute;
127 | background: #327ccb;
128 | width: 100%;
129 | left: 0;
130 | bottom: 0;
131 | height: 3px;
132 | }
133 |
134 | #progress-bar-instructions {
135 | position: absolute;
136 | right: -160px;
137 | bottom: 80px;
138 | padding: 10px 10px;
139 | width: 80px;
140 | text-align: center;
141 | background: white;
142 | display: none;
143 | }
144 |
145 | #progress-bar-instructions:after {
146 | position: absolute;
147 | content: " ";
148 | top: 20px;
149 | left: 0px;
150 | border: solid transparent;
151 | border-right: none;
152 | border-bottom-color: #fff;
153 | border-width: 15px;
154 | margin-left: -15px;
155 | }
156 |
157 | .button {
158 | text-decoration: none;
159 | color: black;
160 | padding: 10px;
161 | display: block;
162 | background: #87d69b;
163 | -moz-box-shadow: -5px 5px #222;
164 | -webkit-box-shadow: -5px 5px #222;
165 | box-shadow: -5px 5px #222;
166 | }
167 |
168 | .button:hover {
169 | background: #aaebbb;
170 | }
171 |
172 | .button:active {
173 | margin: 3px -3px;
174 | box-shadow: -2px 2px #222;
175 | }
176 |
177 | a.button {
178 | display: inline-block;
179 | font-size: 20px;
180 | padding: 15px;
181 | }
182 |
183 | .button.button-right {
184 | float: right;
185 | display: block;
186 | text-decoration: none;
187 | color: black;
188 | padding: 15px;
189 | display: block;
190 | background: white;
191 | font-size: 16px;
192 | -moz-box-shadow: 5px 5px #222;
193 | -webkit-box-shadow: 5px 5px #222;
194 | box-shadow: 5px 5px #222;
195 | margin-right: 5px;
196 | }
197 |
198 | .button.button-right:hover {
199 | background: #dfd;
200 | }
201 |
202 | .button.button-right:active {
203 | box-shadow: 2px 2px #222;
204 | margin: 3px 2px -3px 3px;
205 | }
206 |
207 | #options-button {
208 | margin-right: 0;
209 | }
210 | #options-button:active {
211 | margin: 3px -3px -3px 3px;
212 | }
213 | #options,
214 | #years {
215 | position: fixed;
216 | top: 60px;
217 | right: 0;
218 | z-index: 97;
219 | text-align: right;
220 | }
221 |
222 | #options-area {
223 | position: fixed;
224 | top: 0;
225 | right: 0;
226 | z-index: 101;
227 | }
228 |
229 | #options-area li {
230 | float: right;
231 | clear: both;
232 | list-style: none;
233 | width: 150px;
234 | padding: 8px 13px;
235 | margin-right: -200px;
236 | transition: margin-right 0.25s ease-in-out;
237 | -moz-transition: margin-right 0.25s ease-in-out;
238 | -webkit-transition: margin-right 0.25s ease-in-out;
239 | font-size: 14px;
240 | background: #bfeadd;
241 | }
242 | #options-area li.title,
243 | #years li.title {
244 | margin-top: 10px;
245 | font-size: 16px;
246 | background: white;
247 | }
248 |
249 | #years li:not(.title) {
250 | padding: 0;
251 | width: 176px;
252 | }
253 |
254 | #years li a {
255 | padding: 8px 15px;
256 | text-decoration: none;
257 | color: black;
258 | width: 150px;
259 | display: block;
260 | line-height: 2.2;
261 | background: #fff;
262 | }
263 | #years li a:hover {
264 | background: #aaebbb;
265 | }
266 | #years li a.current {
267 | background: #dfd;
268 | }
269 |
270 | #options li:nth-child(2) {
271 | background: #a1cdfb;
272 | }
273 | #options li:nth-child(3) {
274 | background: #bfeadd;
275 | }
276 | #options li:nth-child(4) {
277 | background: #c4b0dd;
278 | }
279 | #options li:nth-child(5) {
280 | background: #fae07e;
281 | }
282 | #options li:nth-child(6) {
283 | background: #e5f9a6;
284 | }
285 |
286 | input {
287 | margin: 10px;
288 | }
289 |
290 | .message-box {
291 | background: #fff;
292 | position: fixed;
293 |
294 | z-index: 100;
295 | width: 700px;
296 | top: 50%;
297 | left: 50%;
298 | margin-top: -250px;
299 | margin-left: -350px;
300 | line-height: 160%;
301 | text-align: center;
302 | display: none;
303 | }
304 |
305 | .message-box h2 {
306 | text-align: left;
307 | margin: 40px;
308 | }
309 |
310 | .message-box p {
311 | margin: 20px 40px 30px 40px;
312 | text-align: left;
313 | }
314 | .message-box .footer {
315 | margin: 40px 40px 0 40px;
316 | text-align: center;
317 | text-weight: 800;
318 | padding-bottom: 2em;
319 | }
320 |
321 | .message-box .footer a {
322 | text-decoration: none;
323 | font-weight: 800;
324 | color: #333;
325 | }
326 |
327 | .message-box .footer a:hover {
328 | color: #95db8f;
329 | }
330 |
331 | a.button {
332 | display: inline-block;
333 | font-size: 20px;
334 | padding: 15px;
335 | }
336 |
337 | .mobile-only-content {
338 | display: none;
339 | }
340 |
341 | #mobile-icon {
342 | width: 40px;
343 | height: 60px;
344 | background-color: #000;
345 |
346 | border-radius: 4px;
347 | -webkit-border-radius: 4px;
348 | -moz-border-radius: 4px;
349 |
350 | position: relative;
351 | float: left;
352 | margin: 0px 20px;
353 | margin-top: -10px;
354 | }
355 |
356 | #mobile-icon div {
357 | background: #fff;
358 | position: absolute;
359 | }
360 |
361 | #mobile-icon .line {
362 | width: 14px;
363 | height: 1px;
364 | top: 6px;
365 | left: 13px;
366 | }
367 |
368 | #mobile-icon .screen {
369 | width: 34px;
370 | height: 37px;
371 | top: 10px;
372 | left: 3px;
373 | }
374 |
375 | #mobile-icon .dot {
376 | width: 4px;
377 | height: 4px;
378 | bottom: 5px;
379 | left: 18px;
380 |
381 | border-radius: 4px;
382 | -webkit-border-radius: 4px;
383 | -moz-border-radius: 4px;
384 | }
385 |
386 | #legend {
387 | height: 250px;
388 | width: 60px;
389 | position: fixed;
390 | left: 0;
391 | bottom: 125px;
392 | margin-left: 25px;
393 | overflow: visible;
394 | }
395 |
396 | #numbers,
397 | #colors {
398 | position: absolute;
399 | top: 0;
400 | left: 0;
401 | display: table;
402 | height: 100%;
403 | width: 100%;
404 | z-index: 97;
405 | }
406 | #numbers {
407 | z-index: 98;
408 | }
409 |
410 | #numbers div,
411 | #colors div {
412 | display: table-row;
413 | }
414 |
415 | #numbers div a,
416 | #colors div span {
417 | width: 100%;
418 | display: table-cell;
419 | text-align: center;
420 | vertical-align: middle;
421 | cursor: default;
422 | }
423 | #colors div:nth-child(1) span {
424 | background: #fcb7a7;
425 | }
426 | #colors div:nth-child(2) span {
427 | background: #f8f087;
428 | }
429 | #colors div:nth-child(3) span {
430 | background: #b7e3c0;
431 | }
432 | #colors div:nth-child(4) span {
433 | background: #b8d0dd;
434 | }
435 |
436 | @media (max-width: 1000px) {
437 | h1 {
438 | font-size: 30px;
439 | }
440 |
441 | h1 span {
442 | font-size: 45px;
443 | }
444 |
445 | * {
446 | font-size: 14px;
447 | }
448 |
449 | .message-box {
450 | width: 100%;
451 | height: 100%;
452 | position: absolute;
453 | padding: 0;
454 | top: 0;
455 | left: 0;
456 | margin: 0;
457 | overflow: auto;
458 | }
459 |
460 | .message-box h2 {
461 | font-size: 18px;
462 | }
463 |
464 | #legend {
465 | height: 180px;
466 | width: 50px;
467 | top: 90px;
468 | margin-left: 25px;
469 | }
470 | }
471 |
472 | @media (max-width: 1000px) {
473 | h1 {
474 | font-size: 20px;
475 | }
476 |
477 | h1 span {
478 | font-size: 35px;
479 | }
480 | }
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
10 |
11 |
12 |
13 |
42 |
43 |