Not a transit map in the usual sense of carrying passengers, this map instead depicts a network that conveyed mail at speeds of up to 35mph under the streets of New York from 1897 to 1953 (barring a small gap during World War I when it was shut down to conserve funds for the war effort).
This map probably shows the system at its height pre-WWI, with over 27 miles of tube. Even then, the costs of running such a system were becoming prohibitive, and the new-fangled automobile was becoming a viable and cost-effective alternative to transporting mail across the city.
New York wasn’t alone in having such a system, although it carried more mail than most: a single canister could hold up to 600 letters. Paris’ pneumatic tube mail (see a 1967 map here) remained in service until 1983, when it was finally ousted by fax and telex machines (remember those?)
Imagine this scenario: you’ve been working for months on a complex transit map – lots of interchanges and routes – for a big-city transit agency and you’re presenting it to their management team for approval. They love it, except they’d like the circular interchange markers you’ve used to be square with rounded edges instead. And they’d like to see the revised version in an hour.
If you’ve used standard Illustrator artwork for each of your interchanges, then you’ve got a frantic afternoon of finding, deleting and replacing every interchange marker on the map ahead of you. However, if you’d used Illustrator’s Symbols feature, then this request would be an absolute breeze.
Symbols were quietly introduced into Illustrator way back when Adobe acquired Macromedia, and are a feature lifted directly from Flash. Put simply, the feature allows you to define Illustrator artwork as a “symbol”: every duplicate of that symbol is linked to that original artwork. Which means that when you edit the symbol’s artwork, it instantly updates all the duplicates (or “instances”, as Adobe likes to call them). Super powerful and not used nearly enough by most.
STEP ONE:Defining a symbol couldn’t be easier, as seem in the first image above. With the Symbols palette open (Window menu > Symbols or Shift-Cmd/Ctrl-F11), simply select your artwork and choose “New Symbol…” or click on the “New Symbol” icon at the bottom of the palette. In the resulting dialog box, give your symbol a descriptive name, and choose a registration point. For an interchange symbol, the centre point is best. If you’re creating a symbol for a “tick” mark, then use a registration point that matches where you’d like the tick to attach to its route line.
Click “OK” and you’re done!
STEP TWO: Picture 2 shows the Symbols palette with three different station marker symbols set up and ready to use. If you are using “ticks” or other markers that are colour-coded to the route lines, you’ll have to make symbols for each colour and variation needed. To make more instances of a symbol, you can drag one out of the Symbols palette onto your artboard, or you can simply duplicate one that already exists. Symbols are readily distinguishable from normal artwork: they have a little bounding box and a little “+” marker that corresponds to the registration point you defined in Step 1. For a symbol where the registration point doesn’t actually align with anything useful, like the double interchange marker, you can still see and use the centre points from the original artwork to align things properly.
STEP THREE: The third picture shows the solution to our problem and the real benefit of using Symbols. I’ve created new artwork for the interchange marker – a square with rounded edges, just as the client requested. With that artwork selected, click on the “Interchange” symbol in the Symbols palette and choose “Redefine Symbol” from the flyout menu. Instantly, every instance of that symbol takes on the new appearance! You can also double-click on any instance of a symbol to edit it, but I find this “Redefine” method easier when completely changing the look of a symbol.
Yes, it only shows Manhattan and The Bronx with small parts of Brooklyn and Queens, but this is still a pretty awesome mash-up. Aesthetically, it’s a dead ringer for the Washington, DC Metro map – big, fat route lines, the “double ring” interchange stations, green areas for parkland, etc. Nice work from Chris to mimic this style so closely!
While the map looks great, it really also shows how unsuited the bold, simplistic approach taken by the DC diagram is to a complex transit system like New York’s. Vital information that New Yorkers depend upon for daily travel is simply nowhere to be found: the distinction between local and express stations, for example, or any indication of those hugely important free transfers between certain stations.
A few little errors that I see on a quick scan: the “A” and “L” lines are missing their terminus letter designation markers, and 42nd St/Port Authority has no station marker at all.
In the end, Chris probably made this because it seemed like a fun thing to do, and it’s certainly that and more. But it’s also very interesting to see that what works for one city doesn’t always work for another!
A lesson in how not to add station labels to a strip map: type at five different angles makes things incredibly hard to read. Also not to be recommended for legibility is the all-caps treatment of station names.
This would work much better if the route line was pushed to the top of the strip, with all stations spaced equally and type set at one consistent angle across the entire diagram.
A skyview of Manhattan with overlaid subway and rail lines. 7 Subway Extension, the first phase of the Second Avenue Subway, and East Side Access included.
Another fantastic aerial photo/subway routes mash-up from Arnorian – a companion piece to this very popular piece that shows more of New York and New Jersey.
What I really like about this is that you can make out individual buildings and streets quite easily – the Empire State Building is immediately obvious, for example – placing all the lines shown in a very real and recognisable context. I can definitely relate many of the locations that I visited on my trip to New York a few years ago to this view, which is kind of cool.
Sweet illustrated map of bus routes in the East Bay, including a multitude of transbay services: I count 16 crossing the Bay Bridge to San Francisco!
As with all maps of this ilk, the fun part is finding all the little details in the illustrations that are liberally scattered throughout (My favourite is probably the sailor who is busily chatting up the cute nurse at the top centre of the map). The subtle painted texture of the mountains at the top of the map is also rather lovely.
Although quite whimsical in execution, the map actually conveys a lot of useful information as well: local, intercity and transbay services are all differentiated by colour; rush-only services are denoted by a square route box, rather than a circle. Different zones are also shown simply and efficiently by simple line across a route: the zone numbers are placed on the relevant side of that line. Effective, but not overpowering.
Our rating: Lovely late 1960s design. Lots of fun to be had poring over this one. Four stars!
Last week’s tip about using the Offset Path command in Illustrator to create multiple parallel paths was very well received, but reader Leah left a comment saying that she finds using Art Brushes quicker and easier. If nothing else, it’s good to be reminded that there are always different ways to achieve the same result!
Setting up an Art Brush for what we want to do is actually pretty simple. Simply create a short section of the setup you’d like to use as a brush – in the first picture, I’ve got three parallel 8-point lines, spaced 10 points apart (exactly the same as last week’s example).
With these three paths selected, simply choose “New Brush” from the Brush palette’s flyout menu, or click on the “New Brush” icon at the bottom of the palette. When Illustrator asks you what type of brush you’d like to create, choose “Art Brush”.
In the resulting dialog box, give your new brush a descriptive name, and make sure the Brush Scale Option is set to “Stretch to Fit Stroke Length”. Finally make sure that the arrow that’s overlaid on your artwork in the little preview window runs along the length of your lines. Click “OK” and your Art Brush is ready to go!
Applying it to your path couldn’t be easier, as shown in the second image. Simply select your path, click on your newly-created brush in the Brushes palette and – hey presto! Note, however, that this is still one path that is styled with the Art Brush to look like multiple paths. To make three separate editable paths (which you’ll almost certainly have to do, as the routes will eventually go in different directions), you’ll need to select the path and choose Object menu > Expand Appearance. And this is where my (minor) problem with this technique lies.
As the last image shows, the original path had just three anchor points: one at each end, and one in the middle. When I offset this path in last week’s tutorial, the new paths also had just three anchor points – nice, clean, easily editable artwork. When we expand the Art Brush-styled path, it creates a lot of extra anchor points – over 20 on each path in my example! This is not my idea of clean artwork, even though it looks much the same as the offset paths.
In the end, the two techniques produce very similar results – offsetting paths takes a little longer, but (in my opinion) makes cleaner finished art. The Art Brush technique is easier to set up and allows you to have an arsenal of brushes at hand for different numbers of parallel route lines, but it makes a bit of a mess behind the scenes. Both are valid approaches to the problem: it’s up to you to decide which suits your needs best!
Wishing you all a happy and safe holiday season! Thanks to all of you – readers,contributors, rebloggers, retweeters, and lurkers – for another rewarding year at the helm of Transit Maps. I really couldn’t do it without you!
A light-hearted and off-beat map/infographic for you today – one that shows the distance, type and cost of public toilets near metro stations in Stockholm, Sweden. Hopefully, the map was not borne out of Pruek’s inability to find a facility when in dire need!
The graphic is nicely put together, and functions well as both a (simple) transit map and an informational graphic. It has one of the nicest examples of “candy-striping” the route lines that I’ve seen in a while where the Red and Green lines share track. I’m not normally a big fan of this approach, but it works very nicely here.
The use of line length and colour-coding to denote distance to the toilet of your choice is really nice, giving two visual indicators for this very important piece of information. The one thing I’m pretty certain the graphic doesn’t do is indicate which direction to go to find the toilet, which could be a problem for people unfamiliar with the area who really, really need to go! Maybe a small arrow pointing the way could work, although that might be hard to integrate with such a schematic diagram. There’s certainly plenty of white space in the graphic to work on a solution.
The icons for each type of facility are nicely done, and the price indicator (open, half-filled and filled circles for each price point) is very intuitive. I’m not entirely sure I agree with the decision to flip the icons vertically when they’re under a distance line: it looks a little strange to me.
And is it just me, or does the second icon for a “stand alone toilet” look like a dead ringer for the TARDIS?
Source: Pruek’s portfolio website – link no longer active
