Skip to content
Visualize the NBA Playoffs
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
docs
functions
src
.babelrc
.firebaserc
.gitignore
README.md
firebase.json
package.json
repository-open-graph-template.png
sample.png
webpack.config.js
yarn.lock

README.md

NBA Radial Bracket

View Here

What is this

After seeing this Reddit post I thought it would be a short fun project to create it in Javascript. The advantage of this would be it could live update and also show each year's playoff history.

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

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.

Back End

The flow of the backend is ScrapeParseTransform. Transforming was the hardest part, but not that bad. This is also stored in a function in scraper.js. View the docs here.

Deployment

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.

And don't forget to trust the process. The Sixers are gonna win the Finals soon enough.

You can’t perform that action at this time.