Innovation Session: The History of NFL Win Percentages – Part 2

I’m going to pick up where I left off two weeks ago working on my chart of NFL team win percentages over time.

Last week I focused on getting the infrastructure setup, which was much easier than I thought, and walking through a basic tutorial to get a line graph working in D3. This week I’m going to do some customization.

Wins, Losses & Ties

To get the chart working last week I simply calculated the win percentage for the Falcons for a few seasons and plugged this in. Realistically that isn’t scalable, I’ll want to be able to input data in the form of a W-L-T season record and have it render.

To calculate a win % I will count each win as 1 point, loss as 0 points and tie as .5 points. I’ll then divide the sum by the total number of games to get a %.

When it comes to getting data quickly, wikipedia rocks. There is a page with all of the Falcon’s season data in a nice table format. I used it to create a new table with team, season, wins, losses & ties as my columns.

For the team value I’m using a single word key that I’ll be able to reference as I develop to link elements. For example, I will likely create a key to hex color reference dictionary so every team appears in their official color.

So now I have the history of the Atlanta Falcons.

nfl standings all seasons

Adding A Rival

One of the best parts about current NFC South is the historical parity. More so than any other division, we’ve all had our time on top and on bottom. Lately though, the Falcons and Saints have been fighting for the top spot. Last year we were 1:1 and the games were intense. This year we’re starting off the season with another battle.

Adding a second line the way I have planned is my first big roadblock. Most of the tutorials I’m seeing are suggesting adding a new column to add a new line. I’m not sure this will work for me because  I have already defined my charted value based on a calculation of three columns. If I added three more columns for every team I’d end up with 96 columns and a lot of code to parse them. I’d prefer to just add more rows that can use the code I just wrote and instead use the name column to distinguish the sets.

Unfortunately, javascript data manipulation isn’t my strong suite. After a number of failed attempts I finally got something sort of working. For now, both teams are on the chart but the code certainly isn’t clean. I basically created filters for each team and have two functions for plotting, each dependent on one of the filters. Feel free to take a look at the code an let me know if you have any tips: Greg Kroleski Github.

I want to build my keys dynamically from the csv team column and loop over each one creating a new line. I would also like to pull in the colors while doing this. Hopefully I can get there next week – but for now – here is where I ended up.

nfl standings falcons v saints

 Or, for the next week you can check it out live on my NFL Standings page.

Innovation Session: The History of NFL Win Percentages

Tonight I’m going to start working on an idea I had for an interactive chart of NFL win percentages. The idea came to me when thinking about the Detroit Lions and how bad they are. I wondered if they had always been this bad or if it was only recently. (Hint: Always) So I thought it would be cool if I could look and see every team’s win percentage for each NFL season going back in time.

This would be something easy to do in Excel or a static charting library, but I’m going to use it as an excuse to play with/learn an interactive data visualization library called D3.js. This is the javascript library that drives many of the webs coolest visualizations, like this New York times feature on NBA shot percentages.

I’ll have to get it working first, but once I do I’ll be able to add interaction and highlighting to make it easier to spot trends. I’m really excited about this… but that is because I haven’t started writing any javascript yet, once I do I’m sure my tone will turn more to frustration, it usually does when javascript is involved.

Here is a 30 second sketch of what I am thinking. Lots of lines, the ability to make one stand out and some sort of grouping of teams so it is easy to turn them on and off.


Getting Started

I going to start with the javascript and worry about data later. That is the easy part. Code will be posted on my github.

This is my first project running D3 from my server and also my first time developing on a local web server and then pushing the code to my regular server through github so I’m bracing for the unexpected.

A few minutes later… that was actually pretty easy. The nice part of developing an interactive visualization like this and pushing commits each time I get it working is that I can rewind if I ever need to.

Tonight I walked through a tutorial to get a basic line chart working in D3. The data is all loaded from a separate file which is the main goal. As I update the data in that file, the chart will update. I might explore loading data from an sports data API at some point, but for now this seems like one less level of complexity. As of tonight, what I’ve finished looks like this.

Screen Shot 2013-06-05 at 11.57.04 PM

It is the last 12 season of the Atlanta Falcons. I figured that was a good place to start.

If you visit this page in the next week or so, you’ll be able to see something that looks like that live (assuming nothing breaks). If you wait longer then a week though it might look different. Because this graphic is D3, it is rendered live when you visit the URL. S0, once I start working on it again, the version you will see at that link will be the most up to date one and it might be very different.