-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
72 lines (60 loc) · 3.64 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
<!DOCTYPE html>
<html>
<head>
<title>Citibike Historical Map</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<meta property="og:image" content="https://ianv.me/citibikeDayMap/Bike-Gif-1.gif" />
<meta property="og:description" content="Explore how the availabilty of bikes and docks change over time for previous days." />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="mapContainer">
<h2 id="header">Citibike Historical Availability</h2>
<img src="info_icon.png" id="infoicon" />
<div id="explanationModalContainer">
<div id="explanationModal">
<p>Welcome!</p>
<p>Pick a day to see which stations had bikes at different times.</p>
<p>Once the data for that day loads you can use the slider at the bottom to see how availability varies over the day. You can use the drop down next to the slider to toggle between bikes and docks.</p>
<p>This shows you general trends for every half hour, with a green dot, yellow, and red indicating 3+, 1 or 2, and 0 bikes available respectively. if you want to see more specifics about a station, click on it. This will load a graph of availability spanning the hour before and after the currently selected time.</p>
<p>Some stations are always low on bikes at certain times of day, and others vary a lot, to help visualize this for any weekday can click the 'Overlay pervious weekdays' link above the graph, and it will show you how today compares to the last five weekdays.</p>
<p>Of course availability varies with time of year, weather, other station conditions, and current rebalancing programs - but hopefully this helps you get a little more insight into your local citibike stations! I made this in large part because I was enjoying my citibike commute so much more than packing onto the train that when I moved I wanted to see which apartments were citibike friendly, and the only way to do that was to check the app each morning when I woke up and when I left work.</p>
<p>If you have any questions or problems, feel free to email me at [email protected].</p>
</div>
</div>
<input type="text" id="datepicker" />
<div id="heatmap">
<div id="heatmapEmptyDot" class="heatmapDot"></div>
<div id="heatmapLowDot" class="heatmapDot"></div>
<p id="heatmapTooltip" id="heatmapTooltip" class="tooltip"></p>
</div>
<div id="totalCounts">
<p id="availableCount"></p>
<p id="lowCount"></p>
<p id="emptyCount"></p>
</div>
<p id="countTooltip" class="tooltip"></p>
<div id="options">
<span id="timesliderLeftArrow" class="optionInlineBlock arrow"></span>
<span id="timeslider" class="optionInlineBlock"></span>
<span id="timesliderRightArrow" class="optionInlineBlock arrow"></span>
<select name="type" id="typepicker" class="optionInlineBlock">
<option value="bike">Bikes</option>
<option value="dock">Docks</option>
</select>
</div>
<div id="map"></div>
<div id="mapLoadingOverlay">
<div id="mapLoadingImage"></div>
</div>
</div>
<script type="text/javascript" src="./main.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkY5PjJYijoiXKvnkdiE3eT2s7d6_48MQ&callback=initMap">
</script>
</body>
</html>