Project 3— Data Visualization

Week 1 — 11/10/2020

For this project, we were each assigned to a dataset and the existing data visualization to explore. We were tasked 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.

Analyzing the data visualization

The data visualization which focuses on diversity in tech companies can be found here.

  • What data is introduced?
Image source: Diversity in Tech data visualization
  • How would you characterize the steps in the story?
Image source: Diversity in Tech data visualization
clicking a tab will first sort the column in a descending order
  • What relationships emerge from the visualization?
  • What do you believe the maker wants you to see?
  • Why is their stance important?
some companies started expanding their gender and ethnic diversity since 2016

Analyzing the dataset

  • What other relationships might be inherent in the data and of value to highlight?

Week 1–11/12/2020

Richard Wurman Reading

Sketch by Stacie in class

Data Visualization Examples

Income Disparity in the States

  • What facets of your data are you considering using in your project and why?
  • What design research question is guiding your project?
  • 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)?

Week 2–11/17/2020

Visualization Components by Nathan Yau

The ingredients of visualization can be broken down into four components: visual cues, coordinate system, scale, and context.

Four components of visualization
In-class review of Visualization Components by Nathan Yau, notes by Stacie

Interactive Sensory Patterns by Stacie Robrbach

Design strategies that facilitate concrete learning are:

  • What organization systems do you propose employing for each type of data and why?
  • What levels of scale and ranges do you plan to use and why?
  • Categorical
  • Percent
  • Time
  • Location

Week 2–11/19/2020

Research on Diversity in Tech

I did secondary research around diversity in tech, and found some high level conclusions:

  • In tech leadership position, white employees are significantly over-represented relative to their overall percentage of the US population, while Black and Hispanic/Latino employees are significantly under-represented.
  • This article mentions that prominent tech companies including Apple, Facebook, and Microsoft began sending out diversity reports since 2014. However, reports show little change in last six years. Among leadership and technical roles like coders and engineers, the diversity numbers are even lower.

Week 3–11/24/2020

Visual exploration of representation

I started visual forms exploration by assigning each type of data a unique variable/cue, and tested with different approaches for representation. I did 3 rounds of sketches.

variables/cues I defined for each scale
  • I would go with the direction of using color hue to represent race with six ranges, because identifying six colors has a lower cognitive load than differentiating six shapes or textures.
  • If use shapes to represent gender, then by assigning each gender icon a different color, I could use this way to show each racial group.
  • Thinking about layering the information, I wonder would job category be another layer of information added to icon or it would be the axis so the positions of icons would indicate the percent. I will explore both directions.

Week 4–12/1/2020

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

  1. Pathway through my data
  • In order to build inclusive work environments, offering diverse individuals leadership positions is important so that underrepresented groups can have the ability to make changes.
  • Asian employees make up a greater share of professional workforce than other minority groups, but their representation decreases at the leadership positions. However, the stairway leading white men to the top widens as it rises.
  • Executives
  • Managers
  • Technical roles(Professionals & Technicians)
  • Support roles(sales workers, administrative support, service workers)
  • Craft & Labor roles(craft workers, operatives, laborers & helpers)
  • if using sound to present time is easy to discern, maybe use temporal aspects that slowly present information over time
  • use skin tones for racial groups

Week 5–12/8/2020

During today’s work session, I discussed my progress with Amrita and here were feedback I received:

  • There is a close cognitive connection between skin tone colors and racial groups. I would like to stick with using color to show race.
  • The shapes I used to show gender is a little hard to differentiate. I might consider using the same color background under the icons’ lineworks. The icons look playful, but they might reflect some stereotypes about gender identity.
Left: updated visualization showing gender ratios in 2014; Right: original visualization showing gender ratios in 2018

Week 5–12/10/2020

  • What did you gain from the testing session today and how are you planning to fine-tune your final prototype?
Left: Global gender ratio in tech companies; Right: Demographic representation in Apple in 2018
Viewers will see details about each group’s representation when hovering over the icon.
  • People like the interaction I plan to prototype that when hovering over an icon, all the same icons are highlighted, meanwhile they can see more information regarding the group of people the icon represents. I would like to keep this iteration for my final prototype.
  • I used different coordinate systems(although both are cartesian) in two types of frames. I was asked if I could combine them into one single visualization with interactions to reveal different types of data (gender ratio and demographic representation). I have done a couple of iterations for coordinate systems. Since my big question is related to employee representation across job categories, Stacie suggested that it still makes sense that I make “job category” as one axis so that viewers can compare information, and the other axis could represent amount.
  • During the testing session with classmates, I got feedback that to make gender icons more mindful. The face icons with light color slightly confused my audience, because I used the same color to represent white people. Also face icons could relate to stereotypes that men have short hair and women have long hair. With this consideration, I plan to explore other icons representing gender. I would like to pursue a more abstract form.
  • When I highlighted the patterns I found that the way leading white men to the leadership roles get wider as it rises, which is opposite to Asian employees. Alex would like to know what does equality look like. Based on this feedback, I consider adding “US population” as a range or reference line for people to compare with.

Design decisions I made for my final prototype:

Left: Iterations for coordinate systems; Right: Iterations for representing race and gender

Week 6–12/17/2020

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



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store