Air Pollution + Health
Conncecting outdoor ambient air pollution with health consequences through data visualization and storytelling
• Data Visualization
• Web Development
• Narrative Storytelling
Project Background: Final project for INFO 247: Information Visualization and Presentation at UC Berkeley
Professor: Dr. Marti Hearst
Team Members: Myself, Astoria Ho
Visit Project Website: https://astoriah.github.io/info247-final-aap/index.html
Practically everyone in today’s world is affected by air pollution. Through narrative storytelling, this project communicates about sources of outdoor ambient air pollution, its global health consquences, and how individuals can protect themselves. This project aims to raise awareness to the negative impact of air pollution on our health, especially to unaware and vulnerable populations through an information web page that illustrates the inevitability of outdoor ambient air pollution and its associated health damages. To achieve this goal, the webpage contains both flat and interactive data visualization elements introducing outdoor ambient air pollution as well as sources of pollution, the impacts of air pollution on health and mortality around the world, and actions or personal interventions that individuals can take to better protect themselves.
PROJECT GOALS:
• Identify types and sources of outdoor ambient air pollution
• Recognize and explain potential health consequences of ambient air pollution
• Propose solutions to mitigate ambient air pollution and evaluate their effectiveness
TOOLS:
• DATA VISUALIZATION: Obesrvable, D3.js
• WEB DEVELOPMENT: HTML, CSS
• DESIGN: Figma
MY ROLE:
• Conduct background research and create a literature review
• Design a site map for the webpage and sketch illustrations for data visualizations
• Implement interactive and animated data visualizations
• Draft and conduct usability tests
• Polish the final deliverables based on feedback from user testing
DATA VISUALIZATION EXAMPLES:
The focus of this project was to communicate effectively using data visualization. The user testing we conducted was crucial in catching unclear aspects of our visualizations and ensuring that the main takeaway and key insights were effectively communicated for each visualization.
Three examples of data visualizations are provided below, and the remaining visualizations can be found on our project website.
1. Brushing and linking: Allows users to explore relationships between factors shown in different representations. In this case, users are able to to highlight a set of points on the scatterplot to investigate if certain geographical areas are associated with different trends of PM2.5 and Attributable Mortality, or select a single point or country on the map to view information related to a specific country.
2. Zoom Animation: Helps to provide context to users about the size of an object. We built a zoom animation to show the relative size of particulate matter.
The image below shows the zoom animation at different stages.
3. Isotypes + Part-of-the-whole: Allows abstract numbers to be better represented. In this visualization, each square is used to represent 100,000 deaths. Variance in color is used to demonstrate part-of-the-whole, with the blue color representing deaths attributed to air pollution. The blue stands out compared to the gray and is the focus of this visualization.
Additionally, pairing text with the visualization make it easier and faster to interpret. The numerical text can be used in conjunction with the visualization to get a better sense of relative size.
GitHub Repository
________________
FEEDBACK FROM PROFESSOR MARTI HEARST:
"Terrific aesthetic design, terrific story, fantastic use of scientific references in an approachable way with proper attribution, excellent use of innovative visualizations that really advance the story and illustrate the data, and superb use of animation!"