Δ Dollar Over Time
This project is a work in progress.
Background
​
​
I have a keen interest in economic history, often spending my leisure time delving into it. I am particularly captivated by the disconnect between the evolving economic reality and the societal perception of it, which can sometimes be worryingly wide.
Many Millennials often lament that while the economy has undergone significant transformations, especially since the 2008 recession, the expectations of the older generation have not always adjusted to this new reality. As someone opposed to ageism, I recognize that not all older individuals are oblivious to the economic challenges faced by the younger generation, with many having raised concerns about increasing economic inequality for years. However, there still exists a considerable portion of both older and younger generations who struggle to comprehend the changes in average Americans' buying power and cost of living over recent decades. This necessitates a visual tool to simplify the complexities of the evolving economic landscape.
The reasons behind escalating prices and growing inequality are multifaceted and often debated. Factors like policy changes, tax cuts for the wealthy, rising corporate power, climate change, wars, weakening unions, declining US influence, environmental degradation, and approaching planetary resource limits all contribute. Although pinpointing exact causes and effects is challenging, especially when using multi-model and systemic thinking, a shared visual representation of our economic landscape can foster discussions grounded in a shared understanding. Design plays a crucial role in establishing this common ground and, consequently, in reducing the social divisions prevalent in our society today.
​
Project Objective:
​
My ambition is to develop an application that employs accessible visual language to elucidate the quantitative dimensions of the economic shifts in America over the past four decades. This tool will aim to facilitate more informed discussions by providing a shared foundation of the current economic state of the average American.
Discovery Phase
Playing with ChatGPT4 and ideas
GoodNotes is great for writing and synthesizing
I'll be using this CPI list from the Federal Reserve
The Consumer Price Index (CPI) is a measure that examines the weighted average of prices of a basket of consumer goods and services, such as transportation, food, and medical care. It is one of the most widely used indicators for inflation. A rise in the CPI indicates an increase in the cost of living, while a decrease signifies deflation.
​
I think the broad CPI is useful, but I want the user's experience of changing wages and prices to have a tangible feeling. I'm going to break down the CPI through different categories: clothing, computing, food and beverage, housing, TV's, cars, tuition/school/childcare, toys, public transportation, household energy, college, and medical care. I've decided I'll start playing with some design ideas before I build some visuals in Python, so that I have an idea of what sorts of visualizations I want to create.
I rendered this graph using Python. I can see the cost of living increase from 1984-2021
​
User Personas
​
Brenda, Retired Historian
-Background: Brenda is a retired historian who has a passion for understanding how people lived in different eras. They enjoy exploring visual representations of historical data.
- Age: 65
- Tech Proficiency: High
- App Usage: Brenda uses the app to explore how the cost of living has changed over time, particularly focusing on the impact of different events on consumer behavior.
- Needs: Brenda values clear explanations and a user-friendly interface that allows them to interact with historical data easily.
​
Aisha, High School Student
- Background: Aisha is a curious high school student who is interested in learning about different subjects outside of her curriculum. She's not an expert in economics but wants to explore the topic.
- Age: 16
- Tech Proficiency: Moderate
- App Usage: Aisha uses the app to gain a basic understanding of how the cost of living has evolved over different time periods. She enjoys the interactive aspect of the visualization.
- Needs: Aisha needs an app that explains concepts in simple language and provides engaging visuals to keep her interested.
​
Mei, Accessibility Advocate
- Background: Mei is an accessibility advocate who focuses on creating inclusive experiences for all users, regardless of their abilities. She's passionate about ensuring that digital content is accessible to everyone.
- Age: 40
- Tech Proficiency: Moderate
- App Usage: Mei uses the app to assess its accessibility features and provide feedback on any potential barriers faced by users with disabilities.
- Needs: Mei values an app that follows accessibility guidelines, provides alt text for images, keyboard navigation, and other features that make it usable by everyone.
​
Design Ideation
Experimental visualizations
I settled on a simple graph with a bar along the x axis, two points that can be toggled, and icons that can be selected/deselected.
Now that I've got a basic design hashed out, I can start building.
After integrating some Python, some HTML, CSS, and JS, I've got a basic visualization.
Next, I went heavily into the design phase in Illustrator. The next step is to jump into some coding and make these visuals interactive!
Then, I made a background animation of the clouds with CSS + HTML to add a little spark to the visualization
Then, I linked the CSV to the house image, and created text that would display the year that the size of the house correlates to. Next, I will create text to display the percentage increase relative to the year 1984.
I used GitHub CoPilot for the next step and wow, did it help! I successfully added the percentage change since 1984, which I'm super happy about. I feel like I'm nearing the finish line with this project!
After that, I added microinteractions to the icons.
Next, I paused the csv and slider interactions while I refactored the code and focused on cleaning up the functions, and allowing the icons on the left to toggle the main svg file featured in the visualization.