From CS294-10 Visualization Sp11
For this assignment, I wanted to implement dynamic querying and brushing and linking. These are simple but very useful interactive visualization techniques. In class, we saw an example of brushing and linking applied to baseball data. I thought it would be fun to create something similar for basketball data, especially since popular basketball sites like ESPN and FOX Sports visualize such data in mere static tables.
With regard to this domain specifically, I was interested in visualizing where shots were taken on the basketball court. Basketball data are commonly in the form of aggregate statistics, but fortunately I found this play-by-play data, nicely compiled by a basketball data enthusiast. I used the data from a single game between the Lakers and the Celtics, here. To create my visualization, I needed to draw a basketball court on which to visualize the data. I used this diagram to get the measurements right.
The main view of the visualization is shown below. The top portion is a display of one half of a basketball court with shots marked according to their location. Shots that were made are marked with circles, those missed marked with crosses. Shots by the Lakers are colored dark purple, those by the Celtics colored dark green. A legend on the right displays this information. I chose to plot the shots taken by both teams on the same half court rather than on two separate halves to facilitate comparison between the teams.
Changes Between Storyboard and Final Implementation
Final Interactive Visualization
Source code here. File:Mattcanvis3.zip