Visualizing Patterns

Communication Design — Project 3

Learnings and reflections from the communication design studio taught by Stacie Rohrbach at Carnegie Mellon University.

Aim of this project is to illuminate connections among data in ways that help viewers recognize, engage in, and think critically about important inherent relationships, that may not be apparent or may be overlooked. In my case, I will be looking at data in the education sector.

Contents

  1. Understanding Data
  2. Finding Patterns
  3. Parameters of Visualization
  4. Exploring Visualization
  5. Narration & Theme
  6. Visual Cues & Interactions
  7. Class-Review
  8. Refinement
  9. Motion and Prototype
  10. Key Takeaways

1. Understanding Data

November 2, 2021 | Tuesday W1

What data did you review? What relationships do you see emerging in the data that may be meaningful for others to see?

Source — https://data.census.gov/
Source — https://data.census.gov/

I started looking at the following datasets to understand education and its correlation with other social factors — Demographics, Economics, Education, Families, Safety. Some of the questions and relationships that I am beginning to see are —

  1. Is there any correlation between education level and the economic status of a certain population? How does this change for Pittsburgh — Pennsylvania — the United States?
  2. How has the education scenario changed in the past few years?
  3. How does education affect social events like marriage and parenthood for females and males?
  4. What is the relationship between geographical mobility and education?
  5. Do education levels in a neighbourhood affect the crime rates or safety level in the area?
  6. Does the type of household affect the education level amongst house members?
  7. What is the correlation between education levels and gender?
  8. What is the percentage of people who complete a doctoral degree versus high school graduates? Does this percentage change for females and males?

2. Finding Patterns

November 4, 2021 | Thursday W1

What have you gathered from the readings and class activities to date? What data are you considering using in your project and why? What design research questions are guiding your study? What organization methods do you imagine leveraging in the data (LATCH)? What coordinate system(s) do you see emerging as logical and appropriate? What may serve as a logical sequence for people to move through the content (narrative/indexical/combo)?

Scales — LATCH

From my initial understanding, and from LATCH (Location, Alphabetical, Time, Category and Hierarchy) reading, I see value in leveraging ‘location’, ‘time’ and ‘category’ organization methods in the education data. The location can be in terms of how education levels vary for Pittsburgh vs the United States. In terms of categories, two clear ones that can be used are gender (male/female) and age groups.

Coordinate System

For the purpose of education data, representing data using a cartesian system might be most logical. Firstly, because bar charts and graphs can be used to compare numbers across different categories. Secondly, I do not spot any cyclic nature in the categories and data, hence the polar system might not be used much. Although, pie charts can be useful in showing proportions of different gender or age group as parts within the whole.

Source — Data Points: Visualization That Means Something by Nathan Yau

Visual Cues

From the Yau reading, I learned about the reading accuracy of different types of visualizations and how different users might be able to interpret them. It was interesting to note and an important takeaway for me.

Source — Data Points: Visualization That Means Something by Nathan Yau

Exploration

Education Attainment in Pittsburgh- 2019

Initial exploration of data and visualization using google sheets is an interesting way to understand patterns and compare different types of organization styles. Looking at these visualizations and the learnings from class, made me realise to take a step back and think about the scale, ranges and buckets on the x and y-axis.

3. Parameters of Visualization

November 9, 2021 | Tuesday W2

What have you gathered from the readings and class activities? What coordinate system do you propose using? What levels of scale, ranges, and segments do you plan to use and why?

We started the class by listing out the key data sets and parameters that relate to understanding the impact of education. Then we wrote down are research questions that would act as guiding points for the visualization and defined the target audience for whom the visualizations would be meaningful.

Audience

  • Companies looking to invest in Pittsburgh
  • Politicians
  • Policy Makers
  • Social Activists / Women Activists
  • Communities
  • Estate Developers
Class Activity with Chen Yu & Jamie

Sequence/ Path

