-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
81 lines (72 loc) · 5.66 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
<DOCTYPE HTML>
<html>
<head>
<!-- header/title stuff -->
<meta http-equiv='Content-Type' content='text/html;charset=utf-8'>
<title>Divvy Trips</title>
<meta property='og:image' content='http://faculty.washington.edu/mikefree/divvy/images/fb.png'/>
<!-- Add D3 JavaSript files -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Jquery UI -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.5/mapbox.css' rel='stylesheet' />
<script type="text/javascript" src="js/settings.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/controls.js"></script>
<script type="text/javascript" src="js/clock.js"></script>
<!-- CSS files -->
<link rel="stylesheet" href="css/map.css"></link>
<link rel="stylesheet" href="css/controls.css"></link>
<link rel="stylesheet" href="css/clock.css"></link>
</head>
<body>
<div id='header'>
<div id="top-right">
<a href="https://twitter.com/mf_viz" class="twitter-follow-button" data-show-count="false">Follow @mf_viz</a>
</div>
<a href="https://divvybikes.com/datachallenge" target="_blank">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="165.38px" height="46.241px" viewBox="0 0 165.38 46.241" enable-background="new 0 0 165.38 46.241" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<g>
<path fill="#2FCAFC" d="M161.548,9.916c-0.249-0.385-0.708-0.604-1.263-0.604h-4.008c-0.556,0-1,0.435-1.395,0.934l-11.629,14.029 l-11.627-14.029c-0.401-0.499-0.842-0.938-1.399-0.938h-4.009c-0.553,0-1.012,0.223-1.262,0.607 c-0.252,0.384-0.352,0.914-0.024,1.397l15.198,18.544v8.568c0,0.768,0.701,1.436,1.506,1.436h3.234 c0.803,0,1.504-0.668,1.504-1.436v-8.568l15.197-18.544C161.899,10.83,161.799,10.3,161.548,9.916"/>
<path fill="#2FCAFC" d="M23.379,33.684H6.25V15.487h17.129c3.772,0,6.841,3.071,6.841,6.843v4.435 C30.22,30.577,27.151,33.684,23.379,33.684 M23.379,9.309H1.426C0.642,9.309,0,9.948,0,10.737v27.688 c0,0.793,0.642,1.435,1.426,1.435h21.953c7.221,0,13.091-5.878,13.091-13.096V22.33C36.47,15.151,30.6,9.309,23.379,9.309"/>
<path fill="#2FCAFC" d="M71.674,15.487c0.76,0,1.428-0.702,1.428-1.5v-3.175c0-0.8-0.668-1.504-1.428-1.504h-27.47 c-0.766,0-1.432,0.704-1.432,1.504v3.175c0,0.798,0.666,1.5,1.432,1.5h10.605v18.196H44.204c-0.766,0-1.432,0.7-1.432,1.499v3.175 c0,0.8,0.666,1.503,1.432,1.503h27.47c0.76,0,1.428-0.703,1.428-1.503v-3.175c0-0.799-0.668-1.499-1.428-1.499H61.065V15.487 H71.674z"/>
<path fill="rgb(212,212,212)" d="M119.706,0c-0.287,0-0.711,0.092-1.131,0.537l-18.344,18.328L81.893,0.537C81.47,0.092,81.05,0,80.761,0 c-0.698,0-1.185,0.55-1.185,1.33v5.44c0,0.554,0.225,0.905,0.523,1.206c0.25,0.245,16.853,16.766,17.104,17.014 c0.334,0.33,0.887,0.562,1.354,0.562h3.347c0.463,0,1.025-0.232,1.361-0.562c0.248-0.248,16.85-16.769,17.1-17.014 c0.297-0.301,0.525-0.652,0.525-1.206V1.33C120.891,0.55,120.403,0,119.706,0"/>
<path fill="rgb(212,212,212)" d="M119.706,20.698c-0.287,0-0.711,0.089-1.131,0.531l-18.344,18.326L81.893,21.229 c-0.423-0.442-0.843-0.531-1.132-0.531c-0.698,0-1.185,0.546-1.185,1.321v5.445c0,0.551,0.225,0.905,0.523,1.205 c0.25,0.248,16.853,16.764,17.104,17.013c0.334,0.328,0.887,0.559,1.354,0.559h3.347c0.463,0,1.025-0.23,1.361-0.559 c0.248-0.249,16.85-16.765,17.1-17.013c0.297-0.3,0.525-0.654,0.525-1.205V22.02C120.891,21.244,120.403,20.698,119.706,20.698"/>
</g>
</svg>
</a>
</div>
<div id='loader'>
<img src='lib/loader.gif'></img>
</div>
<div id="label">
<div id="label-left"></div>
<div id="label-middle" style="color:#2FCAFC"></div>
</div>
<div id="label-date"></div>
<div id="container">
<div id="controls">
<button id='riders' class="active" style="background: url(images/routes.png)"></button>
<button id='stations' class="active" style="background: url(images/stations.png)"></button>
<button id='maptiles' class="passive" style="background: url(images/streets.png)"></button>
</div>
</div>
<div id="slider" class="arrow_box"></div>
<script type="text/javascript">
clickfunction = function() {
console.log('click ', this)
}
getStations(function() {
getData(drawMap)
})
var clock = new Clock()
setControls()
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</body>
</html>