2012 NFL Conference Champs


Yesterday, Super Bowl Sunday, I put out a few charts (found here. CLICK!) comparing the two contenders.  It was a last minute attempt to see how the 49ers and Ravens stacked up against each other based on their regular season performance.

In December, I had started mulling over ideas for showing how dominant the Seahawks had been in the second half of the season, but they got knocked out of the playoffs before I pulled the trigger on a graphic.  In that time I came across this difference chart by mbostock and it seemed like a really powerful way to compare teams over time:


I got the data I needed from Advanced NFL Stats.  There were a couple of other data sets that I ran across in my research, but this had the entire season (play-by-play) in one handy csv.

I had to do a little bit of work to get the data into the shape I needed it:

  • How do I handle time?  The first decision was to ignore bye weeks completely. This means as you move along the x-axis, the stats don’t match up by date.
  • The other hiccup was how to handle overtime, which each team encountered at least once this season.  I decided to map the game clock (as given in the raw data) to proportion of the total game time for that week.  So a play happening as the first half expired was marked as 0.5 most of the time, but somewhere around 0.35 – 0.4 for the games that went into overtime.
  • There were some data quality issues in the points columns which required manual cleaning.  It is entirely possible I missed something here.
  • I calculated yards (for and against) from a combination of the yard line data and which team was on offense for the preceding and following plays.  It is entirely likely I screwed this up for some edge cases.

I waited ’til the last minute to start coding this up and had to cut some corners.  I’ll be revisiting it soon to address these issues:

  • Have you ever heard of DRY coding? Yeah, I completely failed at it on this project.
  • With only 30 minutes left before kick off I gave up on messing with my html layout. I wussed out and used a table instead; it looks tacky (though not as bad as I’d thought it would) but got the job done.
  • I’ve also, apparently, forgotten how to do bar charts quickly in d3.js.

Code available here.