-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
430 lines (379 loc) · 26 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title>Hubway</title>
<meta property="og:description" content="As engineers and scientists with a keen interest in civic responsibility and public policy, we set out to find the unusual and the extraordinary in the last six years of Hubway data.">
<meta property="og:title" content="The Extraordinary in the Hubway Data">
<meta property="og:url" content="https://hubway.countlove.org/">
<meta property="og:image" content="https://hubway.countlove.org/img/opengraph.png">
<meta property="og:type" content="website">
<link rel="icon" href="img/favicon.ico">
<link rel="icon" href="img/favicon-196x196.png" type="image/png" size="196x196">
<link rel="stylesheet" href="external/bootstrap/3.3.7/bootstrap.css" type="text/css">
<link rel="stylesheet" href="external/leaflet/1.0.3/leaflet.css" type="text/css">
<link rel="stylesheet" href="story/story.css" type="text/css">
<!-- libraries for page-->
<script src="external/jquery/2.1.1/jquery.js"></script>
<script src="external/jquery.easing/1.4.0/jquery.easing.js"></script>
<script src="external/bootstrap/3.3.7/bootstrap.js"></script>
<script src="external/leaflet/1.0.3/leaflet.js"></script>
<!-- for transit -->
<script src="external/d3/4.6.0/d3-array.v1.js"></script>
<script src="external/d3/4.6.0/d3-collection.v1.js"></script>
<script src="external/d3/4.6.0/d3-color.v1.js"></script>
<script src="external/d3/4.6.0/d3-format.v1.js"></script>
<script src="external/d3/4.6.0/d3-interpolate.v1.js"></script>
<script src="external/d3/4.6.0/d3-scale.v1.js"></script>
<script src="external/d3/4.6.0/d3-geo.v1.js"></script>
<script src="external/d3-contour/d3-contour.js"></script>
<script src="external/leaflet-curve/leaflet.curve.js"></script>
<!-- for exploration -->
<script src="external/jdataview/2.5.0/jdataview.js"></script>
<script src="external/jbinary/2.1.3/jbinary.js"></script>
<!-- local javascript for transit -->
<script src="directions/transit-layer.js"></script>
<!-- for explore -->
<script src="datasource.js"></script>
<script src="explore.js"></script>
<!-- for page -->
<script src="story/story.js"></script>
<script src="story/story-data.js"></script>
</head>
<body>
<div id="map"></div>
<div class="sidebar" id="sidebar-story">
<div id="story">
<div class="story-container">
<div class="story-pane" data-pane="intro" data-title="What is extraordinary?">
<div class="story-body">
<header>
<div class="logo"></div>
<h1>2017 Hubway Challenge</h1>
</header>
<p>As engineers and scientists with a keen interest in civic responsibility and public policy, we
set out to find the unusual and the extraordinary in the last six years of Hubway data.
With the curiosity of five-year olds, we asked "Where?" and “Why?” and "How?" at every turn of
our exploration. To aid our investigation, we built several tools to query the full
dataset and visualize results in realtime, and we've made these tools available
for others to conduct their own explorations. Please join us on our adventure
through five million Hubway trips as we share what we've asked, what we've learned, and what we've built.</p>
</div>
</div>
<div class="story-pane" data-pane="under-util-1">
<h2>Searching for outliers</h2>
<div class="story-body">
<p>To find interesting policy and operation questions, we focused on searching for outliers.
For example, plotting total
<a data-story-alt="default">starts</a> and <a data-story-alt="stops">stops</a>
for each station confirms an intuitive result: stations near the center of the Hubway network
typically have the highest number of trips, and stations near the edge of the Hubway network tend
to have the fewest. We wondered if any outlier stations break this pattern: are there stations
in the middle of the network with unusually low usage? If so, why?</p>
</div>
</div>
<div class="story-pane" data-pane="under-util-2">
<h2>Do riders underutilize particular stations inside the city?</h2>
<div class="story-body">
<p>To answer this question, we measured each station’s “utilization” by summing its total
trip starts and ends over a fixed time period and then dividing by the total
number of docks and hours.</p>
<p>Then, we searched for stations with unusually small “utilization” rates by
searching for small circles surrounded by large circles. Grouping (clustering)
stations together by their utilization rates and assigning distinct colors
to each group made it easier to find stations with unusual usage. Considering
only stations that have been in operation for at least one year, we found the
following underutilized stations:</p>
<ol>
<li><a data-story-alt="danaPark">Dana Park</a>, in Cambridgeport;</li>
<li><a data-story-alt="eastCambridge">Binney St./Sixth St and Kendall St.</a> in East Cambridge; and</li>
<li><a data-story-alt="brookline">Brookline at Burlington St.</a>, near Fenway.</li>
</ol>
</div>
</div>
<div class="story-pane" data-pane="under-util-dana-park">
<h2>Underutilization: Dana Park, Cambridgeport</h2>
<div class="story-body">
<p>Relative to other Hubway stations in Cambridgeport and Central Square,
the <a data-story-alt="danaParkUtilization">utilization rate for Dana Park</a>
seems unexpectedly low—especially after
taking into consideration the fact that <a data-story-alt="default">transit by Hubway in this area
is often the fastest mode of transportation</a>.</p>
<p>To explore how other modes of transportation compare,
we estimated* average commute times based on the Hubway data and combined these
estimates with transit information from the MBTA and an average walking speed of
three miles an hour to determine the fastest mode of transportation from any
arbitrary start location to any arbitrary end location in the greater Boston area.
From Cambridgeport, Hubway often is the fastest mode of transportation to Somerville,
Cambridge, Boston, and Brookline. Only a few distant destinations, like Chelsea and East Boston,
are faster via subway. Given this time advantage, why does the Dana Park station
seem to be underutilized relative to nearby stations?</p>
<p>*Our model is pessimistic and always assumes that someone
shows up halfway between buses during normal (median) operating schedules. During peak-time travel times
or with well-planned trips, transit rides can still be more convenient.</p>
</div>
</div>
<div class="story-pane" data-pane="under-util-east-cambridge">
<h2>Underutilization: East Cambridge</h2>
<div class="story-body">
<p>East Cambridge exhibits similar trends to Cambridgeport: <a data-story-alt="default">it is relatively
underserved by public transportation based on commute times</a>, and Hubway often is the fastest mode of transit.
Given this time difference, why are the Kendall area stations
<a data-story-alt="eastCambridgeUtilization">near Binney St. underutilized
relative to other nearby stations</a>?</p>
</div>
</div>
<div class="story-pane" data-pane="under-util-brookline">
<h2>Underutilization: Brookline at Burlington St., Boston</h2>
<div class="story-body">
<p>In Boston, the Brookline at Burlington St. station near Fenway also appears to
be <a data-story-alt="default">underutilized</a> relative to nearby stations.
This particular station also has an additional unusual
trait: when riders do use this station, <a data-story-alt="popular">they tend to
bike to distant stops</a>. Perhaps the location of this
station on a dead-end street makes it inconvenient to access or difficult to discover, and
the primary users are a small but loyal group of Hubway commuters?</p>
</div>
</div>
<div class="story-pane" data-pane="under-util-boston">
<h2>Underutilization: Winter Availability in Boston</h2>
<div class="story-body">
<p>In addition to searching for stations that users seem to visit
less than one might expect, given that station's dock size,
analyzing utilization rates also led us to wonder why Boston shuts down some of its Hubway stations
in the winter when Cambridge does not. <a data-story-alt="default">Utilization rates for Cambridge and Boston</a>
are fairly similar. Although <a data-story-alt="winter">winter utilization</a> is the lowest of any time
of the year, riders still use Hubway throughout the winter in Cambridge, and
Boston riders might do the same if they had the option. Why not keep the Boston stations open?</p>
</div>
</div>
<div class="story-pane" data-pane="potential-new-station-lead">
<h2>Outlier Regions: Why Not Put a Station Here?</h2>
<div class="story-body">
<p>While combing through the Hubway/MBTA travel time data, we
also wondered if any communities might
benefit from the installation of a new Hubway station. For example, because there are relatively few
stations in East Somerville, <a data-story-alt="default">walking currently is the fastest way to
travel from Inman Square to large parts of East Somerville</a>. Are there other areas where walking
is often the fastest mode of travel? Could these areas benefit from a Hubway station?</p>
<p>Based on local commute times, we identified at least two potential
candidates that might merit further consideration for new stations:
<a data-story-alt="east-somerville">East Somerville near Winter Hill</a> and
<a data-story-alt="brookline">Brookline along Kent Street</a>.</p>
</div>
</div>
<div class="story-pane" data-pane="funFacts">
<h2>Fun Facts</h2>
<div class="story-body">
<p>Although we've asked (hopefully interesting and useful) questions about
potentially underutilized stations and underserved areas, we've left a lot to explore!
Below, we've included some of the fun facts
that we stumbled upon during our adventure to find the extraordinary in the Hubway data.
Read on to learn what we've found, or <a href="#" data-story-mode="explore">conduct your own
exploration</a>!</p>
</div>
</div>
<div class="story-pane" data-pane="funFacts-city-struct">
<h2>Fun Facts: The Greater Boston Area in Transit Maps</h2>
<div class="story-body">
<ul>
<li>See the <a data-story-alt="default">city structure</a> spiral out from South Station
as the fastest mode of transport transitions from walking to Hubway to the MBTA, and watch
the tentacle-like, far-reaching bus routes of the MBTA create fast commuting corridors
into the suburbs starting from <a data-story-alt="harvard">Harvard Square</a>.
</li>
<li>Inside Boston, travel by Hubway shines when starting from <a data-story-alt="fenway">Fenway</a>
and <a data-story-alt="backBay">Back Bay</a>:
huge swathes of the city and almost all of Cambridge are faster to access by Hubway than
by walking or public transit, if you <a data-story-alt="memberPace">
bike at the pace of the average Hubway member</a>. (<a data-story-alt="casualPace">Casual
members bike considerably slower...</a>)</li></ul>
</div>
</div>
<div class="story-pane" data-pane="funFacts-city-popular">
<h2>Fun Facts: Where do Hubway riders bike to?</h2>
<div class="story-body">
<ul>
<li><a data-story-alt="default">This map shows the minimum distance traveled from every station</a>.
It might be socially strange to take a bus from one stop to the next, but the same cannot be said
for Hubway!</li>
<li>At schools such as <a data-story-alt="mit">MIT</a> and
<a data-story-alt="tufts">Tufts</a>, Hubway users frequently ride
from stop to stop to move across the campus.</li>
<li>Everything that anyone needs in Cambridge can be found in Cambridge, or Boston. Mapping the
top five routes from each station reveals that
<a data-story-alt="cambridge">Cambridge bikers don't often bike into Somerville</a>.</li>
<li>Hubway connects <a data-story-alt="fortPoint">Fort Point to the rest of downtown Boston</a>: every station in Fort Point
has at least one popular route on the other side the water, either in the Financial District
or the North End.</li>
<li><a data-story-alt="touristStops">Casual Hubway users—most likely tourists—love
to visit MIT, Harvard,
The Esplanade, Back Bay, the North End, and Newbury</a>. Based on the
top five stops for every station, <a data-story-alt="touristPopular">casual users</a>
also tend to return bikes to the same docks that they
borrowed from more frequently than <a data-story-alt="memberPopular">regular members</a>.</li>
</ul>
</div>
</div>
<div class="story-pane" data-pane="funFacts-work-life">
<h2>Fun Facts: Work-Life and Gender Balance</h2>
<div class="story-body">
<ul>
<li>Hubway users travel in swarms to <a data-story-alt="default">Downtown Boston and the Kendall area
in the morning</a> (presumably for work). In the evening, riders
frequently travel to the <a data-story-alt="evening">MIT/Central/Harvard</a> area, but
destinations for the evening commute are more dispersed than the morning commute.</li>
<li>In general, <a data-story-alt="menAll">men</a> ride Hubway three times more frequently
than <a data-story-alt="womenAll">women</a>—except during the morning commute, where
<a data-story-alt="menMorning">men</a> outnumber
<a data-story-alt="womenMorning">women</a> five times to one.</li>
</ul>
</div>
</div>
<div class="story-pane" data-pane="conclusion">
<h2>Your turn!</h2>
<div class="story-body">
All of the maps that you've seen and all of our findings can be
recreated with our exploration tools! <a href="#" data-story-mode="explore">
Start your own adventure with all six years and five million trips of Hubway data</a>.
</div>
</div>
</div>
</div>
</div>
<div class="sidebar" id="sidebar-tools" style="display:none;">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#tool-explore" role="tab" data-toggle="tab" data-story-layer="explore">Trips</a></li>
<li role="presentation"><a href="#tool-transit" role="tab" data-toggle="tab" data-story-layer="transit">Transit</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="tool-explore">
<!-- start explore interface -->
<div class="filter" role="button">
<button class="btn btn-default btn-sm js_query" id="js_stations_reset">Reset</button>
<div class="btn-group" role="button">
<button class="btn btn-default btn-sm btn-group dropdown-toggle" type="button" id="js_stations" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Stations
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" aria-labelledby="dropdownMenu1" id="js_stationList"></ul>
</div>
<div class="btn-group" role="button">
<button class="btn btn-default btn-sm btn-group dropdown-toggle" type="button" id="js_kMeans" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" title="group similar results by color">
Clusters
<span class="caret"></span>
</button>
<ul class="dropdown-menu scrollable-menu" aria-labelledby="dropdownMenu2" id="js_kMeansGroups"></ul>
</div>
<div class="btn-group">
<button class="btn btn-default btn-sm btn-group" id="js_markerSize_minus" title="decrease marker size">-</button>
<button class="btn btn-default btn-sm btn-group" id="js_markerSize_plus" title="increase marker size">+</button>
</div>
</div>
<div class="filter" id="js_queries"></div>
<div class="filter" id="js_filters"></div>
<div class="filter">
<div id="js_markerSlider" class="filter-slider"></div>
</div>
<hr>
<div class="filter">
<div id="js_description"></div>
</div>
<!-- end explore interface -->
</div>
<div role="tabpanel" class="tab-pane active" id="tool-transit">
<!-- start transit interface -->
<p>Click where you will be starting your trip, and see the best transit mode and travel times.</p>
<form>
<div id="transit-source">
<div class="btn-group" role="group" aria-label="Mode to display on the map.">
<button type="button" class="btn btn-default btn-sm active" data-source="data/directions-s.json">City Center</button>
<button type="button" class="btn btn-default btn-sm" data-source="data/directions-l.json">Metro Area</button>
</div>
</div>
<div id="map-mode">
<div class="btn-group" role="group" aria-label="Mode to display on the map.">
<button type="button" class="btn btn-default btn-sm active" data-mode="mode">Fastest Transit</button>
<button type="button" class="btn btn-default btn-sm" data-mode="time">Travel Time</button>
</div>
</div>
<div id="transit-modes">
<strong>Include Transit Modes</strong>
<div class="checkbox">
<label><input type="checkbox" value="bike" checked> Hubway</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="mbta_subway" checked> Subway</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="mbta_bus" checked> Bus</label>
</div>
<div class="checkbox">
<label><input type="checkbox" value="mbta_commuter" checked> Commuter Line</label>
</div>
</div>
<div id="bike-speed">
<p><strong>Bike Speed</strong> Time between bike stations is estimated based on Hubway's data, but you can fine tune which data to use.</p>
<div class="radio">
<label><input type="radio" name="bikespeed" value="0" checked> Average Hubway member (~8.6 miles per hour)</label>
</div>
<div class="radio">
<label><input type="radio" name="bikespeed" value="1"> Average Hubway casual user (~6.8 miles per hour)</label>
</div>
<div class="radio">
<label><input type="radio" name="bikespeed" value="2"> Google estimated bike time (~9.4 miles per hour)</label>
</div>
</div>
</form>
<!-- end transit interface -->
</div>
</div>
</div>
<div id="sidebar-info">
<div class="visible-exploring">
<a href="#" data-story-mode="story" class="btn btn-primary btn-lg btn-block">Read Our Findings</a>
</div>
<div class="hidden-exploring">
<a href="#" data-story-mode="explore" class="btn btn-warning btn-lg btn-block">Explore The Data</a>
</div>
<div class="details">
<a href="#" data-toggle="modal" data-target="#about-modal">About</a> •
By <a href="https://www.tommyleung.com/about.htm" class="swap">Tommy</a> & <a href="https://www.nathanntg.com/" class="swap">Nathan</a>.
</div>
</div>
<div class="modal fade" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="about-modal-label">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="about-modal-label">About</h4>
</div>
<div class="modal-body">
<p>This page was created by <a href="https://www.tommyleung.com/about.htm" target="_blank" class="swap">Tommy Leung</a> and
<a href="https://www.nathanntg.com/" target="_blank" class="swap">Nathan Perkins</a> as a submission
to the <a href="https://www.thehubway.com/datachallenge" target="_blank">Hubway Data Challenge</a>.
</p>
<p><strong>Data cleaning.</strong> The Hubway data format has evolved over time, as have the stations.
We standardized station identifiers, tracked down some missing stations, normalized member and
gender fields and standardized the units for trip duration.</p>
<p><strong>Additional data.</strong> In addition to the Hubway trip information, we used data from the
<a href="http://mbta.com/" target="_blank">MBTA</a> for transit information, as well as map data from
<a href="https://mapzen.com" target="_blank">Mapzen</a> to identify land and water boundaries.</p>
<p><strong>Preprocessing.</strong> In order to provide a web interface to explore the over five million
Hubway trips, we built a custom binary format. Through differential, variable length encoding, all
trip data can be represented in approximately 10MB. We also processed the MBTA schedule information
to identify time between stations and bus stops, as well as trip frequency.</p>
<p><strong>Acknowledgements.</strong> This project has benefited from a number of libraries, open source
resources and guides. Thanks to <a href="http://leafletjs.com" target="_blank">Leaflet</a> for a
powerful and customizable mapping engine, <a href="https://carto.com" target="_blank">CARTO</a> for
beautiful map tiles, <a href="https://d3js.org/" target="_blank">D3</a> for drawing tools, and
<a href="http://jdataview.github.io/jDataView/" target="_blank">jDataView</a> &
<a href="http://jdataview.github.io/jBinary/" target="_blank">jBinary</a> for simplifying access to
binary data in JavaScript.</p>
</div>
</div>
</div>
</div>
</body>
</html>