Design an Interactive Subway On-Time Performance Visualization
Overview
What this challenge is about.
Create horizon charts for 12 subway lines, filter by day/line/station, and export a static PNG. Earn a verifiable certificate.
The scenario
The Sistema de Transporte Colectivo (STC Metro) operates Mexico City's 12-line, 195-station subway and is expanding its public open-data portal to publish service-quality metrics directly to riders. On-time performance is a politically sensitive, high-traffic metric, so the visualization must be both rigorous and legible to a general audience.
The Brief
What you'll do, and what you'll demonstrate.
Design a public-facing, interactive visualization of subway on-time performance by line and hour-of-day that is legible to commuters, performant at full data scale, and refreshable monthly by a non-technical communications team.
Earning criteria — what you'll demonstrate
- Choose and defend a dense-data visual encoding (horizon charts in small multiples) against alternatives for a public audience
- Implement a layered D3.js + WebGL visualization that stays interactive at production data volumes
- Design brushing and drill-down interactions that answer concrete questions a rider or journalist would ask
- Build a repeatable static-export pipeline that a non-technical team can operate unaided
- Apply accessibility and branding constraints (color-safe palettes, browser support) to a civic-facing data product
Program Fit
Where this fits in your program.
Sharpens the same skills your degree expects you to demonstrate.
Aligned coursework coming soon.
Skills
Skills you'll demonstrate.
Each one shows up on your verified credential.
- D3
Apply d3 to solve real industry problems and demonstrate production-level capability.
- Webgl
Apply webgl to solve real industry problems and demonstrate production-level capability.
- Interactive Visualization
Apply interactive visualization to solve real industry problems and demonstrate production-level capability.
- Horizon Charts
Apply horizon charts to solve real industry problems and demonstrate production-level capability.
- Small Multiples
Apply small multiples to solve real industry problems and demonstrate production-level capability.
- Static Export
Apply static export to solve real industry problems and demonstrate production-level capability.
Careers
Career paths this challenge builds toward
Completing this challenge demonstrates skills that transfer directly to these roles:
Data Visualization Engineer
This challenge mirrors the core of the role: turning a large, messy operational dataset into a defensible, legible visual story. You practice encoding selection, building dense interactive charts, and justifying design tradeoffs to non-technical stakeholders — exactly what dataviz teams hire for.
This challenge sharpens
- d3
- interactive-visualization
- horizon-charts
Frontend Graphics Engineer
Shipping a layered D3 plus WebGL interface that stays performant at scale, with a reproducible export pipeline, is the daily work of graphics-focused frontend engineers. You build the rendering, performance, and tooling skills that production visual products demand.
This challenge sharpens
- webgl
- d3
- static-export
Civic Tech Frontend Developer
Public-sector data products must be accessible, honest, and maintainable by non-engineers. By designing for a general audience and handing off a self-serve monthly export, you gain the civic-tech skills of building transparent tools that outlive their original developer.
This challenge sharpens
- interactive-visualization
- small-multiples
- static-export