Visualizing the Stanley Cup

An interactive view of the NHL teams that played in the Stanley Cup finals since 1927.

Roll your mouse over the team logos to see which years they made it to the cup. (Blue bars mean they won, red means they lost).
Mouse over the years to see that year's matchup. Who won the year you were born?

What are we looking at here?

I'm a fairly new hockey fan, and building this visualization helped me get a sense for the history of the championship. (You know, so I can fake my way through conversations with real hockey fans.)

Just by mousing around for a bit, I can easily see that:

What about '28, '35 and '05?

The loser of the 1928 series, and the winner of the 1935 series was the Montreal Maroons. They don't show up on the graphic because I didn't have a logo for them. Oops. Update: Some awesome guy emailed me the Maroons logo, they're now included.

In 2005, there were no Stanley Cup finals, because there was no hockey. :(

2011

Congrats, Boston!

HTML5/CSS3 rocks

This is also an exploration of several display technologies available in modern web browsers (canvas, font-embedding, css transitions, etc). I wanted to see how rich of a visualization I could create using nothing more than CSS and javascript.

Webkit Browsers (Safari, Chrome)

You get the full experience. YAY!

Firefox (3.6)

You get 98% of it, but there's some css animation sizzle you're missing out on.

Internet Explorer

Sorry. At least IE9 looks like it'll be pretty decent?

Want more info?

Here's an overview of how I did it.