-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
238 lines (212 loc) · 14.6 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
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!DOCTYPE html>
<meta charset="utf-8">
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="css/stylesheet.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://d3js.org/d3.v6.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<script src="/js/charts/deadly_yearly.js" type="module" defer></script>
<script src="/js/charts/contributing_factors.js" type="module" defer></script>
<script src="/js/charts/time/hourly.js" type="module" defer></script>
<script src="/js/charts/time/weekday.js" type="module" defer></script>
<script src="/js/charts/time/seasonal.js" type="module" defer></script>
<script src="/js/charts/time/monthly.js" type="module" defer></script>
<html>
<title>NYC Traffic Accidents</title>
<body>
<div class="section" id="title_page">
<div class="news_container">
<img id="a1" class="paper" data-aos="zoom-out-up" data-aos-duration="500" src="images/news-article-1.png">
<img id="a2" class="paper" data-aos="zoom-out-left" data-aos-delay="500" data-aos-duration="500" src="images/news-article-2.png">
<img id="a3" class="paper" data-aos="zoom-out-right" data-aos-delay="1000" data-aos-duration="500" src="images/news-article-3.png">
<img id="a4" class="paper" data-aos="zoom-out-down" data-aos-delay="1500" data-aos-duration="500" src="images/news-article-4.png">
</div>
<div class="titleslide" id="main-title">
<h1 data-aos="zoom-in" data-aos-delay="2000" data-aos-duration="1000">The City that Never Sleeps</h1>
<h2 data-aos="zoom-in" data-aos-delay="2500" data-aos-duration="500">A visual telling of traffic incidents in New York City.</h2>
</div>
</div>
<div class="section titleslide">
<p data-aos="fade-up" data-aos-duration="1500">
New York City is very crowded. The honking of car claxons can be heard 24 hours per day, 7 days per week.
How do the citizens of the Big Apple adapt to the constant stream of traffic?
And what is the influence of the measures the government has taken to reduce traffic fatalities? Let's take a deep dive into the data!
</p>
</div>
<div class="section columns" id="heatmap">
<div class="column" data-aos="fade-right" data-aos-duration="1500">
<h1> The amount of traffic accidents is not constant</h1>
<p>From <a id="select2013">2013</a>, the amount of traffic accidents has increased in the busy areas of NYC. Until about <a id="select2018">2018</a>, when traffic accidents seemed to drop again.</p>
</div>
<div class="column" id="column_heatmap" data-aos="fade-up" data-aos-duration="1500">
<div id="year-selection">
<label for="year">Select a year:</label>
<select name="year" id="year">
<option value="2013" selected>2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
</div>
<svg id="heatmap-svg"></svg>
</div>
</div>
<div class="section titleslide">
<h1 data-aos="fade-right" data-aos-duration="1500">Let's put the data in context</h1>
<p class="context-text" data-aos="fade-left" data-aos-duration="1500">When looking at data, we should not forget the context in which we are looking at it. The danger with location data is that we can easily create population maps, or in this case, traffic volume maps. We expect more traffic accidents to happen in busier areas, but is this reflected in the data?</p>
</div>
<div class="section column_layout">
<div class="two_graphs">
<div data-aos="fade-right" data-aos-duration="1500" id="volume_map">
<h2>Traffic Volume in New York - 2018</h2>
</div>
<div data-aos="fade-right" data-aos-duration="1500" id="accidents2018">
<h2>Traffic Accidents in New York - 2018</h2>
</div>
</div>
<p>Of course, there is only data about the traffic at places where sensors are placed. These spots are often important roads such as bridges and large intersections. This does ensure that we cannot just make one graph with the ratio of accidents per amount of cars. Something we can see is that there is a lot of traffic in Manhattan and most accidents also take place here. Other than that, the bridges and intersections seem to not be places where relatively many accidents happen. To adequately make any conclusion, we would need more evenly spaced sensors.</p>
</div>
<div class="section" id="heatmap">
<div class="column" data-aos="fade-right" data-aos-duration="1500">
<h1>Biggest Cause of traffic accidents</h1>
<p>We have seen how many accidents there are in NYC. But what are actually the main causes of these accidents? Take a look at which causes are the main culprits in the districts.</p>
</div>
<div class="column" id="column_heatmap_cause" data-aos="fade-up" data-aos-duration="1500">
<div id="cause-selection">
<label for="cause">Select a cause:</label>
<select name="Cause" id="cause">
</select>
</div>
<svg id="heatmap-cause-svg"></svg>
</div>
</div>
<div class="section" id="adaptive_bar_plot">
<div class="column" id="steps" data-aos="fade-right" data-aos-duration="1500">
<h1 class="margin-below">But what are the main causes of traffic accidents the last years?</h1>
<p>According to <a href="https://www.nyc.gov/html/dot/html/pr2023/vision-zero-fatalities-dropped-2022.shtml">the city of New York</a>,
more traffic regulations have been introduced in 2022 to reduce the amount of traffic accidents. So we should expect a drop in certain causes of traffic accidents.
Let's take a look at the data!
</p>
<div class="sections">
<section class="step">
<h1>2013</h1>
</section>
<section class="step">
<h1>2014</h1>
</section>
<section class="step">
<h1>2015</h1>
</section>
<section class="step">
<h1>2016</h1>
</section>
<section class="step">
<h1>2017</h1>
</section>
<section class="step">
<h1>2018</h1>
<p>The amount of traffic accidents seem to have reached a picque</p>
</section>
<section class="step">
<h1>2019</h1>
</section>
<section class="step">
<h1>2020</h1>
<p>2020 was a special year, because of the COVID-19 pandemic. The city was in lockdown for a long time, which resulted in a lot less traffic accidents. </p>
</section>
<section class="step">
<h1>2021</h1>
</section>
<section class="step">
<h1>2022</h1>
<p>In 2022 the COVID-19 pandamic came to an end, however the traffic accidents do not seem to have gone up much. This might look like it supports the earlier claim, but no specific cause can be pointed out to be the reason.</p>
</section>
</div>
</div>
<div class="column" id="cause_per_year">
</div>
</div>
<div class="section">
<div class="column" data-aos="fade-right" data-aos-duration="1500">
<h2>Contributing Factors</h2>
<p>The prevalence of accidents attributed to "Driver Inattention/Distraction" is a trend comprising nearly half a million incidents. This seems to be the primary reason for most accidents, showcasing the critical role of focused attention while driving. Additionally, "Failure to Yield Right-of-Way" and "Traffic Control Disregarded" appear as substantial contributors to accidents, emphasizing the importance of adherence to traffic rules for road safety.
</p>
</div>
<div id="contributing_factors"></div>
</div>
<div class="section">
<div class="column"data-aos="fade-right" data-aos-duration="1500">
<h2>NYC Deadly Accidents Trend</h2>
<p>There appears to be a fluctuating trend in the number of fatalities from 2013 to 2022. While there are slight variations in specific years, there isn't a clear linear pattern of increase or decrease in fatalities over this time frame. However, the numbers seem to hover around an average range, with occasional spikes in certain years, indicating potential fluctuations in driving conditions, road safety measures, or other contributing factors impacting the fatality count.</p>
</div>
<div class="column" id="deadly_yearly"></div>
</div>
<div class="section titleslide">
<div data-aos="fade-zoom-in" data-aos-duration="1500">
<h1>Car Crashes over Time</h1>
<h2 data-aos-delay="300">We have seen trends with respect to location and contributing factors. How do time factors, like month and time of day play into the whole?</h3>
</div>
</div>
<div class="section">
<div class="column" data-aos="fade-left" data-aos-duration="1500">
<h1>Accident Trends by Hour</h1>
<p>We can see a concentration of collisions during the late afternoon hours, particularly between 16:00 and 18:00. This could indicate that more accidents happen during rush hours when people are commuting back home from work or running errands. Additionally, there's a significant drop in collisions during the early morning hours (between 2:00 and 6:00), possibly due to reduced traffic at those times.</p>
</div>
<div class="column" id="hourly"></div>
</div>
<div class="section">
<div class="column" data-aos="fade-left" data-aos-duration="1500">
<h1>Accident Trends by Weekday</h1>
<p>Fridays consistently exhibit the highest number of collisions compared to other days, totaling nearly 300,000 incidents. Conversely, Sundays appear to have the lowest collision count among the weekdays and weekends, potentially indicating lighter traffic or different driving behaviors on that day.</p>
</div>
<div class="column" id="weekday"></div>
</div>
<div class="section">
<div class="column" id="seasonal"></div>
<div class="column" data-aos="fade-left" data-aos-duration="1500">
<h1>Accident Trends by Season</h1>
<p>Analyzing collision data by seasons reveals that summer has the highest number of collisions, totaling over 480,000 incidents. This might be opposite to what you might expect, since winter usually indicates slippery roads. It could be attributed to increased travel during vacation periods, more vehicles on the road for recreational purposes, or potentially more hazardous driving conditions due to heatwaves. On the other hand, winter records the lowest number of collisions, which might be due to more cautious driving. Overall, there might also be more traffic in winter and the pace might be slower.</p>
</div>
</div>
<div class="section">
<div class="column" data-aos="fade-left" data-aos-duration="1500">
<h1>Accident Trends by Month</h1>
<p>It's notable that June and May stand out with higher collision counts, exceeding 160,000 incidents each. Reasons could be summer vacations or more outdoor activities. February has the lowest collision count.</p>
</div>
<div class="monthly" id="monthly"></div>
</div>
<div class="section references">
<h3>References</h3>
<ul>
<li>[1] All data about traffic accidents has been derived from <a href="https://www.kaggle.com/datasets/ishmaelkiptoo/motor-vehicle-collisions/">this dataset</a> from <a href="https://data.gov/">data.gov</a>. </li>
<li>[2] Furthermore, data about traffic volume comes from All data about traffic accidents has been derived from <a href="https://data.cityofnewyork.us/Transportation/Automated-Traffic-Volume-Counts/7ym2-wayt">data.cityofnewyork.us</a>, which shows data from a few sensors and checks throughout New York City. </li>
<li>[3] The City Map graphs have been made using location data about the neighbourhoods from <a href="https://github.com/veltman/snd3/blob/master/data/nyc-neighborhoods.geo.json"> github.com/veltman/snd3</a>.</li>
<li>[4] Information about the strategy of the city officials to reduce accidents can be found on <a href="https://www.nyc.gov/html/dot/html/pr2023/vision-zero-fatalities-dropped-2022.shtml">NYC.gov</a>.</li>
</ul>
<h3>Newspaper articles on the first slide</h3>
<ul>
<li>[1] <a href="https://www.nytimes.com/2023/12/11/briefing/us-traffic-deaths.html">US Traffic Deaths, New York Times</a></li>
<li>[2] <a href="https://www.nytimes.com/2022/11/27/upshot/road-deaths-pedestrians-cyclists.html">The Exceptionally American Problem of Rising Roadway Deaths, New York Times</a></li>
<li>[3] <a href="https://www.nytimes.com/2023/04/28/nyregion/traffic-deaths-nyc-vision-zero.html">When a Walkable City Becomes a Death Trap, New York Times</a></li>
<li>[4] <a href="https://www.nytimes.com/2022/02/15/briefing/vehicle-crashes-deaths-pandemic.html">Vehicle Crashes, Surging, New York Times</a></li>
</ul>
</div>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>AOS.init();</script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="js/libraries/d3-legend.min.js"></script>
<script src="js/libraries/scroller.js"></script>
<script src="js/script.js" type="module"></script>
<script src="js/heatmap.js" type="module"></script>
<script src="js/heatmap-cause.js" type="module"></script>
<script src="js/bar-on-scroll.js" type="module"></script>
<script src="js/traffic_volume.js" type="module"></script>
</body>
</html>