NBA Shots Visualization

By Peter Beshai

The App

The application provides a wide set of visualizations to explore and analyze shoots statistics, from simple field goals attempted, made and percentage to shots distribution over the field. As you'll see in more detail later, the application will let you explore the data from several point of views, still being good looking and easy to use. If you are a basketball analyst, or just a fan of the sport, or even if you are not really into basketball you'll find the application quite enjoyable (I personally spent a lot of my time playing with it). You can try the application at the following link

App

The Data

The basketball data and player photos are provided by stats.nba.com , the official NBA stats website providing all the statistics of (almost) every player in the league, updated daily. Despite an official API doesn't exist there are several unofficial APIs on the web that let anyone retrieve these data easily.

Analysis

As we open the application we immediately see a considerable amount of graphs and charts relative to a specific basketball player which may be a little overwhelming as the attention of the user isn't really captured by a single chart over the others, since they're all equally showy and there isn't a main graph which may deserve more attention. I would have personally chosen to initially show just one chart in order to let the user first get what's going on and then let him to decide which graph explore next, maybe adding for each chart the possibility to open/close it when needed.

Before going any further, a well designed system of filters allows the user to easily find a specific player by name, team, position or by his rank in different statistics rankings. Once we've found the desired player we can hide the selection box in order not to waste any part of the screen and focus just on the player.

As you can see from the picture, on the top left of the initial screen we find an overview of the player, with name, position and standard statistics such as average points (PTS) or three-points field goals percentage (3FG%); the user also has the ability to select to which season (up to 2011/2012) view the statistics, and obviously to change the player to visualize, with the previously described box.

