NBA Radial Bracket
What is this
High Level Documentation
The front end uses a d3 partition layout to create the radial bracket. The back end scrapes a website, Basketball Reference, once a day and uploads data to Firebase. For more specific documentation, click the links or view the docs folder.
Front end is a
d3 partition layout. It was definitely the harder part. I found this online, but it used a old version of d3 and was kind of confusing. However it pushed me in the right direction. View the docs here.
The flow of the backend is
Transform. Transforming was the hardest part, but not that bad. This is also stored in a function in
scraper.js. View the docs here.
This uses Firebase so there is no hosted server. This is how the app is able to be hosted on Github Pages. Firebase Cloud functions are used to expose a url that can run the
getPlayoffData function defined in
scraper.js . Running
firebase deploy --only functions deploys the functions specfied in the
functions/index.js file as Firebase cloud functions. Then performing a
GET to a specific url runs this function (which in turn scrapes the website and updates the database). Using
https://cron-job.org/, I schedule a
GET request to this URL once a day. I also have a
deploy NPM script that builds the whole thing with webpack and pushes it to the GitHub pages branch.
Update: Firebase Cloud Functions stopped working because I ran out of credit, so I switched to using GitHub actions to run a function once a day.
And don't forget to trust the process. The Sixers are gonna win the Finals soon enough.