nba-graph
Graph visualization of historical NBA data
setup
Install deps
npm install
Build
// build graph CLI tool
npm run build:graph
// build graph and watch for changes
npm run watch:graph
// build app
npm run build:app
// build app, watch for changes and serve with dev server (served @ localhost:3000)
npm run serve:app
graph
The graph
module is a CLI tool which downloads and parses NBA data from www.basketball-reference.com
, and builds a graph from the output.
- Downloading data
Output data is stored in ./data
, first as .html
files from the initial download, then as .json
files after the data is parsed. To download data, the following commands can be used:
node graph.bundle.js --download-{leagues,teams,seasons,players-index,players}
Some download commands can be run in any order, while some require data to exist before they can be run. Suggested order for downloads is: leagues
, teams
, seasons
, players-index
, then players
.
note: some commands may take a while to finish as basketball-reference severly rate limits requests
- Parsing
After the data is downloaded, it can then be parsed into json files. Parsing commands can be run in any order.
node graph.bundle.js --parse-{leagues,seasons,franchises,teams,players,player-seasons}
- Creating the graph
Lastly, once all the data is downloaded and parsed, an output graph can be created.
node graph.bundle.js --build-graph
The output graph data is stored in ./data/graph/graph.json
. The graph is built and constructed using the graphology
library, which is the same graph library the frontend uses to render the graph.
refs
- http://sigmajs.org/
- https://sim51.github.io/react-sigma/
- https://github.com/graphology/graphology
- https://graphology.github.io
- highlighting nodes: https://github.com/sim51/react-sigma/blob/main/website/src/components/GraphDefault.tsx#L65
- large graph FA2 rendering: https://codesandbox.io/s/github/jacomyal/sigma.js/tree/main/examples/large-graphs?file=/index.ts:234-307
todo
test rendering sprites (basic + webgl)render multiple spritessprite performance optimizations- data
download player images + create spriteimprove player parser to use players/x/xxx.html files for better info (seasons, all-stars, etc)- improve locations
- 2/ add other interesting nodes (MVP, champion, X time all star)
- UI
- 1/ improve / fix search to move to current node
- filters and advanced search
- hacks
- test animations for force layout and other movements
test moving neighbors in a circle around selected node (and keeping them there... animation?)
- deploy
- setup github page
- deploy assets to aws/cloudflair