The visualization comprises a bar chart and a histogram, and was implemented with React and D3. React renders the visualization components, whereas D3 handles data and axis calculations.
The bar chart depicts points scored in each Golden State Warriors game of the 2019 NBA playoffs. Hovering over a bar causes a tooltip containing additional game information to be displayed. The histogram shows the number of games in which Stephen Curry's performance was within each point interval. Selecting a point range in the histogram makes the bar chart display games in which the number of points made by Curry fell within said range.
Amelia Wattenberger's hook was used to make charts responsive, whereas Peter Beshai's code, which relies on react-popper, was employed to prevent tooltips from being clipped. Susie Lu's react-annotation was used to render annotations.
This project was bootstrapped with Create React App.
-
Clone or download the repository
-
Navigate to the project directory:
cd with-or-without-curry-playoffs -
Install dependencies:
npm install -
Run the app in development mode:
npm start
Please refer to the Create React App documentation for further information.