Custom Preset Copy 14.png

Pittsburgh Data Visualization

Zach Bachiri is an interaction designer on a mission to create social change through design and technology.

Pittsburgh Data Visualization


Context

Communication Design Studio, 4 weeks

Team Members

Individual Project

Tools

Illustrator, Invision

final prototype

 
 

This interactive data visualization explores the relationship between income, fast food, and obesity in Pittsburgh. It was completed for my Communication Design Studio at Carnegie Mellon. We were tasked with creating an interaction that illuminates connections among data in a way that helps viewers recognize, engage in, and think critically about the data we explored. An Invision prototype demonstrating the main flow can be found here.

 

The Data

After exploring various datasets from the city of Pittsburgh, my research question was how does the educational and economic makeup of a neighborhood affect the restaurant characteristics of that neighborhood, and thus the health of its citizens? I believed these topics would be fruitful for exploration because of how they interact with one another. I knew economic factors and obesity were related, but I am wondering how restaurants fit in. Purchasing unhealthy fast food is generally cheaper, so I looked at the density of fast food restaurants in neighborhoods.

data sources

cleansed data

Diving into a number of different datasets, I was able to determine the median household income, number of fast food restaurants per square mile, and obesity rate of each neighborhood in pittsburgh.

 
 
 

Exploration of Form

With the data ready, I began thinking about how to represent that data. Because I was layering multiple types of data, I needed to consider different ways to represent each layer so they would not interfere with each other. By exploring line, shape, weight, color, texture, value, position, and size, I began to develop representations for my 3 datasets. Shades of green represented income, iconography represented three buckets of fast food density, and size represented obesity. By using these methods, I tried to create deep cognitive connections between the form and meaning of the representation.

 

form exploration

 
 

Adding Interaction

As I finalized the form of my representation, I considered how users would explore and navigate the layers of information. First I considered how to bring users into the narrative. A short walkthrough begins the experience by situating the user in a map of pittsburgh and explaining the data being explored. This helps the user understand the slightly more abstracted forms in the later representation.

 

initial walkthrough

 
 

Users are then prompted to toggle on the 3 layers of information. As these layers are turned on, the user begins to see how they interact with one another. Hovering over a specific neighborhood reveals more specific data about that neighborhood.

 
 

layering information

 
 

And the allow users to frame all of this data from the context of one variable, they can sort by any of the 3 layers. I created a simple click-through prototype to demonstrate all of this here.

 
 

sorting