Hi there. In preparation for the 2016 football season, I’ve been building charts for my favorite Alabama sports blog, Roll Bama Roll. I’ve done some football charting explorations already, but it’s been extra fun to see them come to life in a responsive, reproducible way.
More charts will be on the blog in the coming months, but I wanted to post a sample in the meantime. I'm using D3.js to render the charts with real data, and some modifications on the Skeleton framework for the rest of the page. The game was the Alabama vs. Michigan State 2015 Cotton Bowl. Enjoy.
A "successful" play, as defined by Football Outsiders, is basically when a play gains enough yardage to keep the offense on track, i.e., 50% of needed yardage on 1st down, 70% on 2nd, or 100% on 3rd/4th.
A "big play" (aka an "explosive play") has different definitions depending on the analyst, but I use a generous one: a run of ≥12 yards, or a pass of ≥16, is a big play.
● Big play rate (XR) and ● Success rate (SR)
* NCAA average SR = 40%
Here's a simple application of success metrics in a game. Quarters aren’t the most refined unit of game time you can examine, but they're easy and there’s already contextual understanding. Here, it’s interesting to see that while the game was consistently lopsided on a success/efficiency basis, the big play rates trended the other way.
These two bar charts are actually the same D3 function with the team names, filters, and colors pulled in as arguments. This saved me some lines of code in the JS file, but it pulls from the source (a hosted .csv file) twice, which isn’t optimal. At some point I’ll rebuild it to avoid that overhead.
The line charts were fun for a few reasons. For one, Alabama football fans love when the team runs the ball, so it’s funny to see that passing was the more successful endeavor in this game (and how the offensive coordinator followed that trend by passing more often, up until the team was way ahead).
Also, this is the kind of chart where D3 is the most helpful: drawing multipoint SVG images (like a polyline) and placing them on HTML. A developer friend even said that bar charts might be executed better in pure HTML, rather than even using SVGs. Be that as it may, I’m happy with how things have progressed.
The line charts were fun for a few reasons. For one, Alabama football fans love when the team runs the ball, so it’s funny to see that passing was the more successful endeavor in this game (and how the offensive coordinator followed that trend by passing more often, up until the team was way ahead).