Next, we explored the core aspects that can be the starting points in the story and common for our group. These emerged as education level across US/PA/PIT, change and variation in education status over time or age group and distribution based on gender. From there all three team members can offshoot to different topics and research questions.

To guide the viewers through the data, I might use a combination of narrative and indexical organization or path wherein there will be an overarching story with visible patterns, more information can be found by having a closer look at different data points.

Scales

Source — Data Points: Visualization That Means Something by Nathan Yau

In terms of scales relevant for us, we figured out the following —

  1. Ordinal Scale — Education levels
  2. Categorical Scale — Gender, Age, Geographical Mobility
  3. Location Scale— Country/ State/ City
  4. Time Scale — Years
  5. Percentage — Number of People

Range/ Buckets

Continuing on the cartesian coordinate system, we explored how the parameters on the x/y-axis are to be distributed in different buckets such that they are neither too many nor too few to lose depth. A good number of parameters is considered around 7–10 as suggested by Stacie.

  1. Education Levels —
  • Less than high school graduate
  • High school graduate (includes equivalency)
  • Some college or associate’s degree
  • Bachelor’s degree
  • Graduate or professional degree

2. Gender —

  • Male
  • Female

3. Number of People —

  • 0%
  • 10%
  • ….
  • 100%

4. Exploring Visualization

November 11, 2021 | Thursday W2

How is the organization of your data informing your visual exploration and representation approaches?

Using one co-ordinate system to present different types of data and using layering through different visual, aural, temporal and tactile cues.

Visual Cues —

  • Position →Location, Category (Proximity), Hierarchy, Time
  • Length → Hierarchy, Percent, Time
  • Angle → Percent, Time
  • Direction → Location, ..., Linear
  • Shape → Category, Hierarchy, Ordinal
  • Area/Size — Hierarchy, Percent, Time
  • Volume → Better to use Tactile instead of Volume
  • Color Saturation/ Value — Hierarchy, Time
  • Color Hue — Category

Aural Cues — Volume; Pitch

Temporal — Pacing; Duration

Tactile — Texture/ Pattern; Weight

Visualization Explorations —

5. Narration & Theme

November 16, 2021 | Tuesday W3

How are you layering information and defining points of entry? What is informing your decisions?

In the visualization, I want to layer information across different locations and times on the same representation in order to bring out a clear comparison.

To bring in more context of education, I am thinking of embedding the whole experience in a book format. So, the title of the book would highlight the topic of research and as users turn the pages of the book they come across the interactive data visualisations and the connected story.

6. Visual Cues & Interactions

November 18, 2021 | Thursday W3

What have you gathered from the readings and class activities? How are you framing points of interaction and what’s informing your decisions?

One of the key takeaways from the Shedroff reading was that an experience is only meaningful once people engage with it. In order to lure people into initiating an interaction, there is a need to create an attraction towards it compared to other experiences seeking the user’s attention. Sometimes there is a need for design to be beautiful to capture people’s interest, otherwise no matter how well the interactions are designed, if no one ends up interacting with it, the experience is not a success. The reading also talked about the difference between data and information, and how data might not be usable unless some patterns and meanings are found within it to convert it into information.

The class activity gave us further clarity on the narrative of how we wanted to present the information. The feedback that I got on the visualizations were about using different visual (motion) and audio cues apart from position, length and colour. For example, the transition between 2010 to 2019 can use some motion to show the increase or change in numbers.

7. Class-Review

November 23, 2021 | Tuesday W4

What did you gain from the presentations today and how are you revising the plan for your prototype?

From the feedback that I received during the presentation, I plan to take the following actions on my visualization —

  • I plan to arrange the circles more uniformly to create an easy comparison. I can further look into the basic shape of a circle and how to incorporate gender in a basic shape.
  • I want to make a digital flipbook to incorporate the feel of education. Thus, I can try serif fonts instead of san serif to give a more printed look to the visuals.
  • I am planning on making the background table and buildings more subtle and changing the background so that the background doesn’t stand out and the book does. This will help me in creating a clear hierarchy amongst the information.
  • Reworking on the speed of motion to show the gradual shift between years so that the audience has enough time to grasp the information.
  • To add another layer of depth and information, I plan to include more quantitative data in the hover state.
  • I plan to explore colors for married and unmarried more, to have more context to it. Overall, I plan to refine the visual style and elements. Alternatively, I want to try using a shape for marriage and color for gender since gender icons might not work on a small scale.

