generated from NEU-DS-4200-F20-Staff/Project
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
133 lines (104 loc) · 7.05 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
<!DOCTYPE html>
<html lang='en'>
<!-- Metadata -->
<head>
<meta charset='utf-8'>
<!-- Title -->
<title>Project Team 10: Visualizing Boston Crash Statistics, DS 4200 F20</title>
<!-- CSS Styling -->
<link rel='stylesheet' href='style.css'>
<!-- Favicons -->
<link rel='apple-touch-icon' sizes='180x180' href='favicons/apple-touch-icon.png'>
<link rel='icon' type='image/png' sizes='32x32' href='favicons/favicon-32x32.png'>
<link rel='icon' type='image/png' sizes='16x16' href='favicons/favicon-16x16.png'>
<link rel='manifest' href='favicons/site.webmanifest'>
<link rel='shortcut icon' href='favicons/favicon.ico'>
<meta name='msapplication-TileColor' content='#da532c'>
<meta name='msapplication-config' content='favicons/browserconfig.xml'>
<meta name='theme-color' content='#ffffff'>
</head>
<!-- Main page content -->
<body>
<!-- Update this with your GitHub repo URL -->
<span id='forkongithub'><a href='https://github.com/NEU-DS-4200-F20/project-group-10-boston-crash-statistics'>Fork me on GitHub</a></span>
<!-- Writeup -->
<div class='content-column'>
<h1>Project Team 10: Visualizing Boston Crash Statistics, DS 4200 F20</h1>
<p><strong>Zhaoze Zhang</strong>, <strong>Jiaming Hu</strong>, <strong>Fan Xu</strong></p>
<p>Service-Learning Course Project as part of
<a href='https://canvas.instructure.com/courses/1781732'>DS 4200 F20: Information Visualization</a>,
taught by <a href='https://cody.khoury.northeastern.edu/'>Prof. Cody Dunne</a>,
<a href='https://visualization.khoury.northeastern.edu/'>Data Visualization @ Khoury</a>,
<a href='https://www.khoury.northeastern.edu/'>Northeastern University</a>.</p>
<h1>Abstract</h1>
<p>On average 4–5 people died in a traffic accident every hour
in 2019. This visualization aims to raise public awareness of
the danger of operating motor vehicles. The visualization
will highlight high-risk zones in Boston streets, and allows
filtering by road characteristics like surface type and speed
limits. It will also explore the correlations between factors
contributing and car crashes. Along this project, we will
work with Massachusetts government officials to provide
in-depth visualization. The visualization will offer a
minimalist and interactive interface through HTML and
JavaScript for Boston drivers to navigate and explore.</p>
<h1>Visualization</h1>
</div>
<!-- Visualization goes here -->
<div class='vis-holder'>
<!-- Change viewbox to whatever you want, e.g., '0 0 1000 6000' This determines your aspect ratio and coordinate system -->
<!-- Delete all the sample SVG code below after the viewbox to before the closing tag. Populate this part of the SVG with D3. -->
<svg id='vis-svg'
preserveAspectRatio='xMidYMid meet' class='vis-svg' viewBox='0 0 1920 1080' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
<rect x=300 y=0 width='70%' height='100%' fill='191919' rx="15"></rect>
<rect x=325 y=25 width='67%' height='46.75%' fill='#2D2D2D' rx="15"></rect>
<rect x=325 y=553 width='67%' height='46.75%' fill='#2D2D2D' rx="15"></rect>
<svg id='vis-svg-1' x=340 y=-10 width='60%' height='47.5%'></svg>
<svg id='vis-svg-2' x=340 y=543 width='60%' height='47.5%'></svg>
<svg id='vis-svg-3' x=340 y=1000 width='60%' height='47.5%'></svg>
<!-- Don't delete the closing tag! -->
</svg>
</div>
<div id="map"></div>
<!-- Further writeup -->
<div class = 'content-column'>
<h1>Demo Video</h1>
<video controls width='100%'>
<source src="files/demo.mp4" type='video/mp4'>
<p>Your browser doesn't support HTML5 video. Here is
a <a href='http://www.ccs.neu.edu/home/cody/courses/shared/d3-flexible-transitions.mp4'>link to the video</a> instead.</p>
</video>
<h1>Visualization explanation</h1>
<p>We used the line chart to show the trend of crashes in Boston by hour. When hovering on the dot, it will display the number of crashes during the corresponding time period. Users can easily see the trend of the crashes happening over the day.The bar chart shows the number of crashes by county, and the map chart displays the distribution of the crashes of selected counties. You can zoom in to see the detailed information. The size of the circle is proportional to the number of crashes that happened within an area.By clicking on the bar, the bar will change color to black, and the corresponding county will be unselected. Then, the crash distribution of that county will disappear. The bar will change back to the original color when you click on it again, and the distribution will emerge. </p>
<p>Upon finishing our visualization, we identified morning and evening rush hour as two peaks of crash risks. However, the evening peak is much higher than the morning peak. We can see that the peak in the graph for the city of Boston is one hour earlier than that of the Boston Urban Area, and begins to fall off sharply an hour after. This can be explained by evening rush hour commuters leaving the city. </p>
<p>These are also some of the heat zones we identified in Boston city proper. A tailgating heat zone in the O'Neill tunnel of I-93. This segment of the roadway is frequently congested and following too closely presents a significant risk of crash. A speeding heat zone at the embankment road near the longfellow bridge. This is another high volume roadway connecting the storrow drive and I-93. The corner in this specific segment is sharper than it may appear, and the bridge blocks the driver's line of sight entering the corner. This gave a lot of drivers false confidence and went in the corner at dangerous speed. The rightmost one is a traffic marking heat zone at Morton Street in Jamaica Plain. This is a high density residential area with a lot of T junctions, crosswalks, and traffic signals. </p>
<a href='https://docs.google.com/presentation/d/1bKNEm7Pn5RQ-5S0t9hi_cM8buxH6Ltxq9WNSgs45ipg/edit#slide=id.ga5df5f7b0c_0_2205'>
Our Slides</a>
<h1>Acknowledgments</h1>
<p>
List here where any code, packages/libraries, text, images, designs, etc. that you leverage come from.
</p>
<ul>
<li><a href='https://d3js.org/'>
D3: Data-Driven Documents</a>
by Mike Bostock is used for manipulating the DOM to create visualizations.
</li>
<li><a href='https://codepo8.github.io/css-fork-on-github-ribbon/#'>
Pure CSS responsive 'Fork me on GitHub' ribbon</a>
by Chris Heilmann is used to create the banner that links back to the source code repository.
</li>
<li><a href='https://leanpub.com/d3-t-and-t-v6'>
D3 Tips and Tricks v6</a>
by Malcolm Maclean is referenced for the hover tooltip implementation.
</li>
</ul>
</div>
<!-- Scripts at the end avoid need for dealing with async, defer, or onload event handlers -->
<script src='lib/d3.v6.1.1/d3.min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script>
<script src='js/mapchart.js'></script>
<script src='js/linechart.js'></script>
<script src='js/barchart.js'></script>
<script src='js/visualization.js'></script>
</body>
</html>