-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
79 lines (70 loc) · 3.02 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Crime Visualization | IBM Analytics</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<link href="https://www.mapbox.com/base/latest/base.css" rel="stylesheet" />
<script src="https://api.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.css" rel="stylesheet" />
<link href="cssjs/nouislider.min.css" rel="stylesheet" />
<link href="cssjs/site.css" rel="stylesheet" />
</head>
<body class="unlimiter loading clip">
<canvas id="canvas" class="contain z1 hidden"></canvas>
<!-- city menu -->
<header>
<div id="citymenu" class="nav pin-topleft z10">
<ul id="cityops" class="fill-navy dark small">
<li id="cityoptboston" class="cityopt"><a href="/?city=boston">Boston</a></li>
<li id="cityoptchicago" class="cityopt"><a href="/?city=chicago">Chicago</a></li>
<li id="cityoptvegas" class="cityopt"><a href="/?city=vegas">Las Vegas</a></li>
<li id="cityoptphilly" class="cityopt"><a href="/?city=philly">Philadelphia</a></li>
<li id="cityoptsf" class="cityopt"><a href="/?city=sf">San Francisco</a></li>
</ul>
</div>
</header>
<div id="map" class="map"></div>
<div id="controlpanel" class="pin-topleft pad1 sidebar-panel z9 sidebar-container">
<div class="fill-white round lifted">
<div>
<div id="cdshead">
<div id="cdslogo" class="fill-denim dark round-top pad1">
<div id="draw-controls" class="fill-denim dark round draw-controls text-right"></div>
<div>IBM<br>Watson<br>Data</div>
</div>
</div>
<div id="citychooser">
<!--<form action="/">-->
<h3 class="block pad1">Recent crime in
<span id="citynameintitle">...</span>
<!--
<select name="city" onchange="this.form.submit()">
<option id="city_boston" value="boston">Boston</option>
<option id="city_vegas" value="vegas">Las Vegas</option>
<option id="city_sf" value="sf">San Francisco</option>
</select-->
</h3>
<!--</form>-->
</div>
<div class="prose quiet pad1">
<p>Select the pencil tool above and draw a shape on the map to query crimes within it.</p>
</div>
<div id="aggregates" class="fill-navy dark pad2 small dark"></div>
<div id="sliderspace" class="fill-navy dark round-bottom small dark">
<div id="slidertitle"><strong>Time of day</strong></div>
<div id="timeslider"></div>
</div>
</div>
</div>
</div>
<div class="legend-container pin-bottomright pad1x space-bottom4 z1">
<div id="legend" class="legend fill-white round pad1 lifted hidden"></div>
</div>
<div class="pin-bottomleft z1 mb-watermark pad1">
<a target="_blank" href="https://www.mapbox.com/"><img src="images/mb.svg" alt="Mapbox" /></a>
</div>
<script src="cssjs/nouislider.min.js"></script>
<script src="cssjs/bundle.js"></script>
</body>
</html>