Wikipedia has a nice and extremely useful map of the Beijing metro system with upcoming extensions. As the Beijing metro system is expanding extremely rapidly the future is almost now.

Like most Wikipedia maps of this type it is made in SVG (using Adobe Illustrator). The code it generates it fairly decent, better than some code I have seen earlier, but still hard to read and use for my purpose, so I cleaned it up with Kommodo Edit. The regular expressions work well in that editor, which makes clean-up much quicker and easier.

Maps are, or at least should be, ideal for SVG and SVG animations. Famously they are not the territory, but they are a layer of information that can be used instead of or as an overlay to other maps of the territory, highlighting the information you are looking for and hiding the information that distracts. …

If you are on the route from here to there, first of all future extensions are of no use, and neither are current lines if they are not going to take you there. Stations you enter and leave the system is important, as is the transfer stations. Stations before the important stations are useful as well, to prepare for leaving at the next station.

When you use the map for planning purposes, the entire map may be of use, but what aspect of them depends on your purpose.

The optimisation

In short I made the map a little more semantic, turning the styling information into classes. Lines, stations and their names in Chinese and English, whether they are running today, and the opening year, again in Chinese and English (a more long-term map might discern between the states of “running”, “under construction”, and “planned”, but it was not needed here). Doing so reduced the size of the source file with about 1/4, but space saving wasn’t really the goal, if it was I could save more, but to make the file smaller and more amenable to future manipulation. It is probably a step back in compatibility as some older SVG clients really can’t hack CSS very well, so I haven’t uploaded it back to Wikipedia, at least not yet.

I gave up on one important clean-up, linking the station symbol (a circle) with their name/label in Chinese and English. The names are visually linked by proximity (the labels would in most cases linked to the nearest circle), and not having a tool to discern that and not the time or patience to do that by hand, I left that for later. That is also implying that the map isn’t particularly accessible (though it is considerably better than a PNG or GIF would be).

I like element ids to be predictable where possible, so I would have used the Chinese names for the station circles. They are well suited, they are short no spaces or other tricky characters, but doing that would break wellformedness, as there would many triplets of identical ids (station circle, and the Chinese and English labels). SVG has a solution to this, the ‘g’ element, which also would link label and station symbol and thus make the graph more accessible. In this case I might have done this, just like I could move elements around without affecting how the map was painted, but it wouldn’t be the case for other maps. If the stations had a closer link to the lines they were on for instance, it wouldn’t have been possible to group the transfer stations with a ‘g’ element for instance. Not a big deal, ‘class’ could be used instead of ‘id’, and let JavaScript sort them out.

The unique id issue returned for metro lines that were running but also would be extended in the coming years, they needed separate identifiers, #Line15 were the line with stations running today while #Line15_ were future stations. This makes the style sheet slightly less neat, and any scripts even less so.

Another issue was SVG and microformats, say the geo format, or equivalent functionality in HTML5 or elsewhere. There is little in SVG to prevent this from happening, but hopefully HTML5/SVG2 can be seamlessly integrated so what works with HTML will work with SVG. Both are after all languages with class. An obvious use for geo-data would be to animate from this abstract view to a geographical view. The latter could also be transformed into KML files for e.g. Google Earth/Map use.

Future timeline

Adding (planned) date of opening would make it possible to make a timeline much like the above gif animation, only better and automatically. For the trainspotters among us we could also make a metro system simulation, given the known frequency of trains.

PS: Compatibility comes in many forms. While modern browsers in general can handle SVG, both original and optimised, finding the ways to publish them usefully on this blog system takes some doing, so I threw in the GIF image to click on instead.

---

Originally published on My.Opera.com