Visualizing NHL Assist Data

This is another practice run with D3.js. With the Penguins winning their second straight Stanley Cup earlier this month, I wanted to look at some assist data from their championship season.

In the NHL, each time a goal is scored, up to two assists can be awarded to players on the goal scorer's team. If Player A passes the puck to Player B, who passes to Player C, and C scores, then A and B each get an assist. If only Player A had the puck before C scores, then A gets the only assist. It's also possible for nobody to have had the puck before C scores (usually because the opponent turned the puck over to him). In that case the goal was "unassisted", and no assists are awarded.

It is very natural to think about assists in terms of a directed graph. Each player is represented by a node, and if Player A assists on Player C's goal, an arrow is drawn from A to C. But what if we want to know how many assists Player A has made on goals by Player C? With a directed graph we would need multiple arrows, which will quickly become unreadable on a graph with 30 or so nodes.

To more easily show the number of assists, I decided to go with a chord diagram. The thickness of the curved lines, called chords, between two players represents the number of assists between them. The thicker the chord, the more assists.

You might notice that the chords often have different thicknesses at each end. That's because they are directed. For example, Phil Kessel had 15 assists to Evgeni Malkin, but Malkin only had 7 assists to Kessel.

The players are arranged around the circle by position. Forwards are shown in yellow, defensemen in black, and goalies in blue (Matt Murray had two assists, but sadly no goals). Chords are colored according to the position of the player with more assists. For instance, Justin Schultz, a defenseman, had 7 assists to Evgeni Malkin, a forward, and Malkin had 6 to Schultz, so the chord between them is black.

Mouse over a player's name to only display assists involving that player. By hovering on the name you can see how many assists he had that season. Hovering over a chord will show you the number of assists between the two players in question.

You can see the code here. It's also hosted on GitHub. I borrowed heavily from Mike Bostock's visualization of Uber rides to create this. I collected the data using the fantastic MySportsFeeds service and processed it in R.