Me playing with around React.js and front end; I designed a dashboard using React, D3 and Ant Design backed by API from stats.nba.com to visualize any individual player’s shot data, including a shot chart and user profile view. Just like this:
The implementation invovles creating a few extra filters and 2 shot themes(hexbin and scatter) to provide the more customized visualization you see on the shotchart. The autocomplete player search bar added below providing a list of players(image and name) in the suggestion list.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
Just get npm and Node.js, then
git clone https://github.com/ZhekaiJin/NSA.git
npm install
wait with your patience for all packages to be installed
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
- npm - The package manager for JavaScript
- Node.js - a JavaScript runtime built on Chrome's V8 JavaScript engine.
- nba - The NBA's stats API for the browser or Node
- d3.js - d3-shotchart for basketball court visualization
- antd - An enterprise-class UI design language and React implementation.
- Zhekai Jin
This project is licensed under the MIT License - see the LICENSE.md file for details
- This project was bootstrapped with Create React App.