Alright, so today I’m gonna walk you through how I put together a little project visualizing the NBA 1996 playoffs bracket. It was a fun little dive into data visualization, and I figured I’d share the process.
First things first, I needed the data. I started by scraping the bracket information from a few different sports websites. I kinda just bounced around until I found one that had a decent layout I could easily parse. Used some basic Python with Beautiful Soup to grab all the team names, seeding, and who played who in each round.
After I had the raw data, it was a total mess. Think like, inconsistent formatting, extra spaces, just generally needing a good clean-up. So, I hopped into Pandas, also using Python, and started wrangling. Renamed columns, removed weird characters, and got everything into a nice, structured table. This part was probably the most tedious, but super important to get right.
Next up was figuring out how I wanted to visualize it. I wanted something clean and easy to read. I actually started sketching some layouts on paper. Just doodling boxes and lines to represent the bracket. Then, I tried out a few different charting libraries in Python, like Matplotlib and Seaborn. They’re great for basic stuff, but I wanted something a little more interactive.
That’s when I stumbled onto *. It’s a Javascript library that’s like, crazy powerful for making custom visualizations. It had a pretty steep learning curve though. I spent a good chunk of time watching tutorials and reading documentation just to get the basics down. I started with a simple tree diagram example and slowly tweaked it to match the bracket structure. Adding the team names, the seedings, and lines connecting them.
Making the bracket interactive was the real challenge. I wanted to be able to hover over a team and see some basic stats about their season. So, I pulled in some more data from another website with season records. Then, I added event listeners in D3, so when you hover over a team, a little tooltip pops up with their win-loss record and maybe a few key players.
Styling the whole thing was also pretty important. I wanted it to look decent. Messed around with the CSS to get the colors right, adjusted the font sizes, and added some spacing to make everything readable. Little details like that can really make a difference.
Finally, I hosted the visualization on a simple website. Just a basic HTML page with the * code embedded. Used GitHub Pages, because it’s free and easy to set up. Now anyone can check out the ’96 playoffs bracket I made.
Key Takeaways:
- Data cleaning is like 80% of the work.
- * is powerful, but be prepared to spend some time learning it.
- Don’t underestimate the importance of good styling.
Overall, it was a fun project that let me flex some data visualization muscles and relive some 90’s NBA nostalgia. Give it a shot yourself if you’re looking for a weekend project.
