A screenshot of two D3 line graphs on a live article.

Responsive charts in editorial, using D3.js

a.k.a., football charting, continued

In a prior piece about charting football in more meaningful ways, I mentioned that I’d be publishing some of them as web-friendly D3 charts. Well, the first batch is ready:

D3 football chart samples

Check out the link above to see the charts in action: they’re drawn as SVGs, rendered from real data as the page loads, and are very replicable. The latter will come in handy, as I’ll be publishing charts like these for every Alabama football game this season on the blog Roll Bama Roll. The charts are also responsive, which aligns with my goal of making graphs more mobile-friendly for editorial purposes.

Mobile view of the bar charts — they respond by stacking!

Update: the season came and went, and the charts slightly evolved over the course of the season (e.g., cumulative run and pass success rates for the line charts, instead of the quarter by quarter view, and I had to mostly abandon the quintiles dot plot due to the inconsistent availability of that data).

I’ve updated the link above (here again) to show the collection sample sheets for all of the games I ran data for (and wrote articles for), which was all of the Alabama football games last season — even the final one 😞. Below are some screenshots of a few game charts in action.

SR stacked bar charts (from the Ole Miss game) in the live article context.

Especially interesting line charts (Mississippi State game) from a live article.

Some hilarious line charts from the Tennessee game article.

Some telling bar charts from the Iron Bowl (vs Auburn) article.

A sample sheet from the CFP semifinal game vs. Washington.

Due to being a neutral site game that collected all the needed metrics, this was the only time I was able to use the dot plot D3 chart all season (article from the first game vs. USC).