GreyWyvern.com

Graphing the NHL 2010-2011 playoff race in HTML5 canvas

Apr 7, 2011

Here's a little HTML5 web application which uses the <canvas> element to help visualise this season's 2010-2011 NHL playoff race. the hardest part was actually finding the data to use. The actual canvas implementation only took an hour or so to framework, and a couple hours more to tweak and flesh out.

Here's the race in the Pacific division:
Image

You can dynamically select which team lines to show, as well as groups of lines based on division or conference. The X-axis can also be switched between game-by-game progression, and day-by-day. Showing the day-by-day chart allows you to see how the Christmas break and the All-Star break affected point progression during the season.

You can spot some interesting trends using this tool. For instance, the race in the Northwest has been wide open, while that in the Pacific has been unbelievably tight all season long. Ottawa hit a slump between the 40 and 55 game mark but have been pretty consistent both before and after. The New Jersey implosion and second-half comeback is also visible in dramatic detail. It's a shame they fell short of the playoffs; it would have made a great story. Too bad Hollywood has no idea what hockey is. :P

I'll be updating the data daily until the end of this season and probably leaving it after that. If I can find a good way to automate things, I might start it up again next season. This tool won't work in Internet Explorer 8 or earlier, sorry. (I'm actually not sorry at all)

Check it out here: 2010-2011 NHL Playoff Race - HTML5 Graphing with Canvas

Consistent, cross-browser legend positioning within fieldsets CSS3 transitions using visibility and delay

Comments closed

Recent posts

  1. Iguana no Musume / Iguana Girl Aug 2016
  2. What I'd Like To See In The Elder Scrolls VI - Part 2 Aug 2015
  3. What I'd Like To See In The Elder Scrolls VI Jul 2015
  4. Cyprus, and what capitalists want Mar 2013
  5. Let interest rates on housing rise Sep 2012
  6. Archive

Items of Interest

Webcomics Reading List

Good Eats

Twitter RSS 2.0 Valid XHTML 1.0! Copyright © 2017 Brian Huisman AKA GreyWyvern
ContactSite mapSearch