Viz: NHL playoffs - Stanley cup

Stanley cup visualization captures all the important information regarding the play-offs in NHL dating back to 1927 - the year in which the NHL was formed. It makes a very good attempt of giving a graphic representation using HTML5. With minimum number of mouse clicks by the user, all the information regarding the teams participating in the play-offs, the number of times each time has appeared in the play-offs and whether it won or lost and the time-line of the team are presented. Minimal number of clicks by the user plays an important role in good UI designs as it involves lesser effort from the end user.

The data set required for generating this visualization can be obtained by running data parsing scripts on web based data. The data set for the Stanley cup can be found here.



According the creator of this visualization, the steps involved in building this visualization are as follows:
a) Start with simple HTML markup.
b) Build a timeline with Javascript.
c) Add CSS.
d) Add interactivity.
e) Draw the canvas.

The detailed HOW-TO of the visualization.

Here is the link of the visualization - http://vis.robbymacdonell.com/stanley-cup/

Pros of the visualization -
a) Clear differentiation between each teams participation in the cup and its result represented in blue (won) or red (lost).
b) A text description in the background describing the visual representation presented upon a user's mouse-over action.
c) Only when a mouse-over is performed on the years listed, an action is performed mapping to at most two teams, thus not crowding the visual.
d) Different colour used for representing the time-line and each event mapping to one of the years listed at the bottom.

Possible improvements -
a) The data set which involves the teams participating in the play-offs could have included the scores too.
b) The text representation in the background upon a mouse-over action can be presented with better colours.
c) Upon mouse-over on a teams name, the total number of play-offs won and lost can be presented.
d) Some teams do not have a time-line, either this maybe a faulty action or the data set did not contain records pertaining to that team.

JavaScript and HTML5 continue to be a stronghold for providing good visualizations by taking a data set as an input. This visualization gets a 9.5/10 rating from my side..

References:
a) HTML5 as a visualization resource, http://www.visualisingdata.com/index.php/2011/04/should-html5-be-considered-a-visualisation-resource/.
b) NHL play-offs data set, http://www.nhl.com/cup/champs.html.
c) Robby Mac Donell's HTML5 Stanley cup visualization, http://vis.robbymacdonell.com/stanley-cup/.
d) Visualizing Lord Stanley's Cup: an HTML5 experiment, http://robbymacdonell.com/blog/visualizing-the-stanley-cup-finals-with-html5.