This interactive web based data visualization explores the devastating and lasting effects of childhood blood lead exposure in Philadelphia.
Through a series of scrollytelling transitions powered by D3.js, it connects blood lead levels to housing, historical practices, education, and playground infrastructure, all within the city’s geography.
- Scrollytelling design that synchronizes text and visuals as the user scrolls.
- Horizontal Dot Plot highlighting the connection between academic acheivement in younger children and blood lead levels.
- Bar chart showing comparative lead exposure in major U.S. cities.
- Zip-code-level choropleths showing:
- Lead exposure in children across Philadelphia
- Housing age in Philadelphia, including an animation of demolations from 2007 to 2025
- Map overlays highlighting:
- Historical lead smelter sites
- 500-meter impact zones around each smelter
- Elementary schools and playgrounds located within contaminated zones
- Tooltip interactivity showing site names on hover.
- Proportional Symbol Map with color encoding to show sites with safe/unsafe levels of soil, and radius animation showing on quantitative soil lead content
- Clone the repository.
- Open the project in a code editor, such as VSCode.
- Start a local server
- From the project root directory (where index.html is located), run: python3 -m http.server 9000
- Open browser and go to:
- D3.js v6 – Data visualization library to create dynamic SVG maps and charts
- Waypoints.js – Library to trigger functions on scroll, enabling scrollytelling effects
- TopoJSON + GeoJSON – For rendering and mapping spatial boundary data
- CSV files – For tabular data on smelters, housing, schools, playgrounds, soil samples, and more