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.
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.
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.
Or, for the next week you can check it out live on my NFL Standings page.