Pittsburgh Data Visualization

Class: Communication Design Studio || Time: 4 weeks || Team: 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 feedback session

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