Drawing Transit
A practical, interactive guide to programmatic metro maps. From a single line to a full network — with live code you can edit as you read.
Start the guide →- Why This Guide Exists A practical introduction to drawing transit maps from data.
- The Simplest Metro One line, two stations. That's all a metro map is — everything else is decoration.
- A Line With Character Five stations, proper spacing, and the first signs of personality.
- The Bend Straight lines break at corners. Bezier curves don't.
- Two Lines Walk Into a Station The moment it becomes a real transit map: parallel lines through shared corridors.
- The Station Node From plain circles to pills that span tracks, with colored transfer dots inside.
- The Fork Where lines meet, split, and part ways — and why no special code is needed.
- A Piece of the Real Thing Everything we've built, applied to a network that feels real.
- From GTFS to Map Real cities publish their transit data in a standard format. Here's how to turn it into a map.
- Making It Glow Same data, same engine, completely different feeling.
- It Moves Trains as glowing dots, sliding between stations in real time.
- The Whole Picture Everything we've built, in one living map.
- What We Learned Reflections on coloring books, simple engines, and drawing your own city.