-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
188 lines (165 loc) · 11.7 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
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="viewport" content="width=768">
<title>MBTA Releases Green Line Data</title>
<meta name="description" content="An interactive look at the first day of newly released Green Line location data, part of Boston's subway system the T, made available by the MBTA.">
<link rel="canonical" href="http://mbtaviz.github.io/green-line-release/" />
<!-- Open-graph metadata -->
<meta property="og:title" content="MBTA Releases Green Line Data"/>
<meta property="og:description" content="An interactive look at the first day of newly released Green Line location data made available by the MBTA.">
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://mbtaviz.github.io/green-line-release/"/>
<meta property="og:image" content="http://mbtaviz.github.io/green-line-release/media/preview-large-square.png"/>
<meta property="fb:admins" content="9318920"/>
<!-- Twitter card metadata -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="MBTA Releases Green Line Data">
<meta name="twitter:description" content="An interactive look at the first day of newly released Green Line location data made available by the MBTA.">
<meta name="twitter:site" content="@bmcard">
<meta name="twitter:creator" content="@msb5014">
<meta name="twitter:image:src" content="http://mbtaviz.github.io/green-line-release/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/green-line-release, http://github.com/msbarry, http://twitter.com/msb5014, http://github.com/bcard, http://twitter.com/bmcard">
<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="container">
<div class="title">
<h1>MBTA Releases Green Line Data</h1>
<p class="authors">
<a href="https://twitter.com/msb5014" target="_blank">Mike Barry</a>
and
<a href="https://twitter.com/bmcard" target="_blank">Brian Card</a>
- October 28, 2014
</p>
</div>
</div>
</div>
<!-- The Trains -->
<div class="full-width section-trains">
<div class="container">
<p>Boston’s Massachusetts Bay Transit Authority (MBTA) operates four main subway lines: Red, Orange, Blue, and Green. When we built <a href="http://mbtaviz.github.io/" target="_blank">Visualizing MBTA Data</a> in early 2014, realtime train location data was available for all but the Green Line. On October 23, 2014 the <a href="http://mbta.com/about_the_mbta/news_events/?id=6442453268" target="_blank"> MBTA began publishing this data</a>.</p>
<p>The other lines use a modified freight tracking system with periodic checkpoints to stop a train whenever it gets too close to next train. Since this system also relays checkpoint crossings back to the control center, it provided the infrastructure to track trains early on. The Green Line, however does not use such a system. The trains were not tracked and therefore no location data was available.</p>
<p>The MBTA has been outfitting the Green Line with GPS devices to track the trains while they are above ground and is now publishing this data for close to 98% of the trains to their public API. We collected the first several days of data and show it below in a visualization developed by Étienne-Jules Marey called a “time-space” or “Marey” diagram. Each vertical line represents a station, and time extends from top to bottom. Steeper lines indicate slower trains.</p>
<p>We attempt to shed light on the behavior of the Green Line using this newly released data. While some gaps in data are due to trains without tracking devices, we can still start to see patterns emerge. The Green Line appears to exhibit more consistent volatility than other lines, often due to outbound “clumping” which affects wait times in both directions. This “clumping” originates underground where we can't yet see the trains. The inbound D branch looks most reliable, and outbound B branch looks least reliable. On Friday, late-night T service takes passengers out of the city until 3 am. What else do you notice?</p>
</div>
<div class="loading-indicator">
</div>
<!-- Marey -->
<div class="full-width marey-container loading">
<!-- 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 Green Line's
<a href="#" data-line="green" class="hover-link highlight">main trunk</a>,
<a href="#" data-line="green-b" class="hover-link highlight">B branch</a>,
<a href="#" data-line="green-c" class="hover-link highlight">C branch</a>,
<a href="#" data-line="green-d" class="hover-link highlight">D branch</a>, and
<a href="#" data-line="green-e" class="hover-link highlight">E branch</a> at
<span class="marey-time"></span> on <span class="marey-date"></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>
Location data is only available when trains are above ground, which excludes the main trunk.
</p>
<p>
See the
<a href="#" data-dest="marey-start" class="click-link scrollto">first data</a> on Thursday and the
<a href="#" data-dest="marey-friday" class="click-link scrollto">morning rush-hour</a> and
<a href="#" data-dest="marey-latenight" class="click-link scrollto">late-night T service</a> on Friday.
</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 individual trips, the chart below shows all trips from the above diagram lined up at the first stations where GPS signals appear above ground. 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 are fastest during the <a href="#" data-lo="4" data-hi="8" class="hover-link lined-up-highlight">early morning</a> and slow down during the <a href="#" data-lo="16" data-hi="19" class="hover-link lined-up-highlight">afternoon rush-hour</a>. Trains are slightly faster in the <a href="#" data-lo="10" data-hi="16" class="hover-link lined-up-highlight">middle of the day</a> compared to the afternoon rush-hour, but the difference is not as drastic as the red line which can be seen in <a href="http://mbtaviz.github.io/#trains">Visualizing MBTA Data</a>.
Two trains move very slowly outbound on the D branch to pick up final passengers
<a href="#" data-lo="0" data-hi="1" class="hover-link lined-up-highlight">between midnight and 1 am</a>.
Apart from that, the D branch appears to have the most consistent travel times when compared to the others, despite covering a much longer distance.</p>
<p>You can see the variation in travel time by looking at how close the lines are together, notice that the trips in the D branch are more tightly clustered than the B branch for example from <a href="#" data-lo="10" data-hi="14" class="hover-link lined-up-highlight">late-morning to afternoon</a>.
Hover over the time scale on the left to highlight trips during different parts of the day. Click on a line to see what time the train was at each stop.
</p>
<!-- Lined-up Marey -->
<div class="lined-up-marey"></div>
</div>
</div>
<div class="container">
<p>Mike Barry and Brian Card are both part-time graduate students at <a href="http://www.wpi.edu/" target="_blank">WPI</a> and created <a href="http://mbtaviz.github.io/" target="_blank">Visualizing MBTA Data</a> as a course project in spring 2014. We built this weekend project as an add-on when Green Line data became available.</p>
<p>The source code is available on <a href="https://github.com/mbtaviz/green-line-release/" target="_blank">GitHub</a>. For any questions, please reach out to <a href="https://twitter.com/msb5014" target="_blank">Mike Barry</a> or <a href="https://twitter.com/bmcard" target="_blank">Brian Card</a> on Twitter.</p>
</div>
<div class="container section-share">
<div class="text-center">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<iframe src="http://ghbtns.com/github-btn.html?user=mbtaviz&repo=green-line-release&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="90px" height="20px" class="github-star pull-left"></iframe>
<a class="addthis_button_facebook_share" fb:share:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_button_google_plusone" g:plusone:size="medium"></a>
</div>
<script type="text/javascript">
var addthis_config = {"data_track_addressbar":false,"data_track_clickback":false};
var addthis_share = {"url":"http://mbtaviz.github.io/green-line-release/","title":"MBTA Releases Green Line Data","description":"From the authors of Visualizing MBTA Data, An interactive look at the first location data ever available for the Green Line."};
</script>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5253f5637952ccec"></script>
<!-- AddThis Button END -->
</div>
</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="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/the-trains.js"></script>
<script src="//oss.maxcdn.com/signet/0.4.4/signet.min.js"></script>
<!--<![endif]-->
</body>
</html>