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.


8 thoughts on “2012 NFL Conference Champs

    • Thanks Tyler. I spend most of my time thinking about politics, so that will probably dominate this space. But I’ve already started brainstorming ideas for this baseball season.

  1. Over 2000 D3.js Examples and Demos | TechSlides

  2. D3 Mega List – Making Data Interactive

  3. 大量D3示例 – 数据思

  4. 1800 的D3.js示例 | 程式前沿

  5. 1800 的D3.js示例 - 程序員的後花園

  6. 1800+的D3.js示例 – 1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s