In the pICTure

Drawing a Tube Map – how hard can it be?! March 4, 2013

Whilst I was working through my 365 project, it struck me that when concluded, to continue to be useful as a resource potential explorers would need a way of interrogating the posts. From the outset I made sure each post outlining a Web2.0 tool was tagged appropriately – with both a SAMR level and a category (or more than one) stating the affordances of the tool. The tags could then be used to filter posts corresponding to the type of tool a viewer might be seeking. However none of that could provide a overview and summary of all 366 posts and tools; for that I’d been considering using an infographic of some sort.

Right from the outset I’d had in my mind a graphic along the lines of the London underground map which had been morphed to use in other ways like Simon Patterson’s Great Bear which swapped the tube lines for fields or spheres of endeavour and the stations for people who were known in those spheres (like scientists, actors, authors etc), or Tubular Fells by Peter Burgess which used similar design principle to the Tube Map, but changed it to suit Lakeland Fells and walking routes. So in my version, Web Tube.0, the Web2.0 tools would be the stations, the categories of tools would be the lines and the SAMR categories become the zones. How hard could it be?!

Well it turned out … very! If I chose to use the London Underground system as a template (leaving aside the potential copyright pitfalls), with only 270 stations spread across 11 lines, I would be well short of my needs. I had 366 tools spread across 34 categories. So I tried using similar design principles (as Peter Burgess did in Tubular Fells), but quickly came to recognise the enormity of the task. The problem wasn’t drawing 366 stations on 34 lines, the real problem was where a tool fell into more than one category and the lines had to intersect … and some tools fell into four categories! In fact about half the tools fell into more than one category compared with less than a third on the Underground map. Then superimposed on top of that would be the zoning for the SAMR levels! Now all of that is doubtless doable and in fact I suspect a programmer could probably come up with some solution, but surprisingly an extensive search of the Web found few possibilities. Most ‘solutions’ suggest using graphics programmes like Inkscape, Illustrator or Freehand, but they seem to miss the problem – it’s not the graphical issues, it’s the computation that’s at the very heart of it. I came across a PhD thesis “Automated drawing of metro maps” which outlined the nature of the problem as follows:

Given a planar graph G of maximum degree 8 with its embedding and vertex locations (e.g. the physical location of the tracks and stations of a metro system) and a set L of paths or cycles in G (e.g. metro lines) such that each edge of G belongs to at least one element of L, draw G and L nicely. We first specify the niceness of a drawing by listing a number of hard and soft constraints. Then we show that it is NP-complete to decide whether a drawing of G satisfying all hard constraints exists. In spite of the hardness of the problem we present a mixed-integer linear program (MIP) which always finds a drawing that fulfils all hard constraints (if such a drawing exists) and optimizes a weighted sum of costs corresponding to the soft constraints. We also describe some heuristics that speed up the MIP and we show how to include vertex labels in the drawing. We have implemented the MIP, the heuristics and the vertex labelling.

(Suspect this is a translation, given the origin of the paper is Karlsruhe in Germany)

I wasn’t reassured when further investigation led me to an application called Context Free which “… is a program that generates images from written instructions called a grammar” Err, yes, well I certainly found an example in the gallery that might help – 24 stations on 3 lines with only 4 points of intersection (& of only 2 stations each) required in excess of 750 lines of code (albeit some blank spacers & others single characters)!

Which is when I decided Web Tube.0 would go onto the back burner. I considered instead a dartboard or Mandala-style diagram which would adequately provide 34 sectors for the categories and outward protruding arcs for the SAMR levels, but I couldn’t easily resolve the issue of overlap where a tool spans several categories. I toyed briefly with the possibility of drawing a concept map (plenty of applications there), but once more it was the issue of the intersects. Recognising that the points of intersection were proving the stumbling block to this form of representation caused me to shift perspective and whilst considering, but rejecting the Periodic Table (overlapping categories once more!), I thought there might be merit in the grid-style layout. And that’s when I settled on:

cc licensed ( BY NC SA ) flickr photo by ianguest: http://flickr.com/photos/ianinsheffield/8504100927/

It’s a simple alphabetic layout following the chronology of the posts and is only that shape for ease of viewing in its entirety; it could easily be a single row sweeping out an extended linear area … not so good for Web viewing perhaps? So at a glance the tools offering a particular SAMR level are easily identified. Finding tools in a particular category, for example concept mapping tools, requires a little deeper interrogation and perhaps at a higher zoom level. Whilst the colour coding helps here, some colours do tend to merge with their neighbours and are less easy to tell apart unless side-by-side.

I designed and created it using Inkscape, an open source, freely downloadable vector graphics editor … which means the output can be scaled without the pixelation you get if using a bitmap editor like Photoshop or GIMP. In addition it provides another useful feature for those viewing the output svg file using certain browsers, namely the capacity to add interactivity to the image. So moving forward it’s my intention to make filtering the complete toolset down to just the ones you’re looking for with a single click – so clicking on ‘Survey’ for example will hide all tools except for the survey ones. I know it’s possible, but I suspect it will take a few more hours work … assuming the audience wants it?! Be grateful for your feedback.