NHL Trades

An interactive visualization of all NHL trades and signings from Aug 1, 2015 to Oct 21, 2017.

Click a logo to see only that team's trades, or change the options below.

0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 cancel Trade Free Agency Waivers Exp Draft x0.5 x1 x2 x5 Filter by Player

Start Date

End Date

Player Gain/Loss Show only transactions where a team gains or loses a player.

Note: Only applies when a single team is selected. All Gain Loss Transaction Types Trade Free Agency Waivers Exp Draft Load Reset Animations Show Numbers Auto-update When selected, loading begins as soon as any option is changed. Link to the current set of options:



This was built using data from Wikipedia, which only has information about NHL transactions starting in August of 2005 and seems to be missing Free Agency and Waiver moves before 2006. Some of the data was corrected using the excellent database at prosportstransactions.com/hockey.

For suggestions, requests, errors, or fawning praise, please contact me.

Technical info for the curious: I tried many different ways to animate the data, including using native HTML5 canvas, SVG, d3, the PIXI WebGL library, and various combinations of all of them. No technique provided sufficiently smooth performance given the complexity of what I was trying to do, so I ended up simplifying the animation and using SVG for its built-in scalability and CSS controls.

The animations are built using the remarkably powerful GreenSock Animation Platform. I fell in love with GSAP's ability to keep track of everything that needed to happen at specific times and its timeline feature with built-in seek abilities.

You can check out the source code on GitHub.