NBA Player Movement using Plotly Animations

If you have been looking for animation support in Plotly, it’s the high time you explore it.

In this post, we will recreate a slice of the NBA game between Toronto Raptors and Charlotte Hornets using the Plotly animations.

Data Collection

NBA’s official site had a section for ‘player tracking movement’ data in the past. Currently, it’s offline due to some technical difficulties (according to the site).

We will be using a publicly available dump of that dataset from GitHub (source repository: linouk23/NBA-Player-Movements).

Let’s fetch the data for a game event.

Basketball court using Plotly shapes

We will start with drawing the game court using Plotly shapes. You can read our post (NBA shots analysis using Plotly shapes) for more details on it. It’s based on the details provided in a similar blog by Savvas Tjortjoglou.

As the NBA court is 94 by 50 feet in dimension, we will use it for our court.

It will result in the following chart, we will be using it as the background of our animation chart.

Data Processing

We will create a dictionary titled team_details from the event data, it’ll contain the basic information like team name, team id, player jersey and name.

For this particular event, there are 600 total moments.

A single grid can’t have all the 600 frames, so we will be using multiple grids. We will use 40 grids for all the 600 frames, each having data for 15 frames.

The animation will have 3 moving traces (groups); for home team, visitor team, and ball. We will use different colors and size for them.

Now we will create the frames iterating over all the grids and groups.

Finally, we can create the animation using the previously created shapes as a background.

The source code for this animation is available as IPython Notebook on Plotly.