NBA shots analysis using Plotly shapes

In this post, we will analyse the shots by Stephen Curry, ‘Top Scorer’ of the NBA season 2015-16.

You can create SVG shapes like line, circle, rectangle, and path using Plotly’s shapes feature. With the help of the shapes, we will create the basketball court and plot all his shots on it.

Data Collection

We will collect the necessary data from NBA Stats.

Data Transformation

After collecting the necessary data, the next step is to transform the data in proper format for querying.

Using pandas we can create a DataFrame object from the JSON response content.

We can see that there are two unique values (‘Made Shot’, ‘Missed Shot’) for the column ‘EVENT_TYPE’ in the DataFrame. They represent the shots that made (or missed) it to the basket.

A row in the DataFrame represents a single shot and the columns ‘LOC_X’ and ‘LOC_Y’ represents the location of that shot.

Shot Locations

Let’s start with creating a scatter chart of all the ‘missed’ shots by Stephen Curry.

We can see that most of the shots are near the hoop and three-point arc (line).

Similarly, you can create the chart for all the successful shots using the following Pandas selection syntax.

It will select all the shot with ‘EVENT_TYPE’ equal to ‘Made Shot’.

Creating the court

The X-axis and Y-axis of our court chart will range from -300 to 300 and -100 to 500 respectively, 10 units on the chart scale is equal to 1 feet.

For reference to the court dimensions, we are using this image linked in the post by Savvas Tjortjoglou.

1. Outer Lines

The boundary of the court looks like a rectangle of the size 50(ft.) X 94(ft.), we are drawing just the half (47 ft.) of it in length.

Here, the points (x0, y0) and (x1, y1) represents the bottom-left and top-right points of the rectangle.

2. basketball hoop

We will draw it using a circle shape. The center of the circle is at the origin of the graph, with the radius being 7.5 unit.

3. Basket Backboard

The Backboard is a raised vertical board with a basket attached. It’s 72 inches (60 unit) wide.

4. Outer box of three-second area

It’s a rectangle with 16 ft. in width and 19 ft. in length.

5. Inner box of three-second area

It’s a rectangle with 12 ft. in width and 19 ft. in length.

6. Three-point line (left)

The left side line of the Three-point line, 14 ft. in length.

The points (x0, y0) and (x1, y1) represents the edges of the line.

7. Three-point line (right)

The right side line of the Three-point line.

8. Three-point arc

The extreme point of the arc is 23.9 feet away from the origin.

We are using the Curve Command (C) to draw the half circle (arc) path. You can learn more about SVG paths from this tutorial by Mozilla.

9. Center circle

This circle has a radius of 6 feets.

10. Restraining circe

This circle has a radius of 2 feets.

11. Free-throw circle

This circle has a radius of 6 feets.

12. Restricted area

We are using the dash property to style the circle, it has a radius of 6 feet.

That’s the basketball court outline created with the help of Plotly shapes and annotations.

Charting the shots

Now that we have all the shapes for the court, we will plot all the shots on it as a scatter plot.

We have made two traces for the ‘missed’ and ‘made’ type shots, with different colors to help us identify.

You can toggle and view the distribution of different shot types by clicking on the legend.