Visualizing the Basketball World Cup
This is a pretty simple project about one of my favorite subjects: basketball. I won’t copy and paste the text from the web site: go ahead and read it, I believe it is pretty self-explanatory.
I believe there are some key takeaways, mainly concerning the workflow that are worth mentioning.
Obtaining the data was easier than I thought: I poked around the FIBA web site, viewing the source of the pages displaying the statistical data I was interested in. After I while, a couple of ajax calls for json data popped up and - voila! It was just a matter of saving the json data and converting it to a csv file. I know I didn’t have to do it, but I just seem to get a better feel for the data when it is really tabular.
The data is very structured - in fact, basketball statistics are as structured as it gets and they are getting more and more useful and in the last decade the data alone had a greater impact on the game than any singular player. That is a bald claim, but guess what? I have the data to back it up. Since the rise of the Golden State Warriors dinasty and Steph Curry’s MVP seasons, the basketball wold was taken by revolutionary small ball lineups, built around potential Currys - players who do not hesitate pulling up from thirty feet or something. Unfortunately, this project cannot capture this phenomenon: the data provided by the FIBA site is what we might call traditional data, I might add passive data ass opposed to active data that is routinely being gathered all over the world:
- clock time
- players on the court
- shot positions (shot charts)
- foul situations
I repeat: do not expect beauty in this app, for you will get none. The charts are simple and fastL I’ve even eliminated the somewhat informative labels in order to emphasize the position (x and y axes), color and size of the circles in the scatterplot.
Here, we are merely taking a peek at the summary of the data - the totals and the averages, without any spatial or temporal fine tuning. Well, at least is a visual one. What we have are totals and averages per game and per minute for every player that suited up for it’s national team in the main traditional basketball categories: points, rebounds, assists, field goal percentage and so on.
The main idea is to make a tool for quickly comparing the players and teams according to a selected statistic. The goal was not to build beautiful or spectacular charts, packed with information, but rather to enable the user to quickly poke around and create lots of simple but informative charts that enable him or her to compare the various players and teams.
The second chart is a horizontal bar chart with the red line denoting the average statistic for all the teams. I feel that it gives a nice overview of how the various teams fare against each other and compared to the mean. The ability to sort the data and the nice color palette bring out the differences between the teams. I also added the option to select subsets of teams: Top 16, Top 8 and Top4 but I was too lazy to modify the height of the chart. It works well, but it is not as pretty as the whole.
The team scatterplot is manly an exercise in how much data I can pack into a single chart while making it simple and somewhat useful. The user can manipulate the meaning of the two axes (x and y), the color of the circles and the size of the circles.
Well, you should obviously know a bit about basketball: I’ll be honest - if someone handed me a simple tool like this with baseball of rugby data, I wouldn’t be able to make much out of it.
Basketball-wise the data paint a grim picture for us - fans of Serbia, but also for US Basketball fans. It can be seen, through a bit of digging and exploring, that Spain and Argentina kept their secrets until the quarter-finals and semi, while Serbia, USA and New Zealand gunned away and smashed the weak competition in the groups. When it mattered the most, Argentina and Spain played smart and lectured the other teams.
This is not my first time working with D3.js, but here I just wanted to try some different charts that I wasn’t able to use in my previous projects. D3.js, as you probably know, is very peculiar and it’s enter/update/draw cycle is something that you just have to wrap your head around in order to fully understand the way data flows from the source (csv, json or other) to the SVGs… Once that is out of the way, there’s really nothing holding you back from making incredibly granular and fine-tuned visuals as you’re basically using html/css/js - so really anything that could be built with these tools can be part of your visual.
I feel that a similar tool would be very easy to implement and embed in an online newspaper or existing website and I am waiting for a next championship to see if I can extend it. Branding and overall design is fully customizable and what you’re left with is a mix of css and html creativity. With some real-time play-by-play data, of course, everything would be much more powerful and once I get my hands on such a dataset I will try out some ideas.
Reading and listening
As usual, I will try in each post to refer and somehow review the books, courses, sites or video that I believe could help you to leverage a particular technology, so for D3.js, here it is:
- D3.js Data Visualization Fundamentals By Lars Verspohl on Pluralsight. You can make a free time-limited Pluralsight account (hint: Visual Studio) and this course is really good.
- Shaun Pelling aka The Net Ninja has a great Udemy course as he generally combines D3.js with Vue.js and other technologies in order to make unique yet simple apps. He’s a great teacher btw.
- Interactive Data Visualization for the Web by Scott Murray is the de facto D3.js book. Read it, highlight it. Especially friendly towards non-developers, but valuable for everyone.