By hovering over the small question mark right below the player position this visualization appears: it shows both the frequency and the accuracy of the shots of the player from any (reasonable) distance from the rim. I found this visualization particularly clever since it manages to show two key features of a player, both depending on the distance, in a single but still very clear graph: the thickness of the line encodes the frequency of shots from that particular distance, while its color encodes the percentage of shots made with respect to the league average. The author wanted to give just an overview of the player shots, hence there are no quantitative information neither for the distance (there's just a vertical line to mark the three-point line) nor for the frequency or the accuracy. There are all the other charts on the screen to provide a more accurate and quantitative analysis of the player, but this small streamchart gives a nice overview of the player's favourite positions for shots. Last but not least, the decision to show the relative shots accuracy helps also non-expert users to get an idea of how good a player is. However, comparing a player to all the other players, for all the positions, may not be the best idea since player in different roles will have very different shots distribution and accuracy (a pivot will unlikely have good percentages from medium-high distance from the rim) and this may lead to inexact over or underestimations of the player real capability. Maybe a shot accuracy relative to only the players of the same position would have given a better overview of the player but still, this is a very effective visualization.

Right next to the player overview we have a visualization of the distribution of the shots attempted and made by the player over the chosen season. The chart can be highly customized by the user with a series of filters on the data currently visualized, for instance we may decide to view only zones of the field with an arbitrary accuracy, or with a minimum amount of shots performed by the player over the whole season. The size of the dots on the field cleverly encodes the frequency of the shots. Two different color ranges are provided, which encodes two (slightly) different shot accuracy with respect to the league average: again, a comparison with all the players in the league may mislead the user and using two different color scheme just to encode really slightly different percentage may be redundant if not useless, but since it doesn't reduce the usability of the application I don't really feel to criticize this aspect, let's just say I wouldn't have put it in my application. One other criticizable aspect is the possibility for the user to choose between raw and smoothed data, since there's no explanation on what they are and the user would only see charts slightly changing without actually getting what's going on. Finally, to show zone data I would have used a heat map rather than just clustering the already shown shots, in order to give a clearer idea of the favourite shooting zones of the player.

On the top right of the screen we find these four graphs which finally show data in a both qualitative and quantitative way (we can actually see an flow of increasing precision in the data displayed from left to right). The meaning of each chart is stated in the title and they all show in a fairly easy and clear way different complementary information about the shots frequency and accuracy. What we notice in the top charts is (finally!) the presence of an absolute frequency/accuracy of the player, and two comparisons, one with the whole league and one only with the players on the same position. Therefore we can finally have a comprehensive view of the ability of a player, specially with respect to his position. On the Bottom charts we see a new kind of shots distribution and accuracy, this time with respect to the imaginary line that vertically divides the field in two regions. All these charts are clear and provide a good amount of information, but as they are right now, each one would look a little isolated from the remaining charts. But if we try to hover any of the charts we'll see new lines appearing both on the charts and on the field distribution chart previously described. These lines first of all helps the user tracking the specifing chart he's looking at (while providing additional specific information), but they also link all the charts of the application, and in particular they visualize the specific distance (from the rim) examined on the actual field, which really helps people not really into basketball technical details realize how far from the rim we actually are, rather than just showing the effective distance in feet (especially for those like me who still have not a clue on how long a foot is).

Right below the player information we find a small box that allows us to furtherly filter the data displayed on all the charts. By default the data for all the games played by the player team are displayed, but we may decide to show data relatively to only wins or losses, away and home matches, against all the teams or with a particular one and relative to all the season or just last games. What we may have realized so far is that these application may actually help finding useful information about the player depending on many different factors, and therefore it may help data scientists to initially visualize and spot occasional patterns in player behavior (e.g. a team may notice his best player is performing badly only against specific teams and may want to understand why).

If we scroll down the web page we'll find another pair of simple bar charts representing the average points made and the field goal % against each team in the league and the rank of the player in different rankings depending on various statistics such as average points per game (PTS) or three-point field goals percentage (3FG%). Despite being simple bar charts they actually provide precise information of the chosen player Not particularly exiting but may be still useful to anaylize player performance. However they require the user to scroll down the page, which make them actually unrelated to the previous charts.

So far we have seen how this application could help exploring the performance of a single player on different complementary levels in many different but still related ways. It may both help basketball fans see how their favourite players perform over the current and the previous seasons, but also may help data scientist from NBA franchise prospect the performance of the team over the next seasons. But there's more...

On the very top of the page we see that right now we are in the Players page, but if we click the Compare button a different visualization appears. This part of the application allows us to compare different players of the league. All the charts of the previous section are replicated here, this time one below the other so that the user can actually compare a player to many others players, there's actually no limit on the number of players to show, as long as they fit the screen (a wide screen such as the one in EVL would allow comparing many players all at once). Moreover, and that's why I found this application really useful and complete, we could compare a player with himself on different seasons, as we may be interested in understanding wether a player is growing or not (in term of performance). This feauture could actually be useful for a franchise to decide wether to buy or sell a certain player. I found this section really well designed since all the key features of the application we saw before are still here (e.g. hovering over the charts will link all of them, on all the players displayed, by showing verical lines and distance from the rim as described before).

There's still more! In fact there's a third section where we can no more visualize a single player but rather the whole league, with almost the same scheme of the previous sections. As we open it we see the shots distribution of all the players of the league encoded in the same previous way, with the size of the dots to represent frequency and the color (again, in two different ranges) to encode accuracy with respect to the totality of shots (as one may expect, shots close to the rim are more accurate than farther shots). This time we have also a heat map that better represents the favourite shooting zones for the players. Moreover, right below the overall graph we find three others which represent the same information but for the three main position in basketball: guard, forward and center. This part of the application is still, in my opinion, well designed and provides an overall view of the league, making it more useful for just fans and curious than actual experts.

If we just scroll down we'll find another part of this extremely wide visualization: a comparison among all the 30 franchises of the NBA. Again, the user is allowed to choose whether to show heatmaps or shot charts and to slighlty filter the data (show only zones with a given minimum number of shots attempted). This part may be useful to compare the performance of a team versus all the other in the league but in my opinion looks quite like designed in a hurry since, from all I've previously seen, I'd have expected a more customizable comparison (like for the players) so the user could actually focus only on specific teams rather than on the whole league. Maybe an extra section of the application with the same scheme of the Compare section would have given the user more freedom to explore data also on a team level rather than just on player level.

Conclusions

The application examined achieves the opposite of easy task to visualize in a scalable, easily readable but still useful way all the shots performed by a single player, an entire team or the whole league during several seasons (by the way the dataset is steadly updated, so we'd probably have soon data also for the current season). Despite showing shots distribution in several different charts the application remains easily usable, I would only have added the possibility to close the charts I'm not interested in so as to focus only on those that are actually relevant for me. This is one of the most detailed and useful visualization basketball related I've ever seen, and I'm pretty sure it may be useful also for basketball analyst (as a matter of fact the author is one of them) visualizing and exploring the performance of players and teams from different positions. Some visualizations are actually more effective than others but one key aspect is that it is a fairly recent application and, as I said before, the author keeps on updating it with new data and features (when it was firstly released almost a year ago there were slightly more than half the functionalities there are now). Thank you for reading my (quite) long analysis of the application, I hope you'll find it enjoyable and useful as I did.