Unofficial Map: London Underground Map Recreated Entirely in CSS

Even though I’m mainly a print designer, I’ve done enough web design work to know how fiddly (yet also powerful) Cascading Style Sheets (CSS) can be. That’s why I’m totally in awe of this incredibly accurate rendition of the Tube Map, created with nothing but code by John Galatini. Not one image file to be seen! Johnston Sans is recreated with a web font, while the symbols for accessibility, National Rail, ferries, the Emirates Airline, etc. seen on the map are all “drawn” completely with CSS code. John estimates that the project took around 120 hours to complete, and I can believe him!

While the project’s website gives some great technical information on how the map was achieved, I prefer John’s own description on Twitter:

“It’s basically lots of rectangles and squares, lots of border-radius (to create circles) and a shit load of css rotation.”

Our rating: An astounding example of what CSS can do. Five stars!

(Source: CSS Tube website)

Unofficial Map: MBTA Map Contest Entry by Michael Kvrivishvili

Here’s another entry for the MBTA’s map contest, sent to me by Michael Kvrivishvili, a graphic and interactive designer from Moscow.

Michael has chosen to show all of the services on his map that the MBTA does on their map — subway, BRT, commuter rail, key bus routes and ferries. He pulls it off pretty well, too, although the convoluted network of bus routes is always going to look a little busy.

Like Kerim, Michael’s map features a perfect diamond representing the downtown interchange stations, and he also manages to fit in all the Green Line stations.If it wasn’t for the little flip in the Red Line to Braintree, he’d also have a perfectly straight diagonal line across the map! Despite these similarities, the two maps are really quite different.

Much like the current Washington DC map, Michael has added badges to the end of each line that denotes that line’s name —  ”OL” for Orange Line, and so on — an excellent aid for color-blind users of the system. He also adds the full name of the line in very small text within each line, which seems redundant and is also far too small to be of any real use.

For the most part, Michael’s handling of the commuter rail lines is well done: they’re obviously lower in the information hierarchy than the main subway lines, but still look attractive. Again, the ends of the commuter rail lines feature some lovely and unusual arrowheads — I love this sort of attention to detail. The one place the map is not as clear as it could be is at Readville station. The Fairmount Line terminates at this station, while trains on the Franklin Line stop, but trains on the Stoughton/Providence Line pass through without stopping. On Michael’s map. the Franklin Line looks like a continuation of the Fairmount Line (which isn’t named on the map), and there’s no visual indication that Stoughton/Providence trains don’t stop here.

There’s more usability problems with the Silver Line at Logan Airport. Michael shows all the stops, but he doesn’t show how the route loops around. From the information shown on the map, a reader might expect that once the bus reaches the end of the line at Terminal E, it reverses back along the line, stopping at the other terminals again along the way. A similar problem is evident with the end of the SL2 line at Design Center (also a loop in real life).

Interestingly, Michael has chosen to show non-accessible stations on the map, rather than accessible ones. This actually works quite well at cleaning up the central part of the map, where there are more accessible stations than non-accessible ones.

A few other thoughts: the legend at the bottom of the map is beautifully laid out; the subway to bus/commuter rail symbol is subtle but effective; and the bus routes are generally pretty well done. Also, the Silver Line makes a big capital “B” in the middle of the map!

Our rating: Really quite good. The few shortcomings are probably due to Michael’s unfamiliarity with the system and look like they could be easily fixed. Three-and-a-half stars.

(Source: Email from Michael, also on Flickr)

Unofficial Map: Kerim Bayer’s MBTA Map Contest Entry

While I’m personally not too keen on the MBTA’s map contest, I totally respect the rights of those who still wish to participate. As they’ve told me in conversation, kudos and recognition can be very strong reasons for less experienced or amateur designers to enter. A couple of those designers have sent their entries in to me to review and share with you — this one’s from Kerim Bayer, who also produced this rather striking map of Istanbul’s rapid transit system (June 2012, 4 stars).

To my mind, it’s definitely an improvement on the current map. The removal of the key bus routes helps to create a much cleaner look, although at the obvious loss of that information. The alignment of the Red Line — a strong, straight, diagonal slash across the map — provides a powerful visual axis, as does the perfect diamond formed by the major downtown interchanges (a device very reminiscent to the perfect square seen on older MBTA maps). Kerim has also managed to fit all stations on the Green Line branches into the perfect square required by the MBTA — a formidable achievement indeed!

The white stroke on the commuter rail and Mattapan lines help to differentiate these services from the main subway routes nicely and attractively (I love the arrowheads at the ends of the commuter rail lines), although I think the device is less successful when used on the Green Line. While it’s true that the B, C and D branches of the Green Line do act more like streetcars in the sections indicated, does having this information on the map actually help the viewer in any way? You still stay on the same train from one end of the branch to the other without the need to change trains like you would on the Mattapan line at Ashmont. One could also argue that the D branch also runs on the “surface”, as do portions of the Orange and Blue lines, albeit in specialised rail corridors.

While the typeface used is a lovely, modern sans serif font — Bariol, a welcome and interesting break from the ubiquitous Helvetica — I would say that much of the labelling on the map is too small: Kerim’s Instanbul map also suffered from this. It certainly adds to the clean look of the map, but diminishes its usability — especially when viewed from a distance, as it would often be in the real world at stations.

