TechBubble » Internet

Subway Map Visualization jQuery Plugin

nik — Fri, 08 Oct 2010 20:15:11 +0000

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

Anyone should be able to create a beautiful, interactive subway map visualization for their website using HTML markup
The map should be as faithful as possible to the London Underground map style with smooth curves and interchange connectors and 45-degree diagonals
The map size, line width and colors should all be customizable
Stations, interchanges and linked interchanges should be distinguishable from each other
The markup used to create the map should be search engine friendly

With these goals in mind, I started creating my jQuery plugin. A few days of concentrated effort later, I had a working subwayMap plugin and am quite pleased with the result. You can download the plugin below and documentation follows in this post. I hope you will give the plugin a try and find it useful.

Demo

I was the keynote speaker at a regional conference for the DotNetNuke Open Source Project and created a comprehensive subway map of the project ecosystem for my presentation using the subwayMap plugin. The map uses every feature of the plugin and is a good practical example of how to use the plugin. Click the image to view the map.

Download

Note: There is a file embedded within this post, please visit this post to download the file.

Step-by-Step Guide

Here is a guide to using the Subway Map Visualization jQuery Plugin. Before you get started, there’s one thing you’ll want to keep in mind — beautiful subway maps are never automatic; they are almost always the result of care in design and placement to ensure that the resulting map is functional, legible and beautiful. This plugin is just a tool…you will still need to plan and design your map in order to produce a good result.

Referencing the Plugin

The subwayMap plugin is referenced similar to other jQuery plugins by adding a script element to the HTML markup.

This code looks way more complicated than it actually is. Most of the verbosity comes from the many “data-*” attributes that the plugin uses for all customizations. Here are the attributes being used in the code above:

(DIV) data-columns: The number of columns the map will display (12 in this example)

(DIV) data-rows: The number of rows the map will display (10 in this example)

(DIV) data-cellSize: The width and height of each cell in pixels (40 in this example, resulting in a grid that is 480px wide by 400px tall)

(DIV) data-legendId: The ID of an HTML element into which the map legend will be appended (“legend” in this example)

(DIV) data-textClass: The CSS class to use for text labels in the map (“text” in this example)

(DIV) data-grid: True or false, to show or hide a grid that is useful during map construction. The default is false (“true” in this example)

(DIV) data-gridNumbers: True or false, to show or hide numbers on the grid. Only applies if data-grid=”true” (“true” in this example)

(DIV) data-lineWidth: The width in pixels for each line. The default is 10 pixels. (8 in this example)

