-
Command: npm start, you will see a default webpage with Stephen Curry's information.
-
If you search "James", you will see the suggestions with players' image and name in the dropdown.
-
Click "James Harden", you will see the webpage with James Harden's information with slider's value equal to "1", chart type "hexbin" and switch "off".
-
If you change to switch to "on", you can see a tooltip when your mouse hover on a position.
-
You can move the slider from "1" to "20"(the current value is 10 points), it only shows positions which the player gets points no less than slider's value.
-
By default, the chart type is "hexbin", you can change it to "scatter".
-
With the switch "on", a tooltip will pop up when you mouse hover on a position.
- Built a dashboard using React, D3 and Ant Design backed by API from stats.nba.com to visualize individual player’s shot data, including a shot chart and user profile view.
- Created 4 extra filters and 2 shot themes (hexbin and scatter) to provide more customized visualization on shot chart.
- Constructed a autocomplete player search bar providing a list of players (image and name) in a suggestion list.
Thank you for reading.