Picking up where I last left off, today I’m going to try to make progress on my NFL history chart. Specifically, I would like to implement a javascript function that parses the data and splits it by team, graphing a new line for each. If time allows I would also like to pull in the data for each team and define the colors.

Two charts that I’ve drawn inspiration from as I’ve been working on this are the New York Times housing prices graphic and the Feathersquare chart of Oxford Summer Eight” bump race results. The first is beautiful and second is fairly contextually similar. Hopefully this NFL graphic can hold a candle to them when it is all done.

Team Colors

One idea I had was to have the color of each team’s line be one of the team’s official colors. I was hoping to be able to pull this in from a centralized source so I could change colors if the graph was too noisy. This is important enough that I figured I should make sure it would work before getting too far down any path. I had gotten the Falcons & Sains colors to work last week by using a CSS color name, but didn’t really want to have to do that for every team – I was hoping I could use the hex color code instead.

It turns out that is really easy. The line can be defined by a hex, color name or RGB numbers. Knowing that, all I would have to do is build out a CSV with each team name a color code. I could then reference this CSV later.

Getting the colors would be another story, I thought I would have to go to each team’s site & either look for it in a press kit section – or download their logo and use photoshop to get the color. Turns out someone else already did this. I love the internet. Someone built a handy website that has all of the NFL team colors hex codes. Piece of cake. Because I’m only planning on using one color for each team, I went through and picked the most distinguishable one for each team.

Asynchronous Javascript

Today’s sessions could best be described as three hours of trying to get something to work only to realize that it would never work that way and then a few minutes of clarity in which a lot got done. Programming seems to go like that a lot & the pacing is always discomforting to me.

After finishing that I set out to get a simplified function to show each team’s line. D3 makes it really easy to make a graph using a CSV using the d3.csv() functionality. If each row of the CSV is a unique object, you can quickly create a scatter plot, bar graph, etc, using information in the columns to visualize the object.

It turns out that isn’t as easy to do when each row is part of a series that is grouped by one of the columns. I figured I would have to refactor the code to get something to work. My initial idea was to load the data using d3.csv() then outside of that function, do the charting by calling back into it for each team.

I eventually realized that d3.csv() is asynchronous and can not be used to define a global variable. I have to everything inside of that function. So I got rid of everything I had been trying and started back where I was last week.

I got things working by charting off of a new array I call AllTeamData which holds an array for each teams data. I am still manually adding each team to it right now – figuring out how to automatically do that is the next challenge.

More Team Data

Somewhere in the middle of that javascript frustration I decided I needed a break and could at least make some forward progress by adding a few other team’s records to the CSV. Grabbing the Cardinals and Bears took be back to 1920 – means I need to make the graph wider if we’re going to be able to distinguish anything.

It is also fairly interesting to look back that far and realize how different football was. I had to make a few decisions about what to include. Teams changed names, moved and there were some years where teams combined because neither had enough players due to the great war.

Interaction

Finally, thanks to the way I’ve grouped and charted the lines I was able to add some interaction to the chart finally. I lost the team colors in the process, but hopefully I can get those back next week.

If you look now you’ll be able to see a bunch of grey lines, each of which turns blue when you hover on it.

See it yourself here: NFL Win Percentages

or

Check out the code on Github: NFL Win Percentages

Can you guess what the four teams currently charted are based on the data? (Note to self – add labels)