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.
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 Scrape → Parse →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.
Update: Decided I could just save the content to the repo
And don't forget to trust the process. The Sixers are gonna win the Finals
Update: 2 years later, still trusting the process...