From CS 294-10 Visualization Sp10

Jump to: navigation, search

Part 1

Data Domain

One of the most frequent NBA discussions is the comparison of Lebron James to Kobe Bryant. I plan to create a simple visualization that aids in the evaluation of these two players. Eventually, I hope to expand this assignment so it supports other NBA players as well. I will use game statistics provided on NBA.com.

Kobe Bryant: http://www.nba.com/playerfile/kobe_bryant Lebron James: http://www.nba.com/playerfile/lebron_james

Because of the large number of statistical categories, I will limit myself to the following: games played, minutes per game, 2-point field goal percentage, 3-point field goal percentage, free-throw shooting, rebounds/game, assists/game, steals/game, blocks/game, turnovers/game, fouls/game, and points/game. Furthermore, I will focus on the seasons from 2003-2004 (Lebron's rookie season) to 2009-2010.


In many NBA-related debates, statistics are cited for argumentation but rarely do people reference visualizations as evidence for their opinions. I tried looking online for simple tools to compare NBA players side by side, but could not find any.

To make side-by-side comparisons of Kobe and Lebron easy, I plan to place their stats graphs next to each other. For example, Kobe's points/game graph will be next to Lebron's points/game graph. Each row will have 2 graphs, both based on one statistical category:

Image: Sidebyside.png

I will use the Scale Inversion interaction technique, which specifies the closest data point pointed by the mouse. This visualization is inspired by the Minnnesota Employment example (http://vis.stanford.edu/protovis/ex/minnesota.html). Mousing over a graph will highlight the graph and its neighboring graph in a different color (different from the default color). Furthermore, the visualization will show the closest data point (marked by a dot) as well as the corresponding data point on the other player's graph.

The following storyboard shows a situation where the user mouses over Kobe's rebounds/game graph. The nearest data point is shown and the season and number are displayed. Both Kobe and Lebron's graphs are highlighted a different color (orange instead of the default blue) for focus and Lebron's data point for the same season is shown as well.

Image: Sidebyside_mouseover.png

Placing player charts side by side each other makes it much easier to compare their stats than reading the numbers off the data sheet provided by the official NBA site. Using the scale inversion technique will allow easier tracking of year-by-year comparisons. Users can point to one section of a graph and the visualization will automatically supply corresponding information for the other player. This makes searching for information much faster than looking at two graphs without scale inversion. It also allows hiding numbers, which might be useful for reducing obscurity in the graphs. The user will not be fed data that he or she does not want to focus on.

In the future, I hope to use dynamic queries to allow users to choose among a list of players to compare. Expanding the numbers of players supported by this visualization will make it much more useful.


I plan to use Protovis for its ease in broadly sharing the visualization with online NBA fan communities. It will also be a fun opportunity to learn a little bit of Javascript as well.

Part 2

The visualization can be found [here: http://stephenchu.net/protovis-3.1/examples/a4-StephenChu3v11.html]

I used Protovis-d3.1js for development.

Zip download: File:A4-StephenChu.zip

(The source file is "A4-StephenChu_v11.html" and the data is contained in "kobelebron.js")

Part 3


I did not end up following my original storyboard to construct my final visualization. This is partly due to much frustration to get the two corresponding mouseover dots to show up correctly on both graphs. I checked the Protovis discussion boards later and realized someone had the same problem: [1] The bug has been fixed but has not been officially released yet.

In retrospect, I'm glad that I did not follow my original plan. After discussing the visualization with my roomate, an avid NBA fan himself, we both agreed that having one chart per player per category took too much space and wasn't effective. Looking between two graphs to compare, even with the mouseover dots, would be less efficient than looking at a single graph.

Instead of rendering the mouseover dot on pairs of graphs, I chose to combine the pairs of graphs - resulting in one graph per statistical category. I'm happier with this design because its more concise, the data is in one place, and its easier to compare trends. A dot appears over the closest datapoints to the mouse, and on the bottom of the graph, the exact numbers for Kobe and Lebron are displayed.

While constructing my visualization, I referred a lot to the Minnesota employment example as well as as the Scale Inversion tutorial: [2].

I believe that this visualization can serve a purpose in helping evaluate Kobe and Lebron against each other. I don't see enough information visualization techniques used in sports analysis. However, this visualization is limited, and would be much improved if users can choose to compare more players and multiple players at a single time, possibly through dynamic querying. I will continue working on extending this visualization.

I spent ~15+ hours (2 days) developing this visualization. Though it is quite simple, much of my time went into learning Javascript, reading Protovis documentation while going through examples, fixing errors and realizing that I did not know how to correctly implement my original storyboard, and formatting the graphs. It was a very slow start for me because I do not have much experience in this type of programming, but it was enjoyable so I plan to continue working on this assignment. I think Protovis is a great tool and with more documentation geared towards beginners, I imagine that many more people would start using the toolkit.

[add comment]
Personal tools