generated from DS4200-S23-Class/project
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
90 lines (86 loc) · 7.4 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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<link rel="stylesheet" type="text/css" href="style.css">
<script src='js/d3.v6.1.1/d3.min.js'></script>
<title>Boston Biking Saftey Risk</title>
<link rel="icon" type="image/x-icon" href="/images/favicon.png">
</head>
<body>
<h1>Boston Biking Saftey Risk</h1>
<div>
<h2>Abstract</h2>
<p>
 Boston, the oldest city of the United States, is constantly evolving; urban planners are actively working alongside policymakers to promote an ergonomic and modernized city. Among these positive macrotrends within the city, is the increase in number of Bostonians using bicycles as their main form of transportation. With this increase, it has slowly been revealed over time that Boston boasts the highest rate of bicycle related fatalities and injuries. Experts have blamed this disappointing statistic on the city's outdated infrastructure and the high population of bicyclists within city lines. It is clear that biker safety has become a pressing issue and one that needs to be addressed imminently.
</p>
<p>
 The goal of this visualization tool is to provide meaningful insights, in an easily digestible manner, that highlight high-risk areas, dangerous Blue-bike stations, and the factors that contribute and drive the associated risks. It is pertinent to identify these areas as then a downward pressure will be placed on urban planners and government officials to address this issue. This tool can directly contribute to invoke change in city planning. The ideal use case of this visualization is for those looking to identify, understand, and locate the risks of biking across Boston. Potential end users include government engineers looking to rectify problem spots, BlueBike employees selecting a location for a new station, and the general public to pinpoint the safest travel route.
</p>
</div>
<div>
<h1>Background</h1>
<h2>Data (pm-03)</h2>
<p>
 Our tool visualizes where the Bluebikes stations are located in Boston. Additionally, the tool shows where recent bike accidents have occured in Boston. A pie chart will indicate within the selected stations, what are the average durations of bikers? And lastly, a scatter plot will visualize bikes leaving and entering a specific station. We are working with two datasets. The bike accidents in Boston are collected by Vision Zero, and the dataset contains all bike accidents which demanded public health agency. The other data source is from the company Bluebikes. They have data on where each station is located, and the time when each customer rented a bike from a station, and returned a bike from a station.
</p>
<p>
 There are a few biases in our data. For one, Vision Zero only reports bike accidents that demanded public health agency. Thus, our visualization tool will only be helpful in identifying areas of Boston where the most severe bike accidents have occured. People who use Bluebikes are given information about how their data is collected, so we would not say their is anything unethical about the way in which they collect information. We found no issues with the quality of our data. Here is the link to access the Vision Zero Crash Data: <a href="https://data.boston.gov/dataset/vision-zero-crash-records">click here</a>. And here is the link to access the Bluebike station data: <a href="https://s3.amazonaws.com/hubway-data/202301-bluebikes-tripdata.zip">click here</a>.
</p>
<h2>Demo Video (pm-06)</h2>
<div>
<video width="600" controls>
<source type="video/mp4" src="video/Demo_Video.mp4" >
<track src="video/captions.vtt" label="English" kind="captions" srclang="en-us" default >
</video>
</div>
<h2>Report (pm-06)</h2>
<div id = "centered"><a href="https://docs.google.com/document/d/1wq6s1wg90ikM2ZDn2C8xLXq7VDAENGVu/edit?usp=sharing&ouid=108475381538190819798&rtpof=true&sd=true">Click here to see report.</a></div>
</div>
<div class = "columns-div">
<div id = "left_col_1" class = "column">
<h1>Boston Map</h1>
<!-- toggle switch, from: https://www.w3schools.com/howto/howto_css_switch.asp -->
<label class="switch">
<input type="checkbox" id = "toggle_zoom"> Zoom
<span class="slider round"> ‍</span> Brushing/Linking
</label>
<!-- end toggle switch -->
<p style = "font-size: 9px;">‍</p>
</div>
<div id = "right_col_1" class = "column">
<h2 id = "chart_desc">Hover over station to display data</h2>
</div>
</div>
<div class = "columns-div">
<div id = "left_col" class = "column">
<div>
<div id="bostonmap" class="column"></div>
</div>
</div>
<div id = "right_col" class = "column">
<div id="station_barchart"></div>
<div id="accident_piechart"></div>
</div>
</div>
<div id="footer">
<h2>Acknowledgements</h2>
<ul id="Acknowledgements">
<li><a href="https://github.com/DS4200-S23-Class/hw-06-aneek-and-jake/blob/master/index.html">https://github.com/DS4200-S23-Class/hw-06-aneek-and-jake/blob/master/index.html</a></li>
<li><a href="https://www.d3indepth.com/zoom-and-pan/">https://www.d3indepth.com/zoom-and-pan/</a></li>
<li><a href="https://d3-graph-gallery.com/graph/interactivity_brush.html">https://d3-graph-gallery.com/graph/interactivity_brush.html</a></li>
<li><a href="https://www.pluralsight.com/guides/create-tooltips-in-d3js">https://www.pluralsight.com/guides/create-tooltips-in-d3js</a></li>
<li><a href="https://stackoverflow.com/questions/47917730/d3-line-and-points-on-map-from-csv-data">https://stackoverflow.com/questions/47917730/d3-line-and-points-on-map-from-csv-data</a></li>
<li><a href="https://maptimeboston.github.io/d3-maptime/#/">https://maptimeboston.github.io/d3-maptime/#/</a></li>
<li><a href="https://data.boston.gov/dataset/vision-zero-crash-records">https://data.boston.gov/dataset/vision-zero-crash-records</a></li>
<li><a href="https://www.w3schools.com/howto/howto_css_switch.asp">https://www.w3schools.com/howto/howto_css_switch.asp</a></li>
<li><a href="http://132.72.155.230:3838/js/geojson-1.html">http://132.72.155.230:3838/js/geojson-1.html</a></li>
<li><a href="https://www.sohamkamani.com/javascript/d3-geo-projections/">https://www.sohamkamani.com/javascript/d3-geo-projections/</a></li>
<li><a href="https://github.com/d3/d3-geo">https://github.com/d3/d3-geo</a></li>
<li><a href="https://www.w3schools.com/css/css3_buttons.asp">https://www.w3schools.com/css/css3_buttons.asp</a></li>
<li><a href="https://www.w3schools.com/howto/howto_css_three_columns.asp ">https://www.w3schools.com/howto/howto_css_three_columns.asp</a></li>
</ul>
</div>
<script src= "js/script.js"></script>
</body>
</html>