Project 3: Representing Patterns

Carnegie Mellon University MDes Year 1

Eugina Chun
14 min readNov 7, 2023

--

Week 1: November 1st

1. Data Visualization Project

For the next X weeks, I will be learning how to tell a compelling story through data visualization not limited to aural, temporal, and/or physical forms of representations.

2. Inspirations & Key Takeaways

During class, Vicki and Stacie shared effective and compelling examples. Here are things I want to keep in mind when looking at my data sets.

Storytelling

Which data should should be included, emphasized and in which order? In other words, data hierarchy.

Contrast / causality

Is there a beginning and end impact of the data journey? The stark difference between the beginning and end size of Napoleon’s march to Russia is shocking.

Visual form

“We are designers.” How can I make the right data beautiful?

Interaction

How will the audience be interacting / looking at the data? Is the participation passive or active? How can interaction add to storytelling?

Legends

Good ones don’t require a second look

Napoleon’s Russian Campaign & Suicides in the Netherlands

3. My Topic: Drugs & Alcohol

Scope

I am interested in understanding addiction and death from drugs and alcohol. I will focus on the United States to show that an affluent country is often the most susceptible to substance use and that its people are actually suffering from the lack of bodily freedom.

Audience

Young people who’ve yet had the exposure to drugs and people currently partaking in the activity.

Data sets I want to look into and why

  1. Death rate keeps rising for the US from drugs and alcohol
  2. The uses from different age groups and at what age it gets picked up
  3. More younger people are starting to self-harm from drugs and alcohol use, there has been a shift in the age bracket
  4. The onboarding order / layering for smoking cigarettes, alcohol, marijuana, hard drugs
  5. Frequency of use and what categorizes it as addiction

Hypothesis

The younger the person is when exposed to drugs and alcohol, the higher risk they have for addiction, use of other drugs and death.

Relationships between data

  1. It is important for the audience to see that younger exposure to drugs and alcohol creates a higher chance of layering with other drugs, binding them with more chances of addiction. Layering drugs may water down the severity of its use. It may not seem like addiction if they partake in the activity every six months while smoking and drinking every weekend.
  2. Addiction creates invisible shackles around our limbs which causes people to remain stuck in a helpless cycle of dependency.
  3. I think I need to define addiction through data
Data sketching ideas

We come. We go. And in between we try to understand.

-Rod Steiger

Patterns lead to understanding.

4. Learning Goals

  • Be surprised of my outcome from a creative way of expressing data
  • Ask for feedback early on and frequently from instructors and peers
  • Being bold in every decision of my process, not being afraid of failure or success

Week 2: November 6th

Planning (LATCH-P)

I am currently comparing deaths from alcohol and fentanyl overdose because it has better data than heroin and opioids. I’d have to double check my current data but there is significantly more deaths from alcohol than fentanyl which surprised me. Also, even though the US have a slightly higher female population, more males die from overdose which is why I am considering adding gender to one of the categories. Other categories that I am considering are ethnicity and GDP per state. I currently have four states selected for location but I would like to see if I can map out every state because I feel like showing the top and bottom two states will feel like such a big disparity with each other.

I think I will include leap years starting from year 2000 because that will show a greater jump of death rates to the viewers. For ranges for deaths, I will use 100,000–2,300,000 increasing by 100,000.

WIP spread sheet of data ranges
Deaths for alcohol and fentanyl

Week 3: November 13th

  1. How is the nature of the data informing your approaches to representing the information; what is the goodness of fit (ex. red=hot)?

As I worked on the flow, I realized the gender, age, and ethnicity data I had was for the entire U.S. Therefore, I didn’t believe it would be accurate to apply this data for the state and the story I was trying to tell.

1. I started out as a mostly linear flow and with the interaction to understand the victim demographic at the end
2. I then created a second sub branch to toggle between different death rates, GDP and drug type by state
3. I cleaned up the beginning by telling the story from a single drug type. Then, I would show the drugs effect on each state by total number of deaths, death rate and GDP. I was obsessed with funneling from the entire country linear flow to the granular level of interaction for the final death demographic.
4. Final WIP flow shows the demographics being branched from the national data not state, then showing the death rate and GDP by state

2. What information is important to take in simultaneously/layer in order to recognize relationships? Include visuals as warranted.

For layering, I think I want to show the total number of deaths from alcohol and drugs in the U.S by each year in the very beginning. Under each dot will have a breakdown of deaths by different drugs. In doing so, I hope the audience will see the transition from alcohol starting off as the deadliest drug in 2000 but then placing third after the overtake of opioid and fentanyl by 2021.

Visual for the first two boxes of the flow
WIP data ranges

