Overview

NFLDash provides an intuitive, reactive dashboard to let you filter NFL plays by a wide variety of metrics in real-time. Pick an option from a pie chart menu and it will filter every chart by that option. Click and drag on a bar chart and select a range of values to filter by. Combine multiple filters to find interesting subsets of plays. You're limited only by your imagination, but here's a few ideas to get you started:

• Find the biggest comebacks by filtering to plays where the win probability was less than 5% and selecting "Offense Won" from the Game Result dropdown.
• Filter for clutch plays in the playoffs by setting Week to be > 17, Win Probability Added > 20%, and Quarter to be "Q4".
• Select all successful 4th-down conversions by filtering on down and selecting "First Down" and "Touchdown" from the Play Result dropdown.
• Relive all of the most heartbreaking Cleveland Browns moments by choosing them from the Team dropdown, filtering to when they were on offense, and then picking Win Probability Added values of -20% or less.
• Find those rare interceptions that are actually beneficial to the offense by choosing "Interception" from the Play Result dropdown and filtering for Win Probability Added values > 0%.

Once you've filtered down to plays you like, you can either inspect them in the table at the bottom of the dashboard (if you've filtered < 1000 plays) or by exporting the data to CSV for further analysis.

How it Works

NFLDash uses play-by-play data downloaded by the nfldb package, which covers all games from the 2009 season onward. While there are a few plays which have been misclassified, overall nfldb's accuracy is quite high. A Python script runs a custom query on the nfldb database, then outputs the results to a CSV file. Then, whenever someone loads the dashboard, several javascript libraries go to work, most notably:

• D3 loads the data in and is responsible for the behind-the-scenes rendering of the charts.
• Crossfilter handles the fast, client-side indexing and filtering of the dataset.
• dc.js provides the glue between D3 and Crossfilter to easily create reactive charts which are connected to each other.

There's also a small amount of custom javascript (and some monkeypatching) to handle some idiosyncrasies in displaying the data most effectively, while Bootstrap covers the styling.