Michael Deal: Charting the Beatles

Visualising Patterns

Process blog for Project 3 in Communication Design Studio with Stacie Rohrbach| Semester 1 Design for Interactions| School of Design, CMU

I’ve been excited about this project since the start of the semester. However, when Stacie presented us the datasets last week I felt a little lost looking at them. Having never really handled datasets before this, parsing through the data sets to find interesting relationships seemed like a daunting tasks.

Spending some time comparing them I found something emerging between illegal dumpsites in Pittsburgh and the demographic living there. I am interested in exploring the area of anthropocene environmental impact. I looked at data regarding air, water and soil quality. But this was drifting towards just show the impact on the environment however i want to look at if there is a pattern in how human beings are getting affected by it. So Hence so far the question I’m exploring is —

Do the illegal dumpsites in Pittsburgh have an affect on the demographic and quality of living in the surrounding area?
Datasets: Dumpsites, demographic, income level, housing price, water and soil quality(maybe?)

Class discussions:

Reading from Yau: ways of organising data
Reading from Wurman: ways of organising information

Coordinate Systems:

  • Cartesian Systems (x/y/z) comparing 2–3 sets
  • Polar( parts to whole)
  • Georgraphic/Location


  • Linear/ Hierarchy (0,1,2,3)
  • Categorical
  • Percentage
  • Logarithmic( 0, 10,100,1000)
  • Ordinal/ Hierarchy( good, bad, ugly)
  • Time
  • Alphabetical( useless for data)
Okay, so I’m officially changing the data that I’m looking at. The new topic that I want to address :
How does the health of a neighbourhood compare against the affluence of the same?

Is there a pattern between the lifestyle diseases like hypertension, obesity, diabetes, high cholesterol and depression have a correlation with the income levels, property value assessment and percentage of people employed in the neighbourhood?

We discussed in class today about the difference between:Making for understanding and making for communicating

So far the patterns that are emerging out from the data that I’m looking at:

Median Income vs Obesity

I see a pretty direct pattern between the median income levels and obesity in neighbourhood.

Median income of neighbourhood vs Post-graduates in the neighbourhood.

Obesity vs Percentage of population with educational attainment: less than high school

Obesity vs Percentage of population that has attained a Bachelor’s Degree

Note: Asking a question is better than thinking of what i want to show.

what do you want to learn?

Steps of narrative


  • LATCH: Hierachy
  • scale: Percentage
  • range: 0–70%
  • buckets: (0–17.5%)(17.5–35%)(35–52.5%)(52.5–75%)
  • coordinate system: X/Y or Polar( maybe?)


  • LATCH: Hierachy
  • scale: Linear
  • range: $0-$100,000
  • buckets: (0–20,000)(20,000–40,000)(40,000–60,000)(60,000–80,000)(80–100,000)
  • coordinate system: X/Y or Polar( maybe?)

Education Attainment

  • LATCH: Category
  • scale: Ordinal
  • range: highschool-post-graduates
  • buckets: Highschool dropouts, professional degree, bachelors degree, ,masters degree
  • coordinate system: X/Y or Polar( maybe?)



Concrete/Realistic — — — — — — — — — -Abstract

Eno — — — — — — — — — — — — — — → Reactivity

← — — — — — — — — — — — — — — :)

Representation should be abstract but connect to the context.

Goodness of fit between form and content.- Don Norman

Visual Variables

  • line( ________,_ _ _ _. …………)
  • shape
  • weight( line weight)
  • colour( hue/saturation)
  • texture
  • value( contrast)
  • position




  • pacing
  • duration
  • frequency

Close cognitive connection between form and connection


Initial explorations
Key for visualisation
Other interesting visualisations I saw


Initial exploration

This was my first shot at visualising the health vs wealth data sets