Exploring the layering of gender, marriage and child bird through shape, color and placement.

Color for Marriage (Green — Married, Orange — Unmarried); Shape for Gender; Shape/ Pattern for Child Birth (Dot — Gave birth in last 12mo; No Dot — Did not give birth in the last 12mo)
Shape for Marriage (Ring— Married, Circle — Unmarried); Color for Gender (Blue — Male; Pink — Female); Shape/ Pattern for Child Birth (Dot — Gave birth in last 12mo; No Dot — Did not give birth in the last 12mo)

8. Refinement

November 30, 2021 | Tuesday W5

What are you learning from building your prototype? What decisions are you making and what is informing them?

  • To establish a clear hierarchy in the visualisation, I further reduced the brightness of the background and non-interactive elements to bring focus to the content.
  • Explored different Serif fonts to give a more retro and printed book feel to the prototype. Finally chose to use Sabon LT Pro font because of its more uniform weight for more readibilty and classic look.
  • I chose to go with the second option of depicting marriage through shape and gender through color because it was more intuitive and connected well with more people. Even though the use of blue for males and pink for females is going with the social stereotypes, it works well is quickly understanding the context and better understanding of the visuals.
  • Additionally, I chose to exploit position within the cluster to my advantage, keeping males to left and females to right to enable easy comparison and shift.

9. Motion and Prototype

December 2, 2021 | Thursday W6

What did you gain from the session today and how are you planning to fine-tune your final prototype?

  • One of the main pieces of feedback I got from the session was how to utilize space more efficiently and keep information distinct and clear. To give more spacing to the content, I plan to further increase the ratio of the book in comparison to the controls outside.
  • Further, the key and reference of parameters were missing on the prototype interface so far, so I plan to include the key upfront so that it is easily accessible and makes the content easier to grasp. Further, since only a few references are needed at any given time in the visualization, I can show only the relevant information at a time.
  • Use of motion more effectively by adjusting the timing and speed at which transitions happen between 2010 and 2019.
  • Another observation was that the visualization does a great job at presenting the percentages and creating comparisons through that. But to complement it with a more concrete number, I decided to introduce hover states showing an exact number of people behind the percentages. This would also help in showing the difference between large numbers of the United State relative to Pittsburgh, while the percentages are comparable.

10. Key Takeaways

December 8, 2021 | Wednesday W7

What are your key takeaways from the second project? How might you apply what you learned in the future?

  • This was my first time working with huge amounts of data. So, through the project, I learned to dissect data and information logically and find patterns and understand relationships between different data sets.
  • While the first part of the project was about building my understanding of the project, the second part was communicating the same to the target audience. Here I learned to visualize data while finding a balance between abstract and concrete representation.
  • Similar to the last project there was an element of creating a compelling story through data to present information sequentially. I learned about different types of storytelling structures — indexical and narrative — and how to use them within an interface.
  • Most importantly, I learned about the layering of information. Both in terms of representation and using the different types of visual cues to depict different kinds of information. And secondly on choosing different information sets to show simultaneously and others to show progressively, and thus going in further depth and unfolding information through interaction.
  • One of the things I would want to improve in the future would be the onboarding experience of the platform itself, while some things may be intuitive, to explain the functionality and scope of the rest, it is good to create a functional onboarding to the process. I saw it working well in some of the other student’s projects, and is something I can work on.

Check out the final prototype here.

Thank you for your time! :)

Dreamer by day, designer by night. An incurable cinephile who often escapes into magical worlds while immersed in her books.