Data and pattern visualization of bike crash trends in Pittsburgh


CMU Communication Design Studio, 6 weeks

Context  |  CMU MDes  Fall 2018  Communication Design Studio  6 weeks (Nov 1st ~ Dec 13th)

Individual Project

Solo Work


research, ideation, visual design, interaction design, prototyping


Sketch, Principle, Mapbox, Illustrator


Visualizing data & patterns

Data visualizations have become a prevalent form of conveying ‘facts’. Since designers are often required to visualize abstract information concrete and illuminate connections among data, this data visualization project was meaningful.

Starting with the questions of the relationships between locations, the time of a day, months, and bike crash types, I visualized a system which could help viewers recognize, engage in, and explore deeply on their important relationships.

Design Process

Please refer to medium documentation.

Research Question

Is there any relationship between time, bike collision type, and location?

Is there any relationship between time, bike collision type, and location?

How is the trend of bike crash look like month by month?

Where is the most/least frequent bike crash area according to the type of crash?

Where is the most/least frequent bike crash area according to the time of day?

How is the trend of bike crash look like month by month?

Where is the most/least frequent bike crash area according to the type of crash?

Where is the most/least frequent bike crash area according to the time of day?

Interactive Prototype

LAYER 1: Introduction


The simple animation that is shown to viewers in the first stage gives them information about what this visualization about through the form of a broken bicycle. The introduction could allow them to expect what they are going to explore.

LAYER 2: Collision Types and Monthly Trends


First of all, viewers can look through the overall monthly trend in bike accidents. They can learn in which month bike accidents were the most frequent and which bike collision type took the biggest proportion. 

Viewers can explore 5 different bike collision types by click-and-holding each part of the polar graph. The animation of collision is represented with data which helps viewers understand how bike crashes happened.

LAYER 3: Polar to Geographical


Next, viewers can go to the deeper layer of the geographical map by clicking the background. When they hover in the background, the opacity changes so that they can easily understand it is clickable. 

LAYER 4: Monthly Trends in Location


In this layer, viewers can explore the specific locations of a bike crash. They can compare where was the most frequent bike accident area in Pittsburgh each month, and how these areas changed month by month.

The wheel-shaped interface gives affordance of rotation to viewers so that they can intuitively control the month parameter by hovering and clicking the arrow buttons on either side of it. 

LAYER 5: Removable Month Parameter


Viewers can also remove the month parameter if they want to explore other parameters (collision type and the time of a day) independently. The visual metaphor I designed was disassembling the wheel. When viewers hover on the central point of the wheel, it rotates and gets slightly bigger so that viewers could expect it is clickable. 

LAYER 6: The Time of Day Parameter


Viewers can narrow down their scope into a time zone of a day. 24 hours are divided into 4 parts; morning(6am~11am), afternoon(12pm~5pm), evening(6pm~11pm), dawn(12am~5am).

The simple interface located on the left top corner, which represents the horizon and the sun is the controller of the time parameter. When viewers hover it, the selective data is shown with the context of each time zone by changing colors and opacities of the background.

LAYER 7: Collision Type Parameter


Viewers can explore the relationship between collision type and location without other parameters. The patterns of each collision type are shown on the geographical when they hover.

LAYER 8: Overlapping Multiple Parameters

LAYER 08: Overlapping Multiple Parameters


Viewers can explore more specific trends by overlapping parameters. For example, they can choose one of the collision types and see how the number and location of that type had been changed throughout the time of day.

LAYER 9: More Specific Details on Each Crash

LAYER 09: More Specific Details on Each Crash


The specific information about each bike crash can be given to viewers when they click and hold on each data. The date of the collision, specific time, weather, and intersection type of roads are shown. 


1. General Bike Accident Trends

01. General Bike Accident Trends


It was very obvious that the number of bike crash is the highest in the summer (from June to August) in Pittsburgh. The figure was the lowest in February. 

The polar graph also shows information about the most frequent bike collision type. It was quite interesting to see that collision in angle accounted for more than 60%. Hitting a pedestrian was the lowest (5.06%).

2. The Most/Least Frequent Bike Accident Areas


In general, the bike accident frequently happened on the main which are located along the rivers, Allegheny River and Monongahela River. Especially, the downtown area placed right beside the division point of rivers shows condensed bike crash data.  

Also, it was interesting to see that the number of bike crash was high in the area near and between the residential areas, the Carnegie Mellon University and the University of Pittsburgh. I could guess that there are many bike riders who commute to school by bike. It could be a positive effect that my visualization caused and triggered a further exploration of related information.

Furthermore, there was an oval-shaped area in the center of the map, where the bike accident rarely happened. I took an investigation about this area and found out that the altitude of this area is higher than others, which made bike rides use other paths instead of going through this area. Hills or small mountains were the reasons that made it a bike safe zone.

3. The Bike Collision with a Pedestrian


It was obvious to see that the most of bike accident with a pedestrian happened during the afternoon and evening (12 pm ~ 23 pm) rather than in the morning or dawn. Moreover, most incidents happened in the downtown and residential areas. I thought that this is because people do active outside activities during those time zones.

4. Monthly Trends of Bike Collision Density and Area


Exploring how the density and location of bike accident had been changed throughout 12 months was interesting. The most condensed area of each month had a pattern. Usually, in winter, the most bike crash happened near the residential area. However, in the summer, the area became bigger and began to reach downtown. Finally, from June to August, when the bike accident was the most popular, the collision spread out throughout the whole city. Then it became smaller after September.

Copyright 2020 Jay (Jaeyeon) Huh. All rights reserved. 

error: Content is protected !!