Skip to main content
100%

Boston Crashes Project

✓ Published0🌍 Public
Ssjpeno@wpi.edu
Last edited Dec 2, 2024
Created on Nov 21, 2024
Forked from Article Starter

This interactive visualization explores nine years of Boston crash data from the city’s Vision Zero program, using a geographic map and a time-series line chart. The map plots individual crash locations as colored points by crash type, filtered via checkboxes, and is rendered with D3’s `d3.geoPath` and parsed GeoJSON. The line chart aggregates monthly crash counts, with colored seasonal bands and toggleable lines for each crash type, implemented using D3 scales, axes, and `d3.line`. Both views load data directly from CSV and GeoJSON files, ensuring scalable performance.

AI-generated description

This is my final project for CS 573 - Data Visualization.

This project uses crash data over the last nine years in the city of Boston, MA.

This Dataset is pulled from data.boston.gov, provided as part of the Vision Zero Boston program, contains records of the date, time, location, and type of crash for incidents requiring public safety response which may involve injuries or fatalities. All records are compiled by the Department of Innovation and Technology from the City's Computer-Aided Dispatch (911) system and verified as having required a response from a public safety agency. To protect the privacy of individuals involved in these incidents, they do not indicate the severity of specific crashes or whether medical care was provided in any specific case.

For this project, I set out to understand the geographic distribution of crashes, the patterns of crashes by time of year, year-after-year. While I was learning new data viz techniques, I sought out to identify subsets of the data where crashes have a high value and crash rates for mode/vehicle type by parsing the data and adding interactivity.

I completed several iterations of each visualization as my knowledge and experience grew throughout the course. From learning new techniques like including color channels and interactivity, to ensuring scalability by learning how toimport and parse the data from the raw data file rather than hard coding data points in my java file directly, my visualizations evolved.

The Evolution of the Geographic Crash Map

The first iteration of the map was merely an outline of Massachusetts, as I was learning to use and understand geojson data. And iteration two was the map with test points on the map that would later represent the locations of crashes from the crash data. In iteration three, I successfully added in the real coordinate data points to plot crashes, parsing the data from the csv file.

<iframe src="https://vizhub.com/sydneypeno/7ae09253c93341ae8cc9954694307b84?mode=embed" width="960" height="500" scrolling="no" frameborder="no"></iframe>

In the fourth iteration, I decided to use Boston geojson data as the crash data contained only Boston specific crashes. I was able to successfully plot the crash data points on the Boston map but could not import and parse the geojson data. Instead I had hardcoded the geojson data into my javascript file, making the UI really slow and ultimately not feasible. In iteration five, I added color channels by color coding the data points by crash type, but still had hardcoded geojson data.

<iframe src="https://vizhub.com/sydneypeno/9fbaa22584fc4b5193ab9c3651a8b1d7?mode=embed" width="960" height="500" scrolling="no" frameborder="no"></iframe>

In iteration six, I finally made the visualization scalable, by importing and parsing the geojson data in my javascript file, instead of having it hard coded. Viz hub now ran much quicker, and I cut down almost all of the lag time I was experiencing. In iteration 7, I added interactivity by including check boxes to filter what types of crashes the user wanted to see on the graph.

<iframe src="https://vizhub.com/sydneypeno/21cdfe1783344b249af855efc302e835?mode=embed" width="960" height="500" scrolling="no" frameborder="no"></iframe>

In my eigth and final iteration, I improved the look of my visualization, including centering the map, and combining the legend and check boxes for a better user experience and improved aesthetic.

Geographic Boston Crash Map

<iframe src="https://vizhub.com/sydneypeno/90ca12ab39044cd2b0d09f000b2093ae?mode=embed" width="960" height="500" scrolling="no" frameborder="no"></iframe>

The Evolution of the Crash Line Chart

The first iteration of the line chart was actually a bar chart, originally showing the number of crashes each month over the past 10 years, from 2015-2025.

<iframe src="https://vizhub.com/sydneypeno/383ddaf8ede643ada1a3e12effbc1afc?mode=embed" width="960" height="500" scrolling="no" frameborder="no"></iframe>

I decided that a line chart would better represent the data as it contained time-series elements, which I was intending to illustrate. This was my second iteration.

<iframe src="https://vizhub.com/sydneypeno/63a64b63d6fc438aaafdcc307829fb33?mode=embed" width="960" height="500" scrolling="no" frameborder="no"></iframe>

The third iteration was one of my final visualizations, where I decided to add color channels in terms of seasons. I saw that the data contained some seasonality, with patterns in crash rates trending during the same time of year, each year.

Boston Crashes Line Chart by Season

<iframe src="https://vizhub.com/sydneypeno/6e535fdd7bd44f0fa56ae8295d4169af?mode=embed" width="100%" height="500" scrolling="no" frameborder="no"></iframe>

In iteration four of the line graph, I implemented color channels and interactivity, by filtering the crashes by type of crash, with separate lines for each type,and check boxes to add or take away the lines for a given type of crash.

<iframe src="https://vizhub.com/sydneypeno/b5348e06fa15459eb5ec9fe27a3f1f08?mode=embed" width="960" height="500" scrolling="no" frameborder="no"></iframe>

By the fifth iteration, I changed the line to be one trend line, but kept the interactive element with the check boxes to filter by type.

<iframe src="https://vizhub.com/sydneypeno/562b8a8817a942d8a8dfe75bc0d64e3b?mode=embed" width="100%" height="500" scrolling="no" frameborder="no"></iframe>

And in the 6th and final iteration, I made minor changes to improve the look of the check boxes by adding the full type labels.

Boston Crashes Line Chart by Type of Crash

<iframe src="https://vizhub.com/sydneypeno/dd6518d99fce4c3693cb45939f6c0609?mode=embed" width="960" height="500" scrolling="no" frameborder="no"></iframe>
MIT Licensed

Similar vizzes