Beyond the three-point arc

An essay about the prevalence of three-point shots in the National Basketball Association (NBA) that combines interactive visualizations and text.

The challenge

The NBA website uses interactive tables to present statistics on field goals. Although these tables allow visitors to sort data in different ways, they fail to show that there has been a shift towards 3-point field goals.

My goal was to write a visual essay that employs visualizations to convey the increase in the points scored via 3-point shots in the last 20 seasons.

A solution

In order to show that different NBA teams have become more reliant on 3-point shots, I implemented two responsive and interactive visualizations: a bar chart and a scatter plot.

The bar chart shows the percentage of points scored via 3-point field-goals between 1999-2000 and 2018-2019 seasons. Hovering over bars cause exact values to be displayed.

Visual essay bar chart

The scatter plot displays the percentages of points scored via 3-point and mid-range field goals. Tooltips that appear upon hovering on the circumferences show the field goal percentages. The season slider shows how those percentages varied over time and the selector is used to locate a team in the data cluster.

Visual essay scatter plot

In addition to watching the animated GIFs, you can interact with the aforementioned visualizations.

Implementation details

React.js and D3.js were used to implement the visualizations. React renders visualization components, whereas D3 handles data and axis calculations. Selectors were built with the Material-UI framework and animations made with CSS.