How We Built the World’s Prettiest Auto-Generated Transit Maps

Beautiful, yes, but I'm a form follows function guy, and at least from looking at their screenshots of the Chicago Loop, I'm left thinking their version of the map is quite a bit less useful than the (admittedly unsightly and cluttered) official one[1].

Some things that are iffy or missing from a functional perspective:

• Any indication that the red and blue line stations are connected by tunnels at Lake/Washington and Jackson.

• For that matter, the fact that the Jackson blue line station exists in the first place - it's obscured by the B in the street label for Jackson Boulevard. Same goes for the LaSalle blue line and State red line stations, and the Washington blue line station is also iffy. That's over 1/4 of the stations in the map's area hidden under street labels.

• Which stations have elevators? Most of the ones downtown don't.

• Which directions are the trains traveling in? With the exception of the green line, all of the elevated trains go only one way around the loop.

• Color matters, especially on a system where all the trains are identified by color. Why did they use a dark mauve to indicate the pink line? In the real system it's indicated by a bright bubblegum pink. They've created a big opportunity for confusion with the purple line.

• A human touch might be able to make some better arrangement choices. The CTA map crosses the blue line over the green and pink lines a little outside of the loop, at the point where it diverges from the other two. That's a much better choice than trying to do it right in the middle of the already jumbled mess that is the confluence of all of the trains in Chicago's transit system (save one small spur line out in the suburbs) along a three block section of Lake street.

• Clearly indicating that the purple line operates differently from the others is also useful, and might save someone who's unfamiliar with the system from a lot of time spent waiting on the wrong side of the station while watching a bunch of brown lines pass by.

I'll grant the loop section of the L system may well be the most fiddly, nit-picky light rail mapping problem in the world, and the datasets they were working with might not have given all the detail they needed. (On the other hand, that thing with hiding stations under street names feels pretty egregious to me.) I guess what I'm really going for here is, when it comes to drawing maps, I still think involving a human hand in the process can make an enormous difference in the quality of the final product.

[1]: http://www.transitchicago.com/assets/1/clickable_system_map/200806d.htm ↗

That’s a fascinating case study. Thanks for sharing.

Not so long ago, I was designing visualisations for a different type of underlying graph structure, but one that had some similar elements in terms of “close” edges that could be drawn together, a desire to minimise edge crossings, and the like. I spent quite a while studying Beck’s famous London Underground map and its modern derivatives, and then experimenting with some of the same ideas mentioned in the article here. I too found that rendering clean, practical diagrams to show messy, real-world underlying data can be surprisingly difficult! I have a lot of respect for the Transit App team if they’ve successfully implemented algorithms that can produce output as beautiful as those examples in their general case.

I would love to get more details on the linear-integer solve methodology, as it sounds impressive. Was the problem formulated to also work as a linear problem where the binary or integer variables were first treated as positive non-integer variables, and then checked using branch-and-cut (That's how I would do it)? Or did you do something differently?

``` Fortunately, we found a different plan of attack: one which allowed the integer-linear-programming solver to explore the problem space more efficiently and find optimal solutions faster. What previously took an hour, now took 0.2 seconds. ```