3. Where do you envision providing your audience with options in how, and what, information they take in? Explain via a diagram of your pathway, noting points of interaction.

After the cartesian flow of zooming in from U.S., deadliest drug and demographic, my initial idea was to use temporal representation for death rate. However, I am not sure how this will work now because the gender, ethnicity and age is not applicable to state related data. Perhaps I should stick with all cartesian coordinate system throughout. The idea below was to show a figure being consumed by Opioid after a calculated number of seconds in the highest death rate state, West Virginia. After said seconds, the timer will reset to the next victim. The audience would also be able to toggle between different gender, ethnicity and age.

Temporal sketch exploration to represent deaths from opioids in West Virginia

Week 4: November 20th

Before Thanksgiving break, I did 5 rounds of speed dating with peers looking into Internet usage. After break, I will start focusing on executing visualization from my data.

Slides for speed dating

Speed Dating Feedback (5)

  • Clarify demographic connection between state and nation or perhaps get rid of it and focus on the nation’s demographic
  • Consider using a map of the U.S. for geography of individual state deaths
  • The meat of the story is the ethnic group of American Indians, if using state data, add the population to draw comparison to number of deaths, I can also consider GDP by ethnic groups instead of by state later
  • What if the temporal graph starts with the number of OD deaths and as time passes, they disappear?

Week 5: November 27th

Landing

For the first page, I started with a bar chart by year divided with the number of OD drugs. I liked that users would be able to see how certain drugs contributed differently over the years. However, I felt that a bar chart wasn’t interactive. I then decided to get rid of the view by year and stick to view by drug type for each year.

I kept the coloring system from the bar graph but shifted into a granular representation of deaths. However, I felt that while the number of circles was an accurate representation, it looked messy because the circles wouldn’t be bound neatly inside a larger circle.

I finally arrived at a solid color representation with the size signifying the number of total OD deaths by drug type

Interaction

As the user scrolls through different years with the scrubber in the control panel, the user is able to see not only see the size of the circles increase over the years, but see how certain drugs took over the overdose deaths. For example, while alcohol was the leading OD drug in 2010, opioid became the largest representation in 2021. When the user hovers over opioid, the solid circle will show a granular preview of the people who died.

Timeline interaction with hover

Viewing the demographic of OD deaths

When they enter the drug type, I wanted the users to first face the total number of overdose deaths represented in the most granular way as much as the screen space allowed. Then, they will be able to filter by age, gender, and ethnicity.

Also, the idea of the left control panel is that the users will be able to adjust the year, add or remove any drugs from any view at any point of their journey.

Initially, I started with human figures to represent deaths. However, I changed them to circles to keep the shapes consistent from the hover state of the previous screen

Filter by age and gender

After seeing the total number of deaths, users are able to filter to learn more details of which age and gender group are more susceptible to opioid overdose deaths.

Filter by age and gender

Storyhighlight: Ethnicity

During my data exploration, I was the most surprised at the highest death rate of the American Indian / Alaska Native ethnic group because they have the lowest number of population. Initially, I wanted to show the total number of deaths in comparison to the ethnic group’s total number of population. However, my feedback from Carol was that I should keep the size of the circle consistent from the previous screens. It shouldn’t change in size to represent amount. Plus, when I did the calculation to get the population data, I realized the visual represenation won’t be as striking as the actual death rate. So currently, I am showing the total number of ethnic population in blue bars with the death rates in red. This is the final screen of my pathway.

Right is final WIP
Ethnicity and population data

Next steps

My goal for this pathway was to show which demographic is the most susceptible to drug and alcohol overdose deaths. I wanted to show that there was a person behind the large circles from the beginning screen. I don’t know if my flow is doing what I hoped for. I would like help to make my narrative and representation stronger.

Week 6: December 4th

Trouble representing death rate

When I found out that Native Indian people had the highest death rate in 2021, despite their entire population making up only 1.3% of the country, I was determined to show this. Below, I represented the total population of the ethnic group in blue and the red gradient as the death rate. However, I was not happy that this graph didn’t immediately make sense to the viewers. While it was interesting to see the death rate and total ethnic population representation together, I was missing the key representation of my story, which was the total number of overdose deaths. I also received a feedback that this along with the following iterations below, due to my strict use of circles, could be a a data visualization for any story. This challenged me to look at my current work and question, if I were to take all the language out of my work, would it speak about overdose deaths? The answer was no.

Death rate exploration

My feedback from Stacie in class also led me to understand that since I am showing the total population of the ethnic group at the end, I must show the total population in the beginning of the flow to be able to make the reference with the death rate. In order to show this data, I explored showing the screen below as the first representation. The total overdose deaths is very small compared to the total population.

