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. ```

Looks lovely. But their comparison with apple and google (https://medium.com/transit-app/transit-maps-apple-vs-google-vs-us-cb3d7cd2c362#.q1less5c9) is missing something: "works on a desktop computer". I have a surface 3 pro with chrome/firefox/edge installed, I'd love if there were some html5 web view onto this for planning trips in advance, where I quite like the larger screen size and the ability to screenshot/print just in case.

This is fascinating stuff, and nicely polished work.

We would like to develop something similar, but a non map overlay version, using our transit data at Rome2rio. Basically code to auto generate something like this for all of our 4,000 transport operators: http://content.tfl.gov.uk/standard-tube-map.pdf

We've been talking about it for a while but don't have the constraint layout expertise to do it internally.

Anyone interested in working for us to tackle this problem?