-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
296 lines (262 loc) · 14.9 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
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<!--external stylesheets-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="dist/scrollmap.css">
<link rel="stylesheet" href="lib/leaflet/leaflet.css">
<!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
</head>
<body>
<div class="content">
<!---->
<div class="row">
<div class="center title" >
<!--title text-->
<h2>Traffic Fatalities in Washington, DC</h2>
<!--subtitle or author-->
<p class="author">Aileen Clarke</p>
</div>
</div>
<div class="row">
<div class="center main-text">
<p>I lived, walked, and biked in DC for six years, until August 2021.
I continue to read the local news and follow local efforts to improve safety in the city.
</p>
</div>
</div>
<div class="row">
<div class="center main-text">
<p>Since the COVID pandemic, traffic incidents are on the rise across the country.
The limitations of Vision Zero plans put in place over the last decade are showing.
</p>
</div>
</div>
<!--lineGraph-->
<div class="row">
<div class="center">
<p class="vert-center main-text">Like the country as a whole, DC has seen a rise in fatal traffic incidents.</p>
</div>
<!--</div>
<div class="row">-->
<div class="center">
<figure class="lineGraph"></figure>
</div>
</div>
<div class="row">
<div class="center main-text">
<p>3 bicyclists were killed in as many weeks this summer. 2 women were killed as they
sat on a restaurant patio. A child killed on their bike in a crosswalk.
</p>
</div>
</div>
<div class="row">
<div class="center main-text">
<p>With these incidents in mind, I retrieved DC's crash data from the city government's
online portal. I planned to analyze the 2021-22 data to date and look at the hotspots
for incidents involving bicyclists, pedestrians, and vehicles.
</p>
</div>
</div>
<!--map of fatalities-->
<div class="scroll-container">
<div class="background-item">
<div id="fatalityMap" class="vert-center"></div>
</div>
<div class="foreground-item no-event">
<div class="row">
<div class="fatal-points left background-transparent beginning" id="start">
<p class="no-margin"></p>
</div>
</div>
<div class="row">
<div class="fatal-points left background-transparent" id="dcFatalities">
<p class="no-margin">However, as I explored the data I noticed some inconsistencies. The dataset, which is
updated weekly, was missing some notable incidents. If I wasn't following local news,
I may have moved forward without much concern.
</p>
</div>
</div>
<div class="row">
<div class="fatal-points left background-transparent" id="missingFatalities">
<p class="no-margin"> All these fatal incidents were missing from the crash data set.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="center main-text">
<p> The city's crash data set showed <b>45</b> incidents resulting in <b>50 fatalities</b>. The fatalities include
1 bicyclist, 22 pedestrians, 24 drivers, and 3 passengers.
<br>
<br>
I found <b>19</b> incidents missing from the dataset. These incidents resulted in <b>22 fatalities</b>. The fatalities
included 4 bicyclists, 7 pedestrians, 5 drivers, 3 passengers, and 3 uncategorized fatalities.
</p>
</div>
</div>
<div class="row">
<div class="center main-text">
<p>I researched the dataset further and found a number of significant caveats. MPD officers report to the scene
of a crash and complete the crash report form. This report is completed and published to the dataset each week.
However, the crash report is not updated. If a victim dies hours, days, or even months later that isn't updated
in this data set. Additionally, MPD officers decide whether or not to call the Major Crash Unit based on the
observable severity of injuries at the scene. Finally, not all crashes are mapped correctly or mapped at all.
</p>
</div>
</div>
<div class="row">
<div class="center main-text">
<p>To the city's credit, they were upfront with these caveats. However, on the same page where they list these caveats,
they also state that the purpose of the dataset is to “provide crash location data to users interested in exploring
spatial patterns and creating maps in support of safety analysis.” Since I was focused on traffic violence involving
pedestrians and cyclists, I couldn't afford to use a dataset that was missing so many confirmed incidents. </p>
</div>
</div>
<div class="row">
<div class="center main-text">
<p>Now I was confronting a new problem. More data than ever is available for us to download and use. This is a double edged
sword. No dataset is perfect, so how do we decide what is good enough? The choice has implications on analysis and
storytelling. Do we not tell a story because the data isn't perfect? Do we move forward knowing the conclusions we
draw may leave something out?</p>
</div>
</div>
<!--bar chart-->
<div class="scroll-container">
<div class="background-item">
<img class="background bar-chart vert-center left" id="base">
</div>
<div class="foreground-item">
<div class="row">
<div class="bar-chart background-transparent right main-text" id="barChart1">
<p class="no-margin bar-chart-text">Washington, DC has eight wards. From January 2021 through October 2022,
the rate of traffic fatalities per 100,000 residents is highest in <b>Wards 7</b> and <b>8</b>, east of the Anacostia River.
</p>
</div>
</div>
</div>
<div class="foreground-item">
<div class="row">
<div class="bar-chart background-transparent right main-text" id="barChart1">
<p class="no-margin bar-chart-text">Wards 7 and 8 also have the highest raw number of traffic fatalities. The
crash data set provided by the city of DC shows <b>12 fatalities</b> and <b>8 fatalities</b> for wards 7 and 8, respectively,
over the same time period.
</p>
</div>
</div>
</div>
<div class="foreground-item">
<div class="row">
<div class="bar-chart vert-center background-transparent right main-text" id="barChart2">
<p class="no-margin bar-chart-text">But the city's crash data set undercounts the fatalities in <b>five</b> of the eight
wards. Ward 7 had the most missing fatalities.
</p>
</div>
</div>
</div>
</div>
<!--example map-->
<div class="scroll-container">
<div class="background-item">
<div id="exampleMap" class="vert-center"></div>
</div>
<div class="foreground-item no-event">
<div class="row">
<div class="fatal-points left background-transparent" id="example0">
<p class="no-margin">Let's look at some of the fatalities missing from that dataset.</p>
</div>
</div>
<div class="row">
<div class="fatal-points left background-transparent" id="example1">
<p class="no-margin">Four of the five missing fatal incidents in Ward 7 are seen here. They include father and son, Demetrius Flutz and
Amir Fultz, Kaidyn Green, and Jasmine Butler. <em>Click on an orange point to learn more.</em> </p>
</div>
</div>
<div class="row">
<div class="fatal-points left background-transparent" id="example2">
<p class="no-margin">In Ward 8, all three missing incidents can be seen here. Two of the victims remain unnamed. Anthony Shaw was killed
on Southern Ave SE, where three other fatal accidents occurred during this time period.
</p>
</div>
</div>
<div class="row">
<div class="fatal-points left background-transparent" id="example3">
<p class="no-margin"> In NE DC, two fatalities happened within three blocks of each other. 5-year-old Allison Hart was killed in a crosswalk
while riding her bicycle. The other victim is unnamed.
</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="center main-text">
<p>22 of 72 total traffic deaths between January 1, 2021 and November 1, 2022 weren't included in the official public crash dataset. That's a <b>30%</b>
undercount. Most of the traffic deaths occurred in Wards 7 and 8. With this in mind, we should ask if Vision Zero efforts are reaching those they
need to reach.
</p>
</div>
</div>
<div class="row">
<div class="center main-text">
<p>Vision Zero efforts include building bike lanes, lowering speed limits, automating traffic enforcement using red-light and speeding cameras,
building self-enforcing streets, and increasing speeding citations. The map below shows several patterns.
</p>
</div>
</div>
<div class="row">
<div class="center main-text">
<p>There are very few bike lanes in Wards 7 and 8, forcing bicyclists into unsafe streets</p>
</div>
</div>
<div class="row">
<div class="center main-text">
<p>The goal of Vision Zero is noble, but it may be time for cities to reevaluate their progress. This should involve looking beyond numbers and should
focus on the equity of their effors.
</p>
</div>
</div>
<!--interactive map-->
<div class="row">
<div class="vert-center">
<div id="interactiveMap"></div>
</div>
</div>
<!--credits-->
<div class="row">
<div class="center main-text">
<h3>Maps, Graphics, Text, Code</h3>
<p>Aileen Clarke</p>
<br>
<h3 class = "sources">Sources</h3>
<a href="https://opendata.dc.gov/datasets/DCGIS::crashes-in-dc/about" target="_blank">DC Crash Data</a><br>
<a href="https://opendata.dc.gov/datasets/DCGIS::bicycle-lanes/about" target="_blank">DC Bike Lanes</a><br>
<a href="https://dcfamiliesforsafestreets.org/2022/11/08/world-day-of-remembrance-2022/" target="_blank">DC Familes for Safe Streets</a><br>
<a href="https://opendata.dc.gov/datasets/DCGIS::wards-from-2012/about" target="_blank">DC Wards</a><br>
<a href="https://visionzero.dc.gov/" target="_blank">Vision Zero DC</a><br>
</div>
</div>
<!--
<div class="container-fluid">
<div class="row">
<div class="col"></div>
</div>
</div>
-->
</div>
<!--external script links-->
<!--<script src="https://d3js.org/colorbrewer.v1.min.js"></script>-->
<script src="https://d3js.org/d3.v4.js"></script>
<script type="text/javascript" src="dist/scrollmap.js"></script>
<script type="text/javascript" src="lib/leaflet/leaflet.js"></script>
<!--<script type="text/javascript" src="lib/d3.min.js"></script>-->
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
</body>
</html>