generated from DS4200-S23-Class/project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
130 lines (124 loc) · 5.59 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="js/d3.v6.1.1/d3.min.js"></script>
<title>Boston Blue Bike Behavior</title>
</head>
<body>
<h1>Building a Browser for Boston's Blue Bike Behavior</h1>
<div class="textbox">
<h2>Motivation</h2>
Boston's Blue Bike network is incredibly expansive, with hundreds of
stations and thousands of daily riders, a lot of valuable information can
get lost in the vast amounts of data. However, one common problem for
riders and bike maintainers alike is the issue of empty (and full)
stations. If a station is full, it is not possible for a rider to return
their bike to that station, and if a station is empty, it is not possible
for a rider to take a bike. Visualizing trips across stations can help
show which stations are available at which times thrwoughout the day,
week, month, etc. In addition to understanding the popular stations and
routes, this visualization can also help identify which areas of the city
are underserved by the Blue Bike system.
</div>
<div class="textbox">
<h2>Background</h2>
<h3>Data</h3>
Our project visualizes data related to the Blue Bikes bike-sharing system
in the Boston Metro Area. The data focuses on ridership patterns, bike
availability, and route preferences to help optimize the system and
improve its overall efficiency. The primary source of the data is the
Boston Blue Bike official website, specifically the trip data from
September 2022. The dataset includes information about trip duration,
start and end times and stations, and anonymized user data. Biases and
ethical issues embedded in the data are minimal, as the data is anonymized
and does not contain personal information regarding the users who took the
trips. However, there is a small possibility that someone could
potentially track down a particular rider if they know a combination of
information about the rider's exact start/end time or station. It is
important to note that all of this data is anonymized, so any potentially
identifying information is removed from the data set before it is
published, making it tough to use for malicious reasons. Regarding data
quality issues, the provided data from the Blue Bike system does not
contain any missing values, and every row has complete information (except
for the postal code column, which is irrelevant to the data
visualization). Additionally, data is consistent across categorical
attributes (e.g., Station Name) and requires no cleaning in this regard.
The data was processed to better understand activity across different
stations and dates. The original dataset was modified, and individual
trips were removed. Instead, each station was given its own row, and the
raw trip data was parsed to obtain the number of trips to and from each
station for each day of the month. The region/neighborhood of each station
was also added to the dataset. Furthermore, multiple new datasets were
created containing a matrix with a row and a column for each station. The
data in these new datasets represents the number of trips between two
specific stations, where the row represents the start station and the
column represents the end station. Link to data:
<a href="https://s3.amazonaws.com/hubway-data/index.html">
Blue Bike Data
</a>
<h3>Demo Video</h3>
<video width="1000" controls>
<source type="video/mp4" src="data/demo/demoVid.mp4">
<track src="data/demo/captions.vtt" kind="subtitles" srclang="en" label="English">
</video>
<h3>Report</h3>
<a href="data/report.pdf">Click here to read the full report</a>
</div>
<div>
<h2>Visualization</h2>
<div id="vis-container">
<div id="boston-map"></div>
<div class="info-col">
<div id="day-container"></div>
<div id="region2">
<div id="controls" class="no-display">
<div>
<p id="selected-station-name"></p>
<p id="min-trip-prefix">- min trips:</p>
<span id="meta-threshold-value"></span>
</div>
<div>
<input type="range" id="meta-threshold" />
<button id="clear-selection">Reset Station Selection</button>
<button id="order-by">Order By: count</button>
</div>
</div>
<div id="select-text">Select a station</div>
<div id="meta-container"></div>
</div>
</div>
</div>
</div>
<div>
<h2>Acknowledgements</h2>
<ul>
<li>
<a href="https://www.bluebikes.com/system-data">
Raw Blue Bike System data
</a>
</li>
<li>
<a href="https://findthatpostcode.uk/tools/merge-geojson">
Merge geoJSON files
</a>
</li>
<li>
<a
href="https://medium.com/@ivan.ha/using-d3-js-to-plot-an-interactive-map-34fbea76bd78"
>
Plot map with D3
</a>
</li>
<li>
<a href="https://nominatim.openstreetmap.org/ui/search.html">
Use openstreetmap API to get geoJSON polygons
</a>
</li>
</ul>
</div>
</body>
<script src="js/main.js" type="module"></script>
</html>