-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
102 lines (97 loc) · 8.63 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>speed-predictor</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js" integrity="sha256-xKeoJ50pzbUGkpQxDYHD7o7hxe0LaOGeguUidbq6vis=" crossorigin="anonymous"></script>
<style media="screen">
.container {
height: 400px;
padding-bottom: 20px;
}
</style>
</head>
<body>
<h2><em>Predictive ETAs across one week</em></h2>
<p>
<strong><em>ETAs are generated along control routes using OSRM's Multi Level Dijkstra algorithm with behavior-derived predictive speed profiles. Prediction code is <a href="https://github.com/sharedstreets/speed-prediction">open source under MIT license</a>.</em></strong>
<p>
<em>Speed profiles generated using <a href="https://www.openstreetmap.org/">OpenStreetMap</a> (ODBL) and <a href="https://movement.uber.com/cities/san_francisco/downloads/speeds?lang=en-US&tp[y]=2019&tp[q]=2">Uber Movement Speeds</a> (CC BY-NC 3.0 US).</em>
<script>
var trips = [{"name":"Oakland -> SF","a":[-122.28905439376832,37.810962152170354],"b":[-122.39932537078857,37.77702418710145],"data":[2860.6,2917.9,2653.1,3657.6,2915.5,2844.1,2852.6,2938.7,3522,3077.9,3385.5,3064.5,1957.8,1650.3,1602.6,1713.2,2473.4,3293.8,3184.3,2044.5,3148.8,3205,2975.5,3473.5,3285.2,2622.1,2883.1,3074.5,3011.2,3538.5,3161.9,3559.2,3445.1,2835.7,3608.6,3053,3103.6,2694.4,3456.9,3419.2,3071.7,3080,3319.8,3541.1,3119.9,3733.9,3024.2,2697.4,3229.2,3913.7,2875.9,2856.9,1724.6,1673.8,2829.3,3187.1,1967.1,2582,3744.1,3183.9,3599.9,2887.2,2876.4,3229.5,2996.6,3643.1,2876.9,1491.5,2910.1,2884.7,2824.4,2837.1,2900.1,2771,3109.7,2772.8,2616.2,1722.7,2591.1,2548.1,3029.8,3261.3,2750.7,2824.7,2879.9,2223.4,2788,2806.3,3135.4,3033.1,2850.4,2980.4,3036.6,2834.8,2932.7,3154.1,3545.5,2408.8,2477.7,2278.2,2519.1,1882.4,2153,1891.3,2885.5,2050.5,2181.4,1983.7,2455,3264.3,2971.4,1711.2,2139,2674.3,2821.7,1653.2,3087.9,3387.9,2903.8,3023.8,3333,3189.5,2889.8,2838.7,3052.1,2093.7,4119.8,2968.4,3346.8,3137.2,2485,2776.3,2756.4,2631.1,2421,2923.4,2346.7,3434.1,2474.1,2569.6,2087.7,3008.2,2972.2,3192.1,3152.9,2752.8,2982.2,2869.1,3623.7,3154.9,3158,3462.4,2843.4,2684.1,2872.2,2304.3,3433,2002.3,1847.8,1712.9,7405.8,3682.8,4091.4,3537,1664.1,3341.3,2834.1,3337.5]},{"name":"Market -> Presidio","a":[-122.40949630737303,37.782960004647364],"b":[-122.46045827865599,37.79562714086835],"data":[914.4,897.1,882.4,850.6,832.5,806.1,835.8,891.5,860.7,910.6,907.3,910.2,904.6,914.4,904.6,908.8,910.2,917.1,912.7,904.6,880.9,907.8,881.4,842.8,830.6,814.3,828.7,818,806.1,806.1,901.3,914.4,909.5,907.3,910.2,896.6,899.1,901.7,898.1,903.2,914.4,901.3,914.4,912,903.7,902,904.6,880.2,841.7,835.8,805.7,802.4,806.1,806.1,824.7,910.2,904.9,914.4,910.2,901.3,914.4,901.3,904.4,914.4,898.1,914.4,914.4,910.2,910.2,910.2,908.8,903.1,872.1,840.1,815.2,787.3,806.1,806.1,806.1,920.9,910.2,920.9,900.2,910.2,905.2,894.2,900.3,910.2,897.1,914.4,910.2,910.2,903.2,893.1,901.3,901.3,872.1,833.3,808.2,806.1,806.1,806.1,914.3,914.4,911.3,920.9,914.4,898.6,901,910.6,906.4,901,910.2,910.2,907.3,910.2,907.3,901,903.2,897.1,881.4,879.2,822.9,789.5,806.1,806.1,879.2,900.8,901.7,906.7,910.2,899.5,910.2,907.4,910.2,910.2,905.2,914.4,910.2,910.2,907.3,914.4,910.2,901.3,899.5,902,886.7,859.7,806.1,806.1,829.5,824.3,901.3,914.4,914.4,900.3,914.4,907.3,910.2,907.3,904.6,907.3,910.2,907.3,910.2,914.4,901,905.2]},{"name":"Embarcadero -> Potrero Hill","a":[-122.3928666114807,37.792956539788726],"b":[-122.39866018295287,37.75988395932576],"data":[664,661.9,670.6,663.9,670.8,652,663.7,682,672.1,668.9,639.1,648.2,667.4,663.5,647.9,690.4,657.4,656.8,671.5,660.6,675.9,669.3,643.7,681.7,657.5,638.8,679.2,671.4,709.7,664.4,640.5,675.5,701.9,667,690.3,688.5,662.8,681.3,650,659.2,701.7,677.4,661.7,664.7,675.3,704.9,696.2,673.1,650.3,701.6,696.7,705.7,646,643.2,650.2,674.3,660.9,683.5,674.1,683.3,659.3,675.3,668.1,681.9,695.2,720.7,715.3,712.4,673.8,684.2,693.9,665.5,664.8,672.3,701.1,652,691.1,683.6,661.2,682.7,661,661,656.5,669.7,660.3,779.4,757.3,675.6,697.6,685.7,696.4,665.4,672.1,668.1,700.3,702.6,659.6,649.2,688,636.3,678.6,674.4,647.5,666.1,656.9,674.3,663,670.2,669.8,664.9,670.5,678.7,677.6,705.4,701.6,726.4,685.9,690.6,666.7,671.9,668.5,650.3,615.2,665.5,671,666.2,651.1,682.6,649.9,669,670.3,659.6,660.3,667.3,657.9,672,668.1,711.9,688.3,671.5,672.1,673.5,675,673.1,672.4,665.3,667.2,701.7,663.3,649,660.1,671.6,655.2,648.1,648.4,668.2,666.8,665.7,669,688.5,668.1,668,693.8,694.3,677,700.5,670.2,663]},{"name":"Haight -> Mission","a":[-122.44803428649902,37.76984969147692],"b":[-122.41857290267943,37.75308952880576],"data":[511,503.3,497.1,492,494.1,463.8,463.8,466.7,491.4,495.8,495.8,495.8,504.5,516.3,516.3,503.6,492.6,511.7,504.5,512.2,503.3,507.2,510.6,516.3,491.4,495.8,491.4,463.8,463.8,463.8,495.8,505,505,516.3,495.8,505.3,495.3,498,516.3,493.5,502.8,505.7,502.7,508.6,509.7,511.7,504,508.2,494.6,491.4,464.5,463.8,463.8,463.8,467.9,501,507.7,507.9,503.6,489.8,505.7,516.3,516.3,500.9,516.3,507.4,508.6,505.7,512.2,497.3,500.9,502.8,495.8,491.4,491.4,463.8,463.8,465.6,491.4,505.4,510.4,507.9,495.8,511.3,508.2,497.7,515.1,516.3,516.3,501.9,511.7,506.1,503.6,504,506.1,506.6,497.4,500.5,506.4,463.8,463.8,463.8,491.4,510.2,511.7,506.6,495.8,498,500,508.6,515.1,504.5,503.1,504.5,513.8,511.3,503.6,506.1,508.2,504.3,496.8,495.8,491.4,467.3,463.8,463.8,492.5,505.4,515,507.9,499.3,516.2,508.6,505.7,516.3,505.1,516.3,511,516.2,507.9,505.4,512.8,502.3,507.9,497.7,501.2,504,492.6,491.4,463.8,463.8,491.4,498.5,505.4,504,504,514.9,512.2,500.5,507.9,503.3,502.8,511.7,505.7,504,506.1,492,507.9]},{"name":"Bernal -> Marina","a":[-122.41327285766602,37.74074598958579],"b":[-122.44331359863283,37.802256596712596],"data":[1155.3,1120.8,1103.5,1151,1112,1116.2,1087.6,1140.3,1086.5,1108.7,1115.4,1110.2,1127,1149.7,1137.8,1141.2,1161.4,1142.4,1097.7,1156.8,1122.2,1129.3,1116.1,1124.6,1139.9,1080.4,1077.4,1012.6,1029.7,1134.8,1142.6,1084.1,1103,1155,1115.1,1088.4,1126.5,1107.4,1106.8,1121.2,1121.8,1138.7,1148.7,1145.3,1115.1,1130.9,1134.7,1125,1138.3,1096.6,1102.9,953.5,1057.3,1096.4,1079.4,1116.8,1143.7,1179.1,1107.6,1100.9,1069.8,1146.4,1101,1147,1126.2,1162.4,1163.3,1172.7,1133.1,1120.3,1135.3,1133.7,1143.6,1103.7,1063.2,1020,1058.4,1033.2,1074.7,1088.5,1105.5,1118.9,1166.6,1153.1,1173.9,1165.5,1100.6,1117.8,1153,1158.2,1164.3,1165.4,1160.6,1157.5,1138.3,1169.4,1125.8,1117.5,1136.5,1109.7,1034.9,1075.3,1121.7,1117.9,1104.7,1131.5,1146.3,1151.6,1154.4,1149.2,1152.1,1098,1132.7,1142.3,1137.3,1151.3,1145.2,1138,1135.9,1142.2,1127,1150.2,1056.1,1001.8,1098.9,1097.9,1131.6,1075,1120,1177.3,1162.2,1166.6,1180.7,1094.4,1149.2,1127,1145.1,1147.2,1153.1,1167.9,1144,1129.6,1143.3,1128.2,1129.4,1137.3,1124,1127.7,1049,1127.3,1054.8,1057.2,1180.1,1122.6,1128.3,1135.8,1131.9,1171.4,1142.5,1170.9,1127.2,1172.3,1164.5,1133.4,1148,1160.4,1173.2,1143.4]}]
var labels = []
var days = [
'Su',
'M',
'Tu',
'W',
'Th',
'F',
'Sa'
]
trips[0].data.forEach((t,i) => {
var d = days[Math.floor(i / 24)]
var h = ((i % 24) + 1)
if(h > 12) {
h = h - 12
h += 'pm'
} else {
h += 'am'
}
labels.push(d + ' ' + h)
})
for (trip of trips) {
var max = 0
trip.data.forEach(d => {
if(d > max) max = d
})
div = document.createElement('div');
div.setAttribute("id", trip.name+'-div');
div.setAttribute("class", 'container');
ctx = document.createElement('canvas');
ctx.setAttribute("id", trip.name);
div.appendChild(ctx)
document.body.appendChild(div)
new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: trip.name,
data: trip.data.map((y, x) => {
return {x:x, y:y}
}),
borderColor: '#f00',
borderWidth: 1,
fill: false
}
]
},
options: {
responsive:true,
maintainAspectRatio: false,
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Seconds'
},
ticks: {
beginAtZero: true,
max: max*1.3
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Hour of Week'
}
}]
}
}
});
}
</script>
</body>
</html>