-
Notifications
You must be signed in to change notification settings - Fork 178
/
index.html
498 lines (459 loc) · 26.6 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
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=768">
<title>Visualizing MBTA Data</title>
<meta name="description" content="An interactive exploration of ridership, congestion, and delay on Boston's subway system.">
<link rel="canonical" href="http://mbtaviz.github.io/" />
<!-- Open-graph metadata -->
<meta property="og:title" content="Visualizing MBTA Data"/>
<meta property="og:description" content="An interactive exploration of ridership, congestion, and delay on Boston's subway system.">
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://mbtaviz.github.io/"/>
<meta property="og:image" content="http://mbtaviz.github.io/media/preview-large.png"/>
<meta property="fb:admins" content="9318920"/>
<!-- Twitter card metadata -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@msb5014">
<meta name="twitter:title" content="Visualizing MBTA Data">
<meta name="twitter:description" content="An interactive exploration of ridership, congestion, and delay on Boston's subway system.">
<meta name="twitter:creator" content="@msb5014">
<meta name="twitter:image:src" content="http://mbtaviz.github.io/media/wide-preview-collage.png">
<!-- Sweeeet dev console branding -->
<meta name="signet:authors" content="Michael Barry, Brian Card">
<meta name="signet:links" content="http://github.com/mbtaviz, http://github.com/msbarry, http://github.com/bcard, http://twitter.com/msb5014">
<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-50914509-1', 'mbtaviz.github.io');
ga('send', 'pageview');
</script>
<link href='styles/main.css' rel='stylesheet' type='text/css'>
</head>
<body>
<!--[if lt IE 9]>
<div class="container">
<p>
You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to view this visualization the way it was intended. A picture of this visualization rendered in a modern browser is shown below.
</p>
</div>
<div class="text-center">
<img src="ie.png">
</div>
<![endif]-->
<!--[if gte IE 9]><!-->
<!-- Header -->
<div class="full-width header">
<div class="full-width header-inner">
<div class="container">
<div class="title col-sm-8">
<h1>Visualizing MBTA Data</h1>
<h2>An interactive exploration of Boston's subway system</h2>
<p class="authors">
Mike Barry and Brian Card - June 10, 2014
</p>
</div>
<div class="graphic col-sm-4 pull-right">
</div>
</div>
</div>
<div class="container section-share text-right">
<iframe src="https://ghbtns.com/github-btn.html?user=mbtaviz&repo=mbtaviz.github.io&type=star&count=true" frameborder="0" scrolling="0" width="100" height="20" title="GitHub"></iframe>
</div>
</div>
<!-- Intro -->
<div class="full-width section-intro">
<div class="container">
<p>Boston’s Massachusetts Bay Transit Authority (MBTA) operates the 4th busiest subway system in the U.S. after New York, Washington, and Chicago. If you live in or around the city you have probably ridden on it. The MBTA recently began publishing substantial amount of subway data through its public APIs. They provide the full schedule in General Transit Feed Specification (GTFS) format which powers Google’s transit directions. They also publish realtime train locations for the Red, Orange, Blue, and Green lines. The following visualizations use data captured from these feeds for the entire month of February, 2014. <a href="http://mbtaviz.github.io/green-line-release" target="_blank">Green Line data became available</a> in October, 2014 so is not shown here. Also, working with the MBTA, we were able to acquire per-minute entry and exit counts at each station measured at the turnstiles used for payment.</p>
<p>We attempt to present this information to help people in Boston better understand the trains, how people use the trains, and how the people and trains interact with each other.</p>
</div>
</div>
<!-- The Trains -->
<div class="full-width section-trains">
<div class="container">
<h3>
<a href="#trains" class="anchor">
<span class="glyphicon glyphicon-link"></span>
</a>
The Trains
</h3>
<div class="row">
<div class="col-sm-7 col-lg-8">
<p>In a typical weekday, trains make approximately 1150 trips on the red, orange, and blue lines starting at 5AM and continuing through 1AM the next morning. On Saturdays trains make 870 trips and on Sundays they make 760.</p>
<p>To better understand how the trains operate on a typical day, below are all trips that trains took on the red, orange, and blue lines on Monday February 3 2014. Each vertical line represents a station, and time extends from top to bottom. Steeper lines indicate slower trains. This visualization was first used by Étienne-Jules Marey to visualize train schedules and is typically called a “Marey Diagram.”</p>
</div>
<div class="table-inset col-sm-5 col-lg-4">
<div class="table-caption">Average Number of Trips per Day</div>
<table class="table table-condensed table-hover">
<thead>
<tr><th></th><th class="bottom-border">Weekdays</th><th class="bottom-border">Saturdays</th><th class="bottom-border">Sundays</th></tr>
</thead>
<tbody>
<tr><td>Red</td><td>450</td><td>350</td><td>300</td></tr>
<tr><td>Orange</td><td>320</td><td>260</td><td>220</td></tr>
<tr class="bottom-border"><td>Blue</td><td>380</td><td>260</td><td>240</td></tr>
</tbody>
<tfoot>
<tr><td>Total</td><td><strong>1150</strong></td><td><strong>870</strong></td><td><strong>760</strong></td></tr>
</tfoot>
</table>
</div>
</div>
</div>
<!-- Marey -->
<div class="full-width marey-container loading">
<div class="container text-center">
<h4>Subway Trips on Monday February 3, 2014</h4>
</div>
<!-- The map and description on the left side -->
<div class="fixed-container">
<div class="fixed-left" data-top="100">
<div class="side-map">
</div>
<div class="side-caption">
<p>Locations of each train on the <a href="#" data-line="red" class="hover-link highlight">red</a>, <a href="#" data-line="blue" class="hover-link highlight">blue</a>, and <a href="#" data-line="orange" class="hover-link highlight">orange</a> lines at <span class="marey-time"></span>. Hover over the diagram to the right to display trains at a different time.</p>
<p>Trains are on the right side of the track relative to the direction they are moving.</p>
<p>
See the
<a href="#" data-dest="marey-morning-rush" class="click-link scrollto">morning rush-hour</a>,
<a href="#" data-dest="marey-midday-lull" class="click-link scrollto">midday lull</a>,
<a href="#" data-dest="marey-evening-rush" class="click-link scrollto">afternoon rush-hour</a>, and the
<a href="#" data-dest="marey-evening-lull" class="click-link scrollto">evening lull</a>.
</p>
</div>
</div>
<!-- The multi-page Marey diagram -->
<div class="fixed-right">
<div class="inner">
<div class="marey"></div>
</div>
</div>
</div>
</div>
<!-- Lined-up Marey diagram -->
<div class="full-width lined-up-marey-container">
<div class="container">
<p>
To better compare the individual trips on this day, the visualization below shows all of the trips from the above diagram juxtaposed with the the starting points lined up so you can see the range of fastest to slowest trips, as well as variation in trip times based on the time of day.
The trains slow down a little bit during the
<a href="#" data-lo="7" data-hi="10" class="hover-link lined-up-highlight">morning rush-hour</a>,
primarily on the outbound blue line. The
<a href="#" data-lo="16" data-hi="19" class="hover-link lined-up-highlight">afternoon rush-hour</a>
is by-far the worst time of day for the red line. The
<a href="#" data-lo="10" data-hi="16" class="hover-link lined-up-highlight">midday lull</a>
and
<a href="#" data-lo="19" data-hi="24" class="hover-link lined-up-highlight">evening lull</a>
are both fairly consistent. Hover over the time scale on the left to highlight trips during different parts of the day. Click on a line to see all at what time the train was at each stop.
</p>
<!-- Lined-up Marey -->
<div class="lined-up-marey"></div>
</div>
</div>
</div>
<!-- The People -->
<div class="full-width section-people loading">
<div class="container">
<h3>
<a href="#people" class="anchor">
<span class="glyphicon glyphicon-link"></span>
</a>
The People
</h3>
<p>In a typical weekday, 425,000 people enter a station along the red, orange, or blue lines. On weekends and holidays, that number drops to 200,000. The busiest day was Friday February 7 when 470,187 people entered the system.</p>
<p>
This heatmap shows the average number of people that
<a href="#" class="hover-link dim" data-dim="exits">enter</a>
and
<a href="#" class="hover-link dim" data-dim="entrances">exit</a>
stations along the red, orange, and blue line for every hour over the entire month based on records from turnstiles at each station. Each row represents one week. You can see weekends and weekdays with daily peaks at rush hour, as well as
<a href="#" class="hover-link highlight-total" data-highlight="holidays">a holiday</a>,
and
<a href="#" class="hover-link highlight-total" data-highlight="snow">two snow storms</a>.
Our exit data is less reliable since not all stations require that people exit through a turnstile.
</p>
<!-- Turnstile heatmap over the all stations -->
<div class="spacing">
<h4 class="text-center">Entrances and Exits from All Stations during February 2014</h4>
<div class="turnstile-total"></div>
<div class="turnstile key text-center"></div>
</div>
<p>
The table and map below breaks down February's turnstile entries and exits by station.
Hover over a row in the table to highlight the corresponding circle on the map, or vice-versa.
Click on a row in the table to show a detailed heatmap for the entrances to and exits from that station over the month.
Click and drag on several table rows to highlight a range of stations.
</p>
<p>
You can see the busiest stations are all along the Red Line.
<a href="#" class="click-link highlight-stops" data-stops="Harvard">Harvard</a>
topped the list, followed close by
<a href="#" class="click-link highlight-stops" data-stops="South Station">South Station</a>
, and then
<a href="#" class="click-link highlight-stops" data-stops="Downtown Crossing">Downtown Crossing</a>
. Next to each station are heatmaps showing
<a href="#" class="hover-link highlight" data-highlight="entrances">entrances</a>
and
<a href="#" class="hover-link highlight" data-highlight="exits">exits</a>
to each station per-hour for
<a href="#" class="hover-link highlight" data-highlight="weekday">weekdays</a>
and
<a href="#" class="hover-link highlight" data-highlight="offpeak">weekends/holidays</a>.
You can see that some stations are
<a href="#" class="click-link highlight-stops" data-stops="South Station,Downtown Crossing,Park Street,Back Bay,Kendall Square,State Street,Charles MGH,Ruggles,JFK/U Mass">work stations</a>
since their exits peak in the morning and entrances peak in the afternoon and that some stations are
<a href="#" class="click-link highlight-stops" data-stops="Forest Hills,Davis Square,Malden Center,Maverick,Sullivan Square,Alewife,Porter Square,Quincy Center,Wellington,North Quincy,Oak Grove">home stations</a>
since their entrances peak in the morning and exits peak in the afternoon. Some stations are just
<a href="#" class="click-link highlight-stops" data-stops="Harvard,North Station,Central Square">busy all the time</a>.
</p>
</div>
<!-- Turnstile summary table - map on the left, table on the right -->
<div class="turnstile-viz fixed-container spacing">
<h4 class="text-center">Entrances and Exits per Station during February 2014</h4>
<div class="fixed-left" data-top="0">
<div class="glyph clearfix"></div>
<div class="key circles clearfix"></div>
<div class="side-caption clearfix">
<p>
Each circle above and row in the table represent a station, hover over one to highlight the other.
Next to each station are heatmaps showing
<a href="#" class="hover-link highlight" data-highlight="entrances">entrances</a>
and
<a href="#" class="hover-link highlight" data-highlight="exits">exits</a>
to each station per-hour for
<a href="#" class="hover-link highlight" data-highlight="weekday">weekdays</a>
and
<a href="#" class="hover-link highlight" data-highlight="offpeak">weekends/holidays</a>.
</p>
<p>
Notice
<a href="#" class="click-link highlight-stops" data-stops="South Station,Downtown Crossing,Park Street,Back Bay,Kendall Square,State Street,Charles MGH,Ruggles,JFK/U Mass">work stations</a>
with exit peaks in the morning and entrances peak in the afternoon,
<a href="#" class="click-link highlight-stops" data-stops="Forest Hills,Davis Square,Malden Center,Maverick,Sullivan Square,Alewife,Porter Square,Quincy Center,Wellington,North Quincy,Oak Grove">home stations</a>
with entrance peaks in the morning and exit peaks in the afternoon, and the stations that are just
<a href="#" class="click-link highlight-stops" data-stops="Harvard,North Station,Central Square">busy all the time</a>.
</p>
</div>
</div>
<div class="fixed-right">
<div class="inner">
<div class="turnstile-table"></div>
<div class="turnstile-all-key key"></div>
</div>
</div>
</div>
</div>
<!-- Congestions and Delay -->
<div class="full-width section-people-trains">
<div class="container">
<h3>
<a href="#interaction" class="anchor">
<span class="glyphicon glyphicon-link"></span>
</a>
How People and Trains Affect Each Other
</h3>
<p>When you look back at the Marey diagram, the slope of each line tells you how fast a train is going and the time it takes to get between stations. When all of the start and stop times are lined up you can see a drastic variation in the time it takes to get between stops throughout the day. If you have ever ridden the subway during rush hour then you have experienced what the steep lines in the Marey diagram feel like first-hand.</p>
<p>What causes these delays? It’s hard to know for sure, but it appears that number of people riding the subway is a factor.</p>
</div>
<div class="interaction-all">
<div class="container text-center">
<h4>One Week of Congestion and Delay</h4>
</div>
<div class="loading"></div>
<!-- The congestion and delay visualization - glyph on the left, horizon/color bands on the right -->
<div class="viz clearfix">
<div class="left clearfix">
<div class="glyph clearfix"></div>
<div class="key clearfix"></div>
</div>
<div class="right clearfix">
</div>
</div>
<div class="container">
<p>
This visualization shows congestion and delay on the red, blue, and orange lines for the first full week in February. The <a href="#" class="hover-link highlight" data-highlight=".horizon">gray bands</a> show the total number of entries into the all stations per minute over time for each day of the week. The <a href="#" class="hover-link highlight" data-highlight=".delay-rect">colored bands</a> below indicate whether the trains are running <span class="legend-fast">faster</span> or <span class="legend-slow">slower</span> than normal.
</p>
<p>
The <a href="#" class="hover-link highlight" data-highlight=".breathing-glyph">map</a> shows the congestion and delay across the system at a time when you hover over the chart on the right. The thickness of each line at a stop indicates number of entries per minute at that stop, and the color on the right-hand side of a track indicates delay in that direction using the same scale as the <a href="#" class="hover-link highlight" data-highlight=".delay-rect">colored bands</a>.
</p>
<p>
You can see basketball games letting out on
<a href="#" class="hover-link set-time" data-day="1" data-time="11:16 pm">Monday</a>,
<a href="#" class="hover-link set-time" data-day="2" data-time="10:04 pm">Tuesday</a>,
<a href="#" class="hover-link set-time" data-day="5" data-time="10:10 pm">Friday</a>, and
<a href="#" class="hover-link set-time" data-day="0" data-time="8:34 pm">Sunday</a>.
You can also tell that it snowed on
<a href="#" class="hover-link highlight" data-highlight=".day-3">Wednesday</a>
and people stayed home, especially when you compare how light
<a href="#" class="hover-link set-time" data-day="3" data-time="5:24 pm">Wednesday evening's rush hour</a>
was compared to
<a href="#" class="hover-link set-time" data-day="4" data-time="5:24 pm">Thursday evening's rush hour</a>.
</p>
</div>
</div>
</div>
<!-- Pick Two Stops -->
<div class="full-width section-pick-two">
<div class="container">
<h3>
<a href="#your-commute" class="anchor">
<span class="glyphicon glyphicon-link"></span>
</a>
Your Commute
</h3>
<p>
How do all of these factors affect your commute?
Click and drag on the
<a href="#" data-highlight=".map" class="hover-link pick-two-highlight">map</a>
from a starting station to an ending station to see a detailed breakdown of how long that trip takes at different points during a typical workday.
The
<a href="#" data-highlight=".circle.top" class="hover-link pick-two-highlight">points on top</a>
show all of the trip durations for a given starting time from the start to destination and the
<a href="#" data-highlight=".circle.bottom" class="hover-link pick-two-highlight">points on bottom</a>
show all of the times between when when trains leave the start station going to the destination station.
The time between trains is the longest you would possibly need to wait if you arrived just as the previous train was leaving.
The
<a href="#" data-highlight=".top.range" class="hover-link pick-two-highlight">blue band</a>
excludes the shortest and longest 10% of all transit times, leaving behind the most-likely 80% range and the
<a href="#" data-highlight=".bottom.range" class="hover-link pick-two-highlight">orange band</a>
does the same for wait times between trains.
The
<a href="#" data-highlight=".p50" class="hover-link pick-two-highlight">dark lines</a>
show the middle point where 50% of the time wait/transit times are higher and 50% of the time they are lower.
</p>
</div>
<div class="viz clearfix">
<div class="left picker clearfix">
<div class="map dimmable clearfix"></div>
<div class="details dimmable clearfix"></div>
<div class="loading clearfix"></div>
<div class="key dimmable clearfix">
<span class="hide-on-ios">Drag from a starting station to an ending station to see how long the trip takes over time in the chart.</span>
<span class="only-ios">Click on a starting station then an ending station to see how long the trip takes over time in the chart.</span>
</div>
</div>
<div class="right pick-two clearfix">
<div class="inner-viz">
</div>
<div class="key dimmable clearfix">
</div>
</div>
</div>
<div class="container">
<p>
In general, delays go up during rush hour but trains come more frequently, for example if you look at
<a href="#" data-start="place-sstat" data-end="place-knncl" class="click-link pick-two-choose">South Station to Kendall/MIT</a>
you will notice that the
<a href="#" data-highlight=".circle.top, .top.range" class="hover-link pick-two-highlight">transit times</a>
go up as the
<a href="#" data-highlight=".circle.bottom, .bottom.range" class="hover-link pick-two-highlight">wait times</a>
go down.
If you drag across the chart, the paragraph below will tell you that these effects roughly balance eachother out and the most-likely trip duration (half the normal time between trains plus total transit time) stays constant around 10-12 minutes.
It is also interesting to note that transit times on the blue line, for example
<a href="#" data-start="place-state" data-end="place-wondl" class="click-link pick-two-choose">State St. to Wonderland</a>
are much less variable than the red line.
Orange line trips like
<a href="#" data-start="place-dwnxg" data-end="place-forhl" class="click-link pick-two-choose">Downtown Crossing to Forest Hills</a>
are less variable in transit time - but trains come much less frequently and reliably.
</p>
</div>
</div>
<!-- The Conclusion -->
<div class="full-width section-conclusion">
<div class="container">
<h3>
<a href="#summary" class="anchor">
<span class="glyphicon glyphicon-link"></span>
</a>
Summary
</h3>
<p>Through publicly available data, we have the tools to understand the subway system better than we ever have before. We have seen how the system operates on a daily basis, how people use the system, how that affects the trains and also how this ties back to your daily commute. To see a live version of this data, check out MBTA Trains for <a href="https://subway.mbtatrains.com" target="_blank">real-time subway delays</a> and <a href="https://mbtatrains.com" target="_blank">real-time commuter rail delays</a>.
</div>
</div>
<!-- Credits -->
<div class="full-width section-credits">
<div class="container">
<h3>
<a href="#credits" class="anchor">
<span class="glyphicon glyphicon-link"></span>
</a>
Credits
</h3>
<p>
This project was created by Michael Barry and Brian Card for a graduate course in Data Visualization at
<a href="http://www.wpi.edu/" target="_blank">WPI</a>
taught by
<a href="http://web.cs.wpi.edu/~matt/" target="_blank">Matthew Ward</a>.
Several open-source projects were used under the
<a href="http://opensource.org/licenses/MIT" target="_blank">MIT License</a>
including
<a href="http://d3js.org/" target="_blank">D3</a>,
<a href="http://getbootstrap.com" target="_blank">Bootstrap</a>,
<a href="http://glyphicons.com/" target="_blank">Glyphicons</a>,
<a href="http://underscorejs.org/" target="_blank">Underscore</a>,
<a href="http://momentjs.com/" target="_blank">Moment.js</a>,
<a href="https://github.com/paulmillr/es6-shim/" target="_blank">es6-shim</a>, and
<a href="http://labratrevenge.com/d3-tip/" target="_blank">D3-tip</a>.
Data courtesy of the
<a href="http://www.mbta.com" target="_blank">MBTA</a>
and their
<a href="http://www.mbta.com/rider_tools/developers/" target="_blank">Developer Relations Program</a>.
</p>
<p>
Much of the inspiration for this report comes from Bret Victor's
<a href="http://worrydream.com/LadderOfAbstraction/" target="_blank">Ladder of Abstraction</a>
and the works of
<a href="http://www.edwardtufte.com/tufte/" target="_blank">Edward Tufte</a>
and
<a href="http://en.wikipedia.org/wiki/%C3%89tienne-Jules_Marey" target="_blank">Étienne-Jules Marey</a>.
</p>
</div>
</div>
<!-- Source Code -->
<div class="full-width section-source-code">
<div class="container">
<h3>
<a href="#source-code" class="anchor">
<span class="glyphicon glyphicon-link"></span>
</a>
Source Code
</h3>
<p>
The source code and raw data are available
<a href="https://github.com/mbtaviz/mbtaviz.github.io/" target="_blank">on github</a>
and described in this
<a href="http://mbtaviz.wordpress.com/2014/07/25/website-source-announcement" target="_blank">blog post</a>.
</p>
<p>
For any questions, please reach out to
<a href="https://twitter.com/msb5014" target="_blank">Michael Barry</a>
or
<a href="https://twitter.com/bmcard" target="_blank">Brian Card</a>
on Twitter.
</p>
</div>
</div>
<!-- 3rd Party Dependencies -->
<script src="bower_components/es6-shim/es6-shim.min.js"></script>
<script src="bower_components/underscore/underscore.min.js"></script>
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/d3/d3.min.js"></script>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<!-- D3 Plugins -->
<script src="scripts/horizon.js"></script>
<script src="bower_components/d3-tip/index.js"></script>
<!-- Custom Code -->
<script src="scripts/common.js"></script>
<script src="scripts/files.js"></script>
<script src="scripts/dataloader.js"></script>
<script src="scripts/fixed.js"></script>
<script src="scripts/header.js"></script>
<script src="scripts/the-trains.js"></script>
<script src="scripts/the-people.js"></script>
<script src="scripts/congestion-and-delay.js"></script>
<script src="scripts/your-commute.js"></script>
<!--<![endif]-->
</body>
</html>