Health on left and affluence on the right
Detailed lifestyle diseases and affluence denominators per neighbourhood
Focus on each disease
Detailed information on male female data


  • Name of the neighbourhood, should be in the middle( maybe?)
  • interactivity in the 2nd screen not clear
  • do medicines represent diagnoses or medication?
  • I don’t need to breakdown the money aspect
  • percentage on pill is well displayed
  • Show more detail for median income
  • There is a disjoint between S1 and S2
  • Bottles can be deemphasised through colour
  • Make transitions smoother.
  • Keep dedicated space for elements

Stacie: Screen 1 has too much cognitive overload. Do quantitative vs qualititave comparison( e.g. Show degradation of health). It looks like two projects. Zoom into one information and then show the correlation with the other.

Version 3

Reflection: I feel that with this version I have managed to checklist most of the rules of using different variables and making it more integrative. Showing it to the other people, I see that people understand the Narrative as well. 
However my visuals seem very abstract here and I’m still not sure how I can make them more realistic.

Feedback: Stacie says that I should shut my computer and go take a walk… And think about the Human element.
I think I might finally be getting the point of this project.


Think about:

  • Mood of the piece: typeface, colour
  • Interactions
  • How does the piece stand at any given time.



Last week into the visual design phase. Stacie suggested that it needs to be more in line with the mood of my topic. Starting with the tweak of the colours and the fonts. I’m using Taz (absolutely love it)and PT mono.

As I was getting into the weeds form and colour selection, I realised that color could be so culture specific. Especially what good or bad health could mean in different parts of the world. Or the what the color of a face could indicate about a person’s emotions.

One of the other difficult things that I was trying to resolve was depicting employment and unemployment. Employment is pretty straight forward to grasp but the depiction of unemployment has been not so easy. So at the moment I’m going forward with the dimple technique of striking the briefcase(which suggests employment) to show the polar side. This is something that I want to test tomorrow. Let’s see how that goes.

Feedback session on 12.07.2017

To be fixed:

  • Visual design
  • colour of the faces
  • Hover states
  • Fix the sketch face style
  • Legend for faces
  • Extend y axis
  • Explore eyes and expressions MORE!!!
  • Animations!


I clearly felt that the tweaking the visual design could have a huge impact on the design. So after the conversation with Stacie. I decided to have fresh go at the visual design.

This seemed to be going in the right direction. Doing this I realised a lot of smaller details about UI design. Like how the radio buttons that i had for secondary navigation usually have single selection but I have the option of multiple selection. Location of the category also made a huge impact. 
I played around with the temporal aspect by showing heart beats for health but I decided to drop that because it wasn’t directly indicating the intensity of the physical ailments. In addition to that it was distracting the rest of the peace altogether.

I tried to pay attention the micro-interactions as to how the user will discover the neighbourhood by hovering over it. Also looking into the compare mode as well.


I had been planning on doing my final prototype in keynote as I had done the first one. Keynote seems like a nifty option for doing animations of the individual elements. However, I wanted to achieve the rollover effect to discover the neighbourhoods and thus I decided to go ahead with Principle. Principle is pretty straightforward but annoying because random elements keep jumping out in transitions and took me a long time to fix those.


So the projects draws to a close. My presentation was OK!. I feel that I have just begun to wrap head around the finer aspects of visual storytelling, balance of elements and the use of iconic/metaphoric elements. Some of the feedback that i got-
- See if the overlay faces have any logical reasoning behind it.
- Cluster income and education brackets.
- Emojis make more sense now!

I feel that because of some last minute glitches I wasn’t about to do full justice to bring in interactivity. I think that I want to spend some adding the right transitions to finish of the piece properly. Also make some minute VD adjustments(it feels like that never ends!).

Mental Note: Some of the presentations that I want to record for later reference- Suzanne, Gray, Zach, Devika, Brendon, Angela

I can’t believe the class is over. Data visualisation has been the toughest project to crack from conceptually. But it feels like I’ve learn’t so much but at the same time everything is come to a close together at the same time so it is overwhelming. I feel that I don’t remember anything right now. I guess I would need to do some reflection during the winter break to think about how my has learning progressed through the semester.

Ok.Time to catch some much needed sleep.