Pittsburgh: Wealth and Well-Being

 

Does the wealth and employment rate of citizens affect their physical health and mental well-being?

 

 

This project was a data visualization exercise to illuminate connections between the lifestyle, health, mental well-being and the economic make-up of the citizens in different neighborhoods in an effort to help the viewers recognize, engage in, and think critically about the important relationships.

Individual Project, Communication Design
Duration: Four weeks
Tools: Numbers, Illustrator, Sketch, Principle


king screem.jpg

Exploring data, finding connections

While parsing through all the data sets, I discovered a somewhat clear connection between the lifestyle and health of the citizens with their education and economic status.

 
Screen Shot 2018-01-15 at 2.43.41 PM.png
Screen Shot 2018-01-15 at 2.44.27 PM.png
 
Desktop.png

Making Data visible

Using Wurman's LATCH principles, I moved forward to organise the data and from Yau's Coordinate systems looked at the possible ways of visualising my data. These methods helped me organise and analyse information to set hierarchy, interaction and narrative of the visualisation.

 
 Source: Yau, N. (2013).  Data points: visualization that means something . John Wiley & Sons.

Source: Yau, N. (2013). Data points: visualization that means something. John Wiley & Sons.


smiley.gif

Exploring the Form

Since this visualisation was essentially about the quality of living of the citizens, I wanted the visualisation to have a more humane feeling as opposed to a very quantitative representation.

 


The Final Narrative

 


Visual layering to depict neighborhood characteristics

Artboard.png

Interface Elements

Desktop HD Copy 16.png
 

The Key Stages

 The initial screen shows a number of circles lined up horizontally on the x-axis with the $$ sign denotative of the economic factor. Not much is revealed at this stage. Through progressive disclosure one discovers information on the neighborhoods.

The initial screen shows a number of circles lined up horizontally on the x-axis with the $$ sign denotative of the economic factor. Not much is revealed at this stage. Through progressive disclosure one discovers information on the neighborhoods.

 On hovering over the circles it is revealed that they are the different neighbourhoods in Pittsburgh. One can roll-over the circles to find out how do the neighbourhoods spread out on the income bar.

On hovering over the circles it is revealed that they are the different neighbourhoods in Pittsburgh. One can roll-over the circles to find out how do the neighbourhoods spread out on the income bar.

 On clicking on a specific neighbourhood, one gets more details on the average income of the neighborhood.

On clicking on a specific neighbourhood, one gets more details on the average income of the neighborhood.

 If one turns on the  Compare Neighborhoods  function through the toggle button, then they can select and compare multiple neighborhoods.

If one turns on the Compare Neighborhoods function through the toggle button, then they can select and compare multiple neighborhoods.

 In the next stage, one can turn on and off the three radio buttons: Employment Rate, Physical Health, Mental Well-Being. By turning on the employment rate the neighborhoods spread out on the y-axis.

In the next stage, one can turn on and off the three radio buttons: Employment Rate, Physical Health, Mental Well-Being. By turning on the employment rate the neighborhoods spread out on the y-axis.

 Next, on turning on the physical health button the health of the neighborhoods is revealed through change in the colour and expression.

Next, on turning on the physical health button the health of the neighborhoods is revealed through change in the colour and expression.

 On turning on the mental health tab the clouds appear over the faces to show the quality of mental well-being.

On turning on the mental health tab the clouds appear over the faces to show the quality of mental well-being.

 Throughout the process, one can click on any neighborhood to see quantitative information.

Throughout the process, one can click on any neighborhood to see quantitative information.

 Final stage

Final stage


How I got there...

Iteration #1

Learning: There was too much cognitive overload on screen 1. It's important to differentiate between additive vs integrative approach.


Iteration 2

Learning: My variables seemed very abstract here. I was suggested to adopted a more human quality to the visualisation.


The final Concept

concept.png

Learning

Data visualisation has been the toughest project to crack from conceptually. To be able to transform abstract numbers to tell a story where the variables maintain a close cognitive connection to the context was a huge learning. Through the process I also learnt how to build up similar paced sequences in a story while focussing on the micro-interactions and transitions. Moving forward I want to explore how I can add more granularity of information in the income and employment axis. 

 

Detailed process blog here

smiley.gif