-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
49 lines (46 loc) · 2.47 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="bower_components/d3/d3.js"></script>
<script type="text/javascript" src="bower_components/d3-tip/index.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore.js"></script>
<script type="text/javascript" src="bower_components/momentjs/min/moment.min.js"></script>
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@msb5014">
<meta name="twitter:title" content="Boston Subway Marey Diagram">
<meta name="twitter:description" content="An interactive visualization showing train locations for Boston's Red, Orange, and Blue subway lines for Tuesday February 4, 2014.">
<meta name="twitter:creator" content="@msb5014">
<meta name="twitter:image:src" content="http://mbtaviz.github.io/trains-over-time/preview.png">
<meta name="signet:authors" content="Michael Barry, Brian Card">
<meta name="signet:links" content="http://github.com/mbtaviz/trains-over-time, http://github.com/msbarry, http://twitter.com/msb5014">
<link type="text/css" rel="stylesheet" href="main.css"/>
<title>Boston Subway Marey Diagram</title>
</head>
<body>
<div class="panel fixed">
<div id="chart"></div>
<div id="time">Loading...</div>
<p class="info">
This graphic shows train locations on Boston's Red, Orange, and Blue Subway lines for Tuesday
February 4, 2014. The left map shows train locations relative to stops along their line at
a single point in time. The right plot shows each station as a vertical line, with time going
from top to bottom. Each horizontal slice shows where each train is at that point in time.
Slower trains have steeper lines. Hover over the right plot to show the train locations
at that point in time. Click on a train's line or dot to focus on just that train.
</p>
</div>
<div class="panel middle">
<div id="marey"></div>
<div class="fadeout"></div>
</div>
<div id="mareylegend"></div>
<div class="panel fixed right">
<div id="tinymarey"></div>
</div>
<script type="text/javascript" src="marey.js"></script>
<script type="text/javascript" src="spider.js"></script>
<script type="text/javascript" src="main.js"></script>
<script src="//oss.maxcdn.com/signet/0.4.4/signet.min.js"></script>
</body>
</html>