-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
122 lines (117 loc) · 6.19 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uber Analytics by Jon Sadka</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<h1>UBER ANALYTICS</h1>
<span class="name"><span style="font-size:8px; color:black; vertical-align:top">visualization </span><a href="https://twitter.com/jonsadka"> Jon Sadka | </a><a href="https://twitter.com/picsoung">Nicolas Grenié </a><span style="font-size:8px; color:black; vertical-align:top"> backend</span></span>
<div id="optionsdescriptions">
<span style="font-size: 11px; padding-right: 86px;"> Time Range </span>
<span style="font-size: 11px; padding-right: 138px;"> Start Location</span>
<span style="font-size: 11px; padding-right: 144px;"> End Location</span>
<span style="font-size: 11px;"> Vehicle Type </span>
</div>
<div id="options">
<span class="custom-dropdown custom-dropdown--white">
<select id="timeframe" class="custom-dropdown__select custom-dropdown__select--white">
<!-- <option value="thanksgiving">Thanksgiving Week | 2014</option> -->
<!-- <option value="newyears">New Years Week | 2014</option> -->
<option value="halloween">Halloween Week | 2014</option>
<option value="january">2015 | January</option>
<option value="q4">2014 | October to December</option>
<option value="december">2014 | December</option>
<option value="november" selected="selected">2014 | November</option>
<option value="october">2014 | October</option>
<!--<option value="this_7_days">Past 7 Days</option>-->
<!--<option value="this_14_days">Past 2 Weeks</option>-->
<!--<option value="this_30_days">Past Month</option>-->
<!--<option value="this_60_days">Past 2 Months</option>-->
<!-- <option value="this_356_days">Past Year</option> -->
</select>
</span>
<span class="custom-dropdown custom-dropdown--white">
<select id="startLoc" class="custom-dropdown__select custom-dropdown__select--white">
<option value="gogp">SF | CA Academy of Sciences</option>
<option value="pwll" selected="selected">SF | Powell & Market</option>
<option value="warf">SF | Pier 39</option>
<option value="dtla">LA | Walt Disney Concert Hall</option>
<option value="smon">LA | Third Street Promenade</option>
<option value="hlwd">LA | Mann Chinese Theatres</option>
<option value="grct">NY | Grand Central Terminal</option>
<option value="upma">NY | Academy of Arts & Letters</option>
<option value="brok">NY | Barclays Center</option>
</select>
</span>
<span class="custom-dropdown custom-dropdown--white">
<select id="endLoc" class="custom-dropdown__select custom-dropdown__select--white">
<option value="gogp">SF | CA Academy of Sciences</option>
<option value="pwll">SF | Powell & Market</option>
<option value="warf" selected="selected">SF | Pier 39</option>
<option value="dtla">LA | Walt Disney Concert Hall</option>
<option value="smon">LA | Third Street Promenade</option>
<option value="hlwd">LA | Mann Chinese Theatres</option>
<option value="grct">NY | Grand Central Terminal</option>
<option value="upma">NY | Academy of Arts & Letters</option>
<option value="brok">NY | Barclays Center</option>
</select>
</span>
<span class="custom-dropdown custom-dropdown--white">
<select id="product" class="custom-dropdown__select custom-dropdown__select--white">
<option value="uberX" selected="selected">uberX</option>
<option value="uberXL">uberXL</option>
<option value="UberBLACK">uberBLACK</option>
<option value="UberSUV">uberSUV</option>
</select>
</span>
</div>
</div>
<div class="grid">
<!-- CREATE ROW -->
<div class="grid grid-pad" id="graphs">
<div class="col-5-8">
<h4>Best Hours to Uber</h4>
<div>
<hr/>
</div>
<p style="color: #555; font-size: 10px;">Recommended hour(s) are based on lowest fare.</p>
<div class="module" id="graph-right-top"></div>
<h4 style="text-align: left">Historical Surge Multiplier</h4>
<div>
<hr/>
</div>
<p style="color: #555; font-size: 10px; text-align: left">Computed using data points sampled at 10 minute intervals.</p>
<div class="module" id="graph-right-bottom"></div>
</div>
<div class="col-3-8">
<h4>Average Ride Cost</h4>
<div style="width:350px;">
<hr/>
</div>
<p style="color: #555; font-size: 10px;">Computed using data points sampled at 10 minute intervals.</p>
<div class="module" id="graph-left"></div>
</div>
</div>
</div>
<div class="footer"></div>
<!-- SCRIPTS -->
<script type="text/javascript" src="bower_components/d3/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="bower_components/keen-js/dist/keen.min.js" charset="utf-8"></script>
<script type="text/javascript" src="bower_components/suncalc/suncalc.js" charset="utf-8"></script>
<script type="text/javascript" src="getDataandFirstRender.js" charset="utf-8"></script>
<script type="text/javascript" src="updateDataandRender.js" charset="utf-8"></script>
<script type="text/javascript" src="resizeRender.js" charset="utf-8"></script>
<script type="text/javascript" src="uberScript.js" charset="utf-8"></script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-54247812-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>