Build an Interactive D3 Visualization of a Subway Network's On-Time Performance
Overview
What this challenge is about.
Use the provided open-data CSV (around 14M arrival records). Design a small-multiples visualization with a horizon-chart encoding for each of 12 lines vs hour-of-day, with interactive brushing across days, lines, and station. Implement in D3.js with a WebGL layer for the station-detail drill-down (Deck.gl is acceptable). Build a static-export pipeline (Puppeteer to PNG) for the comms team's monthly snapshot. Deliver source, a hosted demo, a 4-page design memo justifying the horizon-chart encoding, and a 1-page comms-team handoff.
The Brief
What you'll do, and what you'll demonstrate.
Ship a public-facing D3 + WebGL visualization of subway on-time performance with monthly static-export capability for the communications team.
Earning criteria — what you'll demonstrate
- Implement small-multiples and horizon charts at scale in D3
- Layer WebGL into a D3 application without losing accessibility
- Design interactions (brushing, drill-down) that serve a public audience
- Build a static-export pipeline that non-developers can run monthly
Program Fit
Where this fits in your program.
Sharpens the same skills your degree expects you to demonstrate.
Skills
Skills you'll demonstrate.
Each one shows up on your verified credential.
Careers
Roles this prepares you for.
Real titles. Real skill bridges. Pick the one closest to your trajectory.
Career mappings coming soon.