Visualizing NFL Free Agency as a Node Network
By: Advaith Venkatakrishnan
Tags: Sportsviz, NFL, D3js, Dataviz, Sports

The first wave of NFL games is in the books. Le’Veon Bell is a Jet. Odell Beckham Jr. had to turn over his blue uniform for a brown (Browns) one. How many players did your favorite team lose this offseason? Who did they pick up? Where’s everybody going?

Every year, hundreds of players switch teams and sign big contracts in a mass exodus called NFL Free Agency. If you’re just tuning in for the beginning of the NFL season, your team might look very different from when you last saw them.

How do you make sense of player movement across teams and see the whole picture? I wondered the same thing, so I created a node network to visualize all of NFL free agency on one page.

Demo: https://nfl-fa-2019.surge.sh/

Zoomed out node network of 2019 NFL free agency

The NFL offseason is an integral retrospective of a team’s performance when they determine how to rebuild or retool their rosters within the constraints of the salary cap. During this phase, general managers seek talent in the NFL draft and in free agency. Free agents are players whose contracts have expired and, as such, are free to sign with any team.

Free Agency 2019 OverTheCap

Currently, to understand NFL free agency you must sift monotonously through tabulated records of players. For example, the 2019 free agency table from OverTheCap lists each player along with their old and new teams. Finding information for a particular player is easy, but understanding why a team might have made certain decisions is lost in the rows and columns.

I wanted to know how many players the Carolina Panthers signed this offseason, how many they lost, and how much money they spent on their newly signed players. I wanted to see which teams are attracting top talent and which teams are losing it. With each player acquisition, I wanted to evaluate whether or not a team improved upon their weaknesses from last season. If a team struggled defensively, I wanted to know whether or not they looked to improve their defense by signing defensive linemen, safeties, or linebackers. Most importantly, I wanted to discover new insights and relationships hidden amongst the rigidity of the table structure above.

Essentially it boils down to one question: What is the best way to view all types of player movement and easily drill down on specific player information?

Simple Node Network

My answer is to visualize free agency as a node network. A node network is a direct representation of a graph, which is made up of edges (links) and vertices (nodes). Links are connections between nodes to show their respective relationships. This visualization is very tempting since it shows the flow of all players between teams and encodes various information into the size of the nodes and colors of the links.

But a node network comes with its own drawbacks. Searching for a particular set of nodes becomes difficult with large amounts of data. The network is often cluttered and requires a great deal of tedious tweaking and optimization, and encoding that much information makes a lot of assumptions about the audience, especially one that is not familiar with NFL lingo or semantics. However, it was still worth a shot.