Total US population in 2021

Trouble representing age and gender

My next key representation was to understand the age and gender of deaths. Below, I explored representing the number of deaths again in circles. At first, I enjoyed the simplicity and consistent use of circles. However, after the feedback, I started to see that they didn’t do justice to the story I was trying to tell, in other words, I was trying to tell the story of a person, not a competition between different amounts.

Age and gender exploration

Trouble representing drug type

This meant that I had to go back to my icon representation of humans and abandon my colors for different drug types which also meant that I had to come up with a different way to show overdose deaths from different drug types.

Exploration for using different colors for drug types

I then came up with the idea of tombstones to represent deaths. However, I noticed that the data for some drugs in 2010 would be too tiny to show all of the labels. This is when I thought their labels should be fixed. Then I saw that these shapes reminded me of the Korean style graves that protrude from the ground in a dome shape. Also, while I did enjoy that in prototype shown above where the user can focus on the shift in sheer volume, they had to hover over each circle in order to see the numeric value. I decided to show the numbers along with the volume shift in my final prototype.

Exploration for representing overdose deaths between different drug types

I started to build out the flows for demographic data. I was still resisting with my thought that using human icons would feel too simple and direct. So I wanted to see what I could do using a polar coordinate system. I explored this to show that drug overdose deaths end lives too early. Below, you can see the number 78 marked in gray which when hovered, would show that it was the average age of death in 2021 U.S. While you could see many people were dying before reaching the halfway point of their life, again, I wasn’t sure how legible this would be right from the start. The black below is my attempt to divide the male and female deaths.

Age and gender exploration polar coordinate system 1

Accepting defeat, or accepting that clarity wins, I started building out the page with human icons. At this stage, I got rid of the option to toggle between different drug types once after you entered a specific drug type. I only kept the slider to show the total deaths caused from the drug. After completing them, I realized that when playing in the Figma prototype, the jump between different screen lengths did not look great. I also did not want to raise the number of the icon legacy because I did not want to represent a half cut human icon. I would have to fit everything into the same screen length.

Age and gender exploration 2

Below you can see why I need an icon that represents 100 deaths and no more for Native Hawaiian / Other Pacific Islander representation.

Ethnnic group representation exploration

Week 7: December 11th — Final prototype

Final Medium Link

The biggest changes made for the final prototype was eliminating colors to represent drug types. Once you’re in a specific drug view, regardless of which drug, you see black icons unless you’re viewing different ethnic groups. This also led me to get rid of the different drug views from the control panel.

Coordinate system, scales and ranges

  • Coordinate system / I am showing a data point of a cartesian coordinate system in each screen to show yearly deaths because I want to show growing number of deaths overtime.
  • Scale / Category / I represent different drug types, gender, age groups, ethnic groups because they categorize the same whole deaths in a different way
  • Scale / Amount (Hierarchy) / Numbers are used along with size of the graves and number of human icons to represent the overdose death amounts in different categories. I anchored the 2021 for some visual order but understand that this hierarchy isn’t fixed to serve data points of that fluctuates depending on the year. For example, while I can see the male and female category staying fixed, I imagine the representation and legend for the ethnic group rearranging itself from least to most number of deaths.
  • Range / For buckets, I have age groups that are directly from the data I found.

The path

  • It’s a mix of linear and indexical. Users will scrub through the yearly timeline to see the change in total overdose deaths. However, at any point, they can delve into any drug type in any year to understand the deaths of age group, gender and ethnicity of that drug type.

Representation and interactions

  • Visual / I believe it’s appropriate for my topic. Deaths don’t evoke any signs of life, movement or sound. Images often outlive life. I wanted every part of the data to be discovered through some level of interaction which I think I achieved.

Reflections

What story you’re trying to tell matters and it shapes every aspect of your project. I think I am starting to see the importance of a good research question. The research questions becomes your guide but also your constraint. Even though you assume there might be exciting connections not stated in your research question, you have to let go sometimes. Staying true to your question throughout your work is just as important to having a good question. I started out with which demographic was the most vulnerable to overdose deaths. Now, I am curious what shaped this demographic and I discovered an unusual death rate for the Native American group.

Colors are so important. I was bummed too see the low contrast between some ethnic groups. I was also surprised to hear how much of a distraction the tombstones were. I thought they were okay because I made them gray but apparently it looked white to everyone. I am happy that I stepped away from coloring the different drug types and used it on the ethnic groups (which I was so opposed to in the beginning). I learned that not everything can be shown with colors because there’s a hierarchy to the information you’re trying to show. Plus, it created a constraint for me which helped me come up with the grave shapes.

The way I see the world matters and is helpful for others to understand when communicated in patterns.

--

--