-
Notifications
You must be signed in to change notification settings - Fork 0
/
final_viz.html
159 lines (126 loc) · 6.63 KB
/
final_viz.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="copyright" content="MACode ID, https://macodeid.com/">
<title>DS 4200 Final Project</title>
<link rel="stylesheet" href="stylesheets/stylesheet.css">
<link rel="stylesheet" href="stylesheets/normalize.css">
<link rel="stylesheet" href="stylesheets/github-light.css">
<link rel="stylesheet" href="assets/css/maicons.css">
<link rel="stylesheet" href="assets/css/bootstrap.css">
<link rel="stylesheet" href="assets/vendor/animate/animate.css">
<link rel="stylesheet" href="assets/css/theme.css">
<script src="components/page/footer.js" type="text/javascript" defer></script>
<script src="components/page/header.js" type="text/javascript" defer></script>
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
crossorigin=""></script>
</head>
<body>
<!-- Back to top button -->
<div class="back-to-top"></div>
<header-component pagename="Final Visualization"></header-component>
<div class="page-section">
<div class="container">
<div class="row align-items-center">
<div class="col py-3">
<h2 class="title-section">Public Transportation on Massachusetts Avenue</h2>
<p>
Our visualization presents data about public transportation options and usage
on Massachusetts Avenue. Our goal was to help inform decisions about transportation
infrastructure investment in the area. We focus on MBTA data, analyzing usage of
the Orange rail line, Green rail line, Silver rapid bus line, and all other MBTA bus
lines with stops on Massachusetts avenue.
</p>
<div class="divider"></div>
</div>
<div>
<!--Visuals
- map of locations
- don't have data prepped for this
- bus ridership bar chart
-
- rail ridership bar chart
- ridership by time bar chart
- circles
-->
<div class="row">
<div class='col map-container' id="map">
<div class="map-legend">
<div class="legend-title"><strong>Map Legend</strong></div>
<div class="row flex-nowrap pt-1">
<div class="col-8 legend-body">Green Line Stop:</div>
<div class="col">
<img class="legend-img " src="data/images/gl.png" alt="Green Line Logo">
</div>
</div>
<div class="row flex-nowrap pt-1">
<div class="col-8 legend-body">Orange Line Stop:</div>
<div class="col">
<img class="legend-img " src="data/images/ol.png" alt="Orange Line Logo">
</div>
</div>
<div class="row flex-nowrap pt-1 pb-1">
<div class="col-8 legend-body">Bus Stop:</div>
<div class="col">
<img class="legend-img " src="data/images/bus.png" alt="Bus Logo">
</div>
</div>
</div>
</div>
<div class="col ridership-bubble-container"></div>
</div>
<div class="row">
<div class="col" style="width: 600px">
<div class="bus-ridership-bar-container" style="width:600px"></div>
<div class="rail-ridership-bar-container" style="width:600px"></div>
</div>
<div class="col p-3 m-1" style="width: 600px; height:700px">
<div class="ridership-time-title">Ridership Averages Throughout the Day</div>
<div class="ridership-time-bar-container"></div>
</div>
</div>
<div class="row pt-4">
<div class="container navigation-and-insights p-2">
<strong style="font-size: 20px">Navigation and Insights</strong>
<p>
With the map, if you click and drag it will create a box that will select some of the stops
shown, and this will filter the charts throughout the rest of the visualization.
To reset everything, you just need to double click. For the bubble chart, if you select any
bubbles it will also filter. In order to reset you can either reselect the same bubble or
double click again.
</p>
<p>
Also, we want to note that the bubble chart is not to scale, but is instead sized up
in order to create a better interaction experience.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://d3js.org/d3.v7.js"></script>
<script src="assets/js/jquery-3.5.1.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.6.1/mapbox-gl.js"></script>
<script src="assets/js/google-maps.js"></script>
<script src="assets/vendor/wow/wow.min.js"></script>
<script src="assets/js/theme.js"></script>
<script src="components/color_maps.js"></script>
<script src="components/time_ridership_chart.js"></script>
<script src="components/bus_ridership_chart.js"></script>
<script src="components/rail_ridership_chart.js"></script>
<script src="components/ridership_bubble.js"></script>
<script src="components/map.js"></script>
<footer-component></footer-component>
</body>
</html>