Subway Map Visualization jQuery Plugin by Nik Kalyani.
From the post:
I have always been fascinated by the visual clarity of the London Underground map. Given the number of cities that have adopted this mapping approach for their own subway systems, clearly this is a popular opinion. At a conference some years back, I saw a poster for the Yahoo! Developer Services. They had taken the concept of a subway map and applied it to create a YDN Metro Map. Once again, I was in awe of the visual clarity of this map in helping one understand the various Yahoo! services and how they inter-related with each other. I thought it would be awesome if there were a pseudo-programmatic way in which to render such maps to convey real-world ecosystems. A few examples I can think of:
- University departments, offices, student groups
- Government
- Open Source projects
- Internet startups by category
More examples on this blog: Ten Examples of the Subway Map Metaphor.
Fast-forward to now. Finally, with the advent of HTML5 <canvas> element and jQuery, I felt it was now possible to implement this in a way that with a little bit of effort, anyone who knows HTML can easily create a subway map. I felt a jQuery plugin was the way to go as I had never created one before and also it seemed like the most well-suited for the task.
A complete step-by-step example follows and is the sort of documentation that while difficult to write, saves every user of the software time further down the road.
The plug-in has any number of uses, a traditional public transportation map for your locale or as used by the author, a map that lays out a software project.
If you use this for a software project, you will need to make your own icons for derailment, track hazards and the causes of the same. 😉