A responsive, interactive scatter plot that displays the percentages of points scored by NBA teams via 3-point and mid-range field goals. The visualization offers the following interaction possibilities:
-
Moving the slider allows users to see the variation of the said percentages between 1999-2000 and 2018-2019 seasons.
-
Hovering over a circumference causes a tooltip containing the percentages of 3-point and mid-range field goals scored by the team to be shown.
The visualization was implemented with React and D3. React renders visualization components, whereas D3 handles data and axis calculations. Thanks to React Hooks, only functional components were employed.
The ResizeObserver API and Amelia Wattenberger's useChartDimensions hook were used to make the scatter plot responsive. Please refer to React + D3.js for further information.
This project was bootstrapped with Create React App.
-
Clone or download the repository
-
Navigate to the project directory:
cd beyond-the-3-point-arc -
Install dependencies:
npm install -
Run the app in development mode:
npm start
Please refer to the Create React App documentation for further information.