The NBA in Numbers: Visualizing the Game
Suvra Majumder — CS485 Emory University
Introduction
For Emory University’s Human-Computer Interaction course (CS485), we were tasked with utilizing visual methods in order to tell a story through data. My team — Allen Zhang, Dubem Nnake, Thomas Skodje, Zhongzheng Xu, and myself — decided to tell a story about the NBA. What does Elo really mean and do they really connect to success? We used data derived from FiveThirtyEight’s “The Complete History of the NBA.”
From player performance and team rankings to historical trends and season highlights, we dive deep into the numbers to uncover insights and tell compelling stories about one of the most beloved sports in the world. Whether you’re a die-hard fan, a casual observer, or someone who doesn’t really care about sports (myself included, lol) our data-driven approach will take your appreciation of the game to a whole new level. Join us on this journey and discover the beauty and complexity of the NBA like never before!
If you want a brief synopsis of our project, check out our demo video here:
But first, what even is Elo?
If you’re anything like me, you don’t really care much for sports and definitely don’t understand all the jargon surrounding it. So, what exactly is Elo? NBA Elo is a statistical rating system used to rank NBA teams based on their performance in previous games. The NBA Elo system takes into account several factors such as the margin of victory, the location of the game, and the quality of the opponent, among other things, to assign a numerical rating to each NBA team. This rating is then used to predict the outcome of future games and to rank teams in order of their perceived strength.
Therefore, utilizing the Elo system, we aimed to present the data in an interactive visualization that allows the user to explore and analyze the information.
But first, let’s brainstorm!
The Five Design-Sheet Approach
To brainstorm and finalize our visualizations, my team and I utilized the Five Design-Sheet Approach, an approach that involves five distinct design sheets that help us focus on different aspects of the design, including the user, the data, the tasks, the visual representation, and the interaction.
Sheet 1: Brainstorming and Users
Each design sheet is focused on a specific aspect of the project and includes questions and prompts to help guide the design process. The first design sheet is meant to help us define the target audience and their needs as well as generate ideas for the visualizations themselves.
To make Sheet 1, my team and I congregated in the library and spat out ideas pop-corn style, jotting down whatever came to mind. It was a short meeting with the sole purpose to get the creative juices flowing! From there, we gathered around the generated sheet and filtered out our best ideas:
- Showcase the NBA’s top-performing and underperforming teams annually.
- Create a plot to depict the comparative strength of the Eastern and Western Conferences.
- Provide an overview of each NBA team’s relative strength throughout the league’s history.
Sheets 2 and 3: The Visualizations
The second sheet is the datasheet, which focuses on understanding the data being visualized and its characteristics.
Sheet 2: Analysis
Our 2nd sheet was centered around the Analysis portion of our assignment. This section of the project aimed to give the user a general understanding of the data as a whole. We wanted to display the information in an unbiased way and display only the facts.
The first visualization we ideated was a line chart that demonstrated the mean Elo per team for each year in the data. The idea was to display all teams on the same graph as well as allow the users to choose which team they wanted to look at.
The second visualization was the idea of a wins/loss count per team. This would present a fact-of-the-matter count that left no room for bias. We also played around with the concept of a bar graph that displayed a selected team’s Elo or win/loss ratio but in the end decided against that because we thought it would be more descriptive to give an actual count.
The last visualization we imagined was a scatterplot that displayed the mean points by one team against another team, paired with a color-coded time scale that demonstrated the difference in points as the years went on (a scale of whether the team improved or not.)
Sheet 3: Persuasion
A large part of our project was to select an argument and utilize our visualizations to present compelling and storytelling evidence derived from the data. As someone who knows quite literally nothing about the NBA, I let my team take the reigns on this one, and here’s what they came up with:
For our persuasion, my team decided to explore the East and West Conferences and see once and for all which is the better Conference—is West really the best? You’ll find out soon!
The biggest visualization is the map — this map is meant to display all of the teams (separating east and west by color) and for a selected year range, their indicated dot on the map would increase by their Elo for that year.
The second visualization would be a line chart that indicates the western conference and eastern conference's mean Elo through the years. This would allow users to easily compare both conferences and analyze the trends.
The last visualization was a stacked area graph for each team comparing the top 8 teams from each conference.
Sheet 4: Putting the details together
The 4th design sheet in the process is the detail sheet which involves adding details and refining the design further which can include adding fine lines, textures, and other details to enhance the design. For our sheet, we combined the analysis and persuasion aspects of our project and fleshed out the final details. We focused on all the visualizations we wanted to include and how we would make them interactive — such as by adding year sliders and team selectors. We wanted to emphasize interactivity with our analysis portion of the project to display the data in various ways and allow the users to interact with them in the way they want.
Sheet 5: Feedback and Refinement
Receiving feedback is one of the most important things a designer can do — it’s easy to love your own work, so it’s extremely helpful to have a different pair of eyes look at it. We sent our initial visualizations to a few friends and classmates and then further iterated our visualizations with the given feedback, producing this fifth and final design sheet!
We received various feedback on our color choices and decisions on visualizations and altered them accordingly. Taking into consideration our own capabilities and the feedback we received, one of our biggest changes was altering the stacked area chart on the persuasion to a stacked bar chart instead. This would be easier to implement for us novice-Vega-Lite-ers and also easier for the user to differentiate between east and west.
Let’s Code!!
I’m going to be so honest — we struggled. A lot. Pretty much everyone on my team was a novice to Vega-Lite and had only gotten a very brief introduction to its capabilities, so it took us a while to get comfortable with it.
Personally, I encountered significant challenges while working with Vega-Lite. In hindsight, I regret not saving all my failed attempts at coding the Analysis wins/losses count chart, which involved concatenating a line graph depicting the max Elo for each year with a corresponding chart displaying the win/loss count. To achieve this, I utilized Vega-Lite’s brush selector, which allowed users to interact with the line graph by brushing over the years, resulting in the win/loss count graph changing accordingly. It was a big task for me and it took a while to get, but I’m super proud of myself for getting it to work!
I was also the primary HTML and CSS coder for implementing the website! It took a lot of trial and error to properly embed the Vega-Lite visualizations but with the combined effort of my team, we were successful!
Our struggles with Vega-Lite and embedding our visualizations into HTML were well worth it in the end! Here is our website and these are the visualizations all coded out:
Conclusion
So, that concludes our project! This was a very fun experience for me getting to learn about Vega-Lite and using my knowledge of HTML and CSS to be useful for my team. Additionally, I learned a lot about basketball and the NBA — though I still don’t think I’ll find myself watching games any time soon, I’ve definitely grown an appreciation for the players and the hard work of each individual team. If you want to check out the results of our analysis and find out if west really is the best conference, check out our website!
