It started with a dashboard. We wanted to see trains moving on a map in real-time — their positions, their delays, the pulse of a city's underground. The data was there. The map was not.
We had everything we needed: station coordinates, line definitions, real-time arrival times, occupancy data. The transit agency publishes it all in standard formats. Thousands of transit systems worldwide do the same. The raw material was abundant.
But when we went looking for a guide on how to actually draw the map — how to render multiple colored lines running in parallel through shared corridors, how to make them split gracefully at junctions, how to place station markers that span across tracks — we found almost nothing.
There are tools for designing schematic metro maps by hand. There are GIS libraries that overlay routes on geographic maps. But the middle ground — programmatically generating a beautiful transit map from data — was a gap. No guide. No tutorial. No "here's how the parallel lines work."
So we wrote one.
The Approach
The approach in this guide is simple: treat a transit map as a set of stations, plus the ordered station sequence for each line, and draw the connections directly from that data.
For each line, connect station A to station B, then B to C, then C to D. When multiple lines share the same station pair, offset them in parallel. When a line turns, split, or merges, connect those offset positions with straight segments or smooth curves.
In other words: the map comes from the stop sequence itself. The data already tells you which lines run together and where they diverge.
That keeps the rendering engine small and predictable. It only needs station positions, ordered stop lists, and line colors. Everything else in this guide is a refinement of that basic pattern.
What You'll Build
Over the next eleven chapters, you'll go from a blank SVG to a fully rendered transit network with parallel multi-line corridors, station nodes, smooth junctions, animated trains, and neon glow effects. Each chapter introduces exactly one concept, with a live code editor so you can experiment as you read.
Here's the path:
Chapters 1–3 cover the basics: placing stations, connecting them with lines, and handling curves with bezier paths.
Chapters 4–6 tackle the interesting problems: parallel lines through shared corridors, station nodes that span multiple tracks, and junctions where lines split or merge.
Chapters 7–8 connect theory to practice: rendering a realistic network fragment, then parsing real-world GTFS transit data into visual output.
Chapters 9–11 make it shine: neon visual effects, animated train dots, and the full network with interactive filtering.
Chapter 12 reflects on what we learned — and invites you to draw your own city's map.
What You Won't Need
No frameworks. No build tools. No npm install. Every chapter is a standalone HTML file with vanilla JavaScript. You can open them in a browser and they work. We chose this deliberately — the concepts are what matter, not the tooling.
You don't need to know SVG deeply (we'll teach the parts that matter). You don't need a GIS background. You don't need transit domain expertise. If you can write a <circle> element and a for loop, you have everything you need.
Who This Is For
Developers building transit apps who want maps that go beyond colored polylines on Google Maps. Data visualization people looking for a real-world project that combines geometry, animation, and design. Transit agencies who want to understand what's possible when you programmatically render your own network instead of exporting a static PDF.
And honestly, anyone who's ever stared at a metro map and wondered: how is this drawn?
Drawing a metro map is a coloring book exercise. You know where the stations are. You know which lines connect them. Connect the dots. Everything else is refinement.
Let's begin.