While Kerim has managed to show all of the stops on the Silver Line 2 BRT route out to Design Center, he has condensed all the Logan Airport stops into one blanket “mega-station”. Knowing that the bus stops at all of the terminals (and actually has two stops at the “B” terminal) as well as the direction it loops around the terminal road is necessary information and — to my mind — really needs to be included in some form.

Our rating: Stylish, clean and modern-looking. The type is a little too small to be easily readable, and some important information is lacking. Three stars.

(Source: via email conversation with Kerim)

Topology versus Geography in Transit Maps

Here’s a nice little animated diagram from Fathom Information Design that compares the two polar opposites of transit mapping using Boston’s MBTA rail network as an example. Click through to play around with it, and see the benefits and drawbacks of the two approaches. It’s also super fun to watch the map morph between the two styles.

In real life, most transit maps fall somewhere between these two extremes: very few use such a strict topological grid, and completely geographically accurate maps are also very rarely used for this purpose — even the New York subway map has a certain level of simplification and abstraction.

Unofficial Map: UTA TRAX and Frontrunner — a plea for good transit map design

Found on Twitter via user @f40phr231

Following on from yesterday’s post, here’s an unofficial map of Salt Lake City’s TRAX and FrontRunner rail system. I’ve feautured another unofficial map of this system previously (December 2012, 3.5 stars), but this one is interesting because it contains a message seemingly aimed at the UTA, almost pleading for better map design. It reads:

This map was created by CLF as an attempt to show how a UTA rail map can be laid out clearly while avoiding unnecessary bends in the lines, and extra lines connecting station names with the station dots.

Transit maps should be simple and easy to route.

For clarity, some station names that had only only numbers were replaced with an hypothetical neighborhood name.

The lines were drawn for black-and-white printing and accessibility for the color-blind.

In the grand scheme of things, this map is really pretty standard — there’s nothing truly memorable about it, nor is the design particularly outstanding — yet it’s still streets ahead of the current official map. The extra space afforded to downtown SLC works wonders for clarity and usability — gone are the ugly lines pointing to stations from awkwardly placed labels. The labelling could still use some work — different sizes of type are used, and the labels on the south-western leg of the Red Line could easily be set horizontally instead of at an angle. The tiny labelling of route names within their respective route lines is next to useless: another approach should be used to identify routes for color-blind users.

Finally, a tweet from the UTA in response to this map seems to suggest that things could get better in the future — here’s hoping!

P.S. Does anyone know who or what “CLF” is?

Unofficial Map: Dallas-Fort Worth Rail Transit by Gabe Tiberius Columbo

Gabe says:

I’ve been frustrated with the Dallas rail map for a while, and decided to make a comprehensive diagram of Dallas-Fort Worth rail trainsit.

——

Transit Maps says:

Simply put, this is a beautiful diagrammatic map and is far more visually attractive than the official DART map (August 2012, 3 stars). There’s a very elegant, restrained feeling to this: from the subtle grey background and typography to some excellent, slightly unusual colour choices for the route lines that work really nicely together. The way the Green and Orange lines interact with the Red and Blue is exactly what I wanted to see in the official map, and this treatment looks so much cleaner.

One could make a case for the inclusion of a few geographical features or major highways to give a better sense of scale and location, but — purely for route finding — the map doesn’t really need them, in my opinion.

The map’s not totally perfect: I don’t see a need for the smaller type for station names on the TRE and A-Train services: the thinner route lines already differentiate them from the main DART services, and the smaller type is somewhat harder to read. By the time we get down to the Amtrak routes and the M-Line Trolley, the type is almost ridiculously small.

There’s also a typo in the legend that references the “Fort Worth Transportaion Authority”.

Our rating: Excellent work that takes a completely different approach to the official map and does it very well. Four stars.

Unofficial Map: Live Map of London Underground Trains

Submitted by Travertine Libertine without comment.

——

Transit Maps says:

Created by Matthew Somerville.

Totally hypnotic after a while as all those little yellow train dots start racing around (it kind of reminds me of a mash-up between the Scotland Yard board game and the original Railroad Tycoon). Childhood reminiscing done, it really is amazing what can be done with raw data pulled via an API these days. Stuff like this is the future of transit information.

Unofficial Map: Portland MAX Light Rail — Super Mario 3 Style

Here’s the latest “Mario Map” from the incredibly prolific Dave Delisle (seriously, how much cool stuff can one guy pump out?). This one is of my home town of Portland, Oregon, and Dave actually enlisted my help in checking the accuracy of the route layouts and the spelling of the station names. Considering the ridiculous length of some of the station names in the system and the limitations of the 8-bit art style, Dave’s done a great job at fitting everything together in a very plausible and attractive manner.

Of course, in true Portlandia style, Dave has literally “put a bird on it” — there’s also a non-birdified version over on his website if you don’t get the joke. Also of note is Dave’s playful take on the TriMet logo, and the fact that our princess seems to be stuck out at Expo Center, the poor thing.

(Source: Dave’s website — posters are for sale!)

All Aboard the Orient Express!

Here’s an absolutely charming little map found on the inside of a French model train set box lid. I don’t have a definitive date for this, but it does have a lovely retro feel to it.

The map itself isn’t much help, as it’s pretty much a work of fiction: a weird combination of different parts of the Orient Express’s historical routes (see this diagram on Wikipedia) and a branch to Warsaw via Prague that was never part of the train’s itinerary.

Maybe, as simple artwork intended for a children’s toy, the designers were simply thinking that no one would notice any inaccuracies. Looks great, though!

(Source: japanese forms/Flickr)