(UL) data-color: The color of the line in standard CSS RGB notation (#ff4db2 in this example)

(UL) data-label: The label for the line that will be displayed in the legend (“jQuery Widgets” in this example)

(LI) data-coords: The X,Y coordinate pair where the line should be drawn to from its last location (or the starting location if it’s the first LI element)

As you can see from the illustration, the result of the sample markup was a grid with numbers, a line drawn from (2,2) to (4,2) and finally markers at both coordinate locations. The markers are automatically added whenever you have any content in your LI element and later, we’ll see how you can override the marker type.

Now, let’s extend this line a bit, by adding a few more LI elements. For brevity, I will omit the overall definition and just show the LI elements here:

Accordion
Autocomplete

The resulting image is as you would expect. However, it is not very pretty to look at. To make it nicer, we need to add some curves. The plugin provides four directional curves that can be used anytime the difference between both X and Y start and end coordinates is exactly 1. Think of it like plumbing pipes…in order to make a right angle, you introduce an elbow joint. This is somewhat similar. In order to make a smooth, 90-degree curve, you use one cell for the curve as illustrated below:

To make a curve, you add a “data-dir” attribute to the LI element that defines the coordinates for the end of the curve. The value of this attribute is directional – E, W, N or S – indicating the direction in which the line will first go before making a right-angle to the coordinate referenced by that LI element. Let’s continue with our example to see this in action:

Accordion
Autocomplete

To get the curves, some of the coordinates had to be changed in order to achieve the X and Y coordinate difference of exactly “1″. Note the additional “data-dir” attribute that determines the direction of the curve. The final result is a line that is similar, but not the same as the original and definitely more pleasing to the eye.

Let’s make the line loop around a bit and then go south on a diagonal run.

Accordion
Autocomplete

The diagonal line was drawn correctly, but notice the small curves at the beginning and end. These are automatically added when the difference between the X and Y coordinates of the start and end are equal and greater than 1 (i.e. a diagonal). Unfortunately, this isn’t pretty to look at. To correct this we have to reduce our diagonal by one row and one column and introduce a curve like this:

Accordion
Autocomplete

And there we have it, nice curves again and no sharp turns. Let’s wrap-up this line (no pun intended) and move on to multiple lines, markers and labels. I have now updated the markup to extend the first line a little and then added a second line shown in green labeled “jQuery Interactions.”



Accordion


Autocomplete

In this map, there is a portion where both lines overlap. This is a fairly common situation and if you do nothing, the line that is drawn last will be at the top. This is less than ideal for communicating information, let alone train routes. To solve this problem, the plugin allows you to “shift” a line in X and/or Y directions by a multiple of the chosen line thickness.

(UL) data-shiftCoords: The number of line-widths by which line should be shifted in any direction specified as an X,Y pair with negative values indicating shift closer to the origin (0,0). You could manually do the shift by specifying precise coordinates, however this can make the line more complicated to define. (Example: data-shiftCoords=”-1,0″ means move the line to the left by 1 line width.)

With the above change, our map now looks like this:

Much nicer and simpler since we did not have to make any changes to the individual line coordinates. Next, let’s add some markers. The plugin supports three types of markers: stations, interchanges and extended interchanges. These are always black-and-white (or white-and-black) and can be placed anywhere on a line. The attributes for markers are:

(UL) data-reverseMarkers: If the markers should be rendered white on black instead of the default, black on white. The default is “false”.

(LI) data-marker: Can be either “station” or “interchange.” Will produce a different marker for each. Value may be prefixed by “@” to indicate that the LI element is solely for indicating the position of the marker and should not be used as a coordinate defining the path of the line. (Examples: data-marker=”station” or data-marker=”@interchange”)

IMPORTANT: Markers are displayed only if the LI element contains content. Interchange markers ignore any coordinate shift values specified for the line.

(LI) data-markerInfo: For “interchange” or “@interchange” markers, this attribute is used to define scenarios in which the interchange marker has to “stretch” across multiple lines or connect lines that are not next to each other. The attribute value consists of a letter “v” for vertical or “h” for horizontal, followed by a number representing the number of line widths to stretch (example: v3 or h4). The marker is rendered at the coordinate position specified and extends either vertically upwards or horizontally to the right.

While it is easy and convenient to use the LI elements that define line coordinates to also define markers, sometimes this does not yield the best result. The marker may appear off by a few pixels. In these cases, it is best to add an LI element for the marker, use the “@” prefix and provide precise coordinates with decimal places (Example: 1.5,2.25).

Here is the markup and map again, updated with station and interchange markers.



Accordion
X

X
 
X

X
  



X

X




Tabs




 
 
X

X
X
X

I used the label “X” for all the station or interchange names. The only thing left to do is change the labels and also position them so they don’t appear on top of the line. The attribute used for positioning the labels is:

(LI) data-labelPos: Specifies where the label should be displayed using a directional abbreviation. Supported values are N, E, S, W, NE, NW, SE, SW. (Default is “S”). Sometimes your label may be too long and text-wrap may be needed. To do this, you can use “\n” within the text of the label (
will not work since the only markup supported for a label is the element).

Labels are added as absolutely positioned elements and when the map is added inside a DOM element with a complex, CSS layout, they may not always appear in the right place.

Let’s set the label text and position, turn off the grid and look at the final markup and rendered map.



Accordion
Auto\ncomplete

Slider
 
Date\npicker

Dialog
  



Button

Progress\nbar




Tabs




 
 
Selectable

Resizeable
Droppable
Draggable

There you have it…a map that faithfully reproduces the style of the London Underground map, but hopefully, is not too difficult for you to create once you get familiar with the custom attributes required in the HTML markup to render the map. Enjoy!

Reference

(DIV) data-columns: The number of columns the map will display (default=10)

(DIV) data-rows: The number of rows the map will display (default=10)

(DIV) data-cellSize: The width and height of each cell in pixels (default=100)

(DIV) data-legendId: The ID of an HTML element into which the map legend will be appended

(DIV) data-textClass: The CSS class to use for text labels in the map

(DIV) data-grid: True or false, to show or hide a grid that is useful during map construction (default=false)

(DIV) data-gridNumbers: True or false, to show or hide numbers on the grid. Only applies if data-grid=”true” (default=true)

(DIV) data-lineWidth: The width in pixels for each line (default=10)

(UL) data-color: The color of the line in standard CSS RGB notation

(UL) data-label: The label for the line that will be displayed in the legend

(UL) data-shiftCoords: The number of line-widths by which line should be shifted in any direction specified as an X,Y pair with negative values indicating shift closer to the origin (default=0,0)

(UL) data-reverseMarkers: If the markers should be rendered white on black instead of the default, black on white (default=false)

(LI) data-coords: The X,Y coordinate pair where the line should be drawn to from its last location (or the starting location if it’s the first LI element)

(LI) data-labelPos: Specifies where the label should be displayed using a directional abbreviation. Supported values are N, E, S, W, NE, NW, SE, SW (default=S)

Redirecting to Canonical URL in IIS7

nik — Fri, 15 Jan 2010 04:42:50 +0000

If you are using IIS7, it’s very easy to ensure that all requests always go to your preferred canonical URL. It’s a two step process:

Step 1: Install the UrlRewrite module for IIS: http://www.iis.net/expand/URLRewrite

Step 2: Add the following rule to your applications web.config file:

<configuration>
 <system.webServer>
    <rewrite>
      <rules>
        <clear />
        <rule name="Redirect from www" stopProcessing="true">
           <match url=".*" />
           <conditions>
              <add input="{HTTP_HOST}" pattern="^www.yoursite.com$" />
           </conditions>
           <action type="Redirect" url="http://yoursite.com/{R:0}" redirectType="Permanent" />
        </rule>
     </rules>
   </rewrite>
 </system.webServer>
</configuration>

IMPORTANT: When using the above code, take care to merge it with your existing web.config without duplicating any existing elements.

I like my URL’s to be in the format http://mysite.com. If you prefer http://www.mysite.com, simply remove “www.” from the element and add it to the element’s “url” attribute.

NSF Website on Birth of Internet

nik — Mon, 18 Aug 2008 08:00:00 +0000

Om Malik posted about the NSF website chronicling the birth of the Internet. What a cool site. I skimmed it briefly and found this entry for 1980s:

In the mid-1980s, NSF decided the time was right to try to link its regional university networks and its supercomputer centers together. This initial effort was called NSFNET. By 1987, participation in the new NSFNET project grew so rapidly that NSF knew it had to expand the capacity of this new network. In November of that year, it awarded a grant to a consortium of IBM, MCI, and a center at the University of Michigan called Merit to create a network or networks–or internet–capable of carrying data at speeds up to 56 kilobits a second. By July 1987, this new system was up and running. The modern Internet was born.

I came to the U.S. on Sept. 3, 1987 from India to begin my Bachelor’s degree at Western Michigan University. I remember logging on to the Merit network that same month from the campus computer lab. Since, at the time, everything about computers was totally new to me (other than the Sinclair ZX Spectrum+, my home computer), I had no idea until today that this was a brand new network and more importantly, the first “network of networks.”

Some Thoughts on Posterous

nik — Sun, 17 Aug 2008 08:00:00 +0000

I have been thinking on and off about Posterous since I first used it and decided to put my thoughts down in a post. Nischal asked the question “Would you stick to Posterous?”
My answer today is “No” for the simple reason that it’s difficult to
make the commitment to use Posterous as my primary blog until custom
domains are supported. Redirects just don’t cut it.

Also, the brutally honest truth is that Posterous is on borrowed time.
If the service does not start innovating rapidly, get huge user
adoption and then create a significant reason for users to stay, it
will soon become irrelevant. Its primary feature — email to blog — is
not enough of a differentiator because technically it is not very
difficult to implement and other blog engines will be quick to offer it
to their users (some already do).

I think Posterous should be thinking about ways in which they can
continue to stay relevant and even attractive to bloggers by doing the
exact opposite of what they are doing right now. Instead of trying to
be a blogging platform, they ought to focus on being an email
publishing utility very much like FaceBook is positioned as a social
utility. The AutoPosting
capabilities available on the service are a great way to start, but
they could be so much more. Instead of just supporting vanilla posts
with title and body and hosting the photos/media here, they should go
all out and implement email to MetaWebLog and other API’s. Being able
to use email to make a complete, detailed post to WordPress, DasBlog
and other blogging engines would be great. Add template, tagging and
categorization and it starts to get really interesting.

And while they are at it, they should do it for not just 10, but 100′s of other services. Basically, email enable every ProgrammableWeb.com API
for which email posting makes sense and that has any kind of traction.
That would be killer and greatly increase the barriers for competition
as users don’t like changing habits unless there is a very good reason.
Imagine “posterous” becoming a verb for “posting something to any web
service using email.” I think this would be a bigger opportunity for
the company and allow it to become truly indispensable compared to
where it is now — a “me too” blogging platform which re-posts to other
services.

Bottom line, forget the blogging and focus on the email.

iWidgets déjà vu

nik — Tue, 01 Jul 2008 08:00:00 +0000

At the height of the dot-com boom, I founded a venture-funded startup
called iWidgets.com. My vision was to have mini-apps called “widgets”
that you could plug into web portals that were all the rage at the
time. Unfortunately, the market was not ready for widgets back in 1999,
and when the stock market took a dive a couple of years later, so did my
company.

Fast-forward to present day and there is a new iWidgets.com site created by someone else. Here’s how eHub describes it:

Create custom widgets for your website or your brand with iWidget.
Using their online wizard, you can easily create widgets that your
website visitors or customers can add to their iGoogle start page,
Facebook profile, or their own blog. Your widget is customizable by
your users so that it fits right in with their design.

It
felt very strange seeing the site…sort of like seeing someone else
wearing your favorite shirt. I spent some time on the site playing with
their tools and was very, very impressed. Great job iWidgets.com team,
wish you much success.

8 Things You Didn’t Know About Me

nik — Fri, 04 Jan 2008 08:00:00 +0000

Dennis McDonald tagged me in the “8 Things You Didn’t Know About Me” game so here goes:

I love Chai and drink a lot of it (not the Starbucks kind…the regular Indian kind which is way better).
I am a digitalmediaholic. I have over 6 terabytes of ripped movies and 100 GB of music.
I am a dot com bubble survivor. I founded a venture-funded startup called iWidgets.com that created widgets for web pages. Unfortunately, the technology was six years ahead of its time.
My un-Americanized name is Nikunj, pronounced nick-ooonj.
I have never had any alcoholic beverage…none.
I became a vegetarian in 2001…did it cold turkey (pun intended).
I grew up in Bombay and came to the U.S. in 1987 for my undergrad education. Never went back, and became a U.S. citizen a few years ago.
I enjoy the creative aspects of brand development, especially logo development, tag line creation and messaging.

A world of widgets

nik — Mon, 08 Aug 2005 08:00:00 +0000

It seems like there are widgets everywhere. Apple added widgets to Tiger through the cool Dashboard feature. Yahoo has a whole section of its site devoted to widgets.

I greet widgets with a mixture of emotions. In 1999, when I created my venture-funded startup, my world-changing idea was to bring the web to people in the form of mini-applications that provided identical functionality with a web browser, a mobile device or a telephone. Not only that, the mini-apps had collaboration built-in so you could decide who could view/edit your data etc.

Yes, the mini-applications were called “widgets” and my startup was iWidgets, Inc. Unfortunately, the world wasn’t ready for widgets at the time and I didn’t know as much about running a startup then as I do today, and so iWidgets joined thousands of other dot bombs when I turned the lights out in early 2001.

But seeing all the buzz about widgets today gives me a good feeling — I had the right world-changing idea, just at the wrong time and perhaps a little flawed in the execution. I felt nostalgic enough to go digging through the archive DVD’s to pull up some promos we had created. Here are four of them, each focused a specific target market.

Janet | Hannah | Johnsons | Rob