A3-MatthewCan

From CS294-10 Visualization Sp11

(Difference between revisions)
Jump to: navigation, search
(Storyboards)
(Development Process)
 
(7 intermediate revisions not shown)
Line 5: Line 5:
== Storyboards ==
== Storyboards ==
-
The main view of the visualization is shown below. The top portion is a display of one half of a basketball court with  
+
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. The bottom portion of the display is a scatterplot of the shots along game time (minutes played) and distance from the basket. It shows how shots are distributed over the course of the game.
[[Image:mattcanstory1.png|400px|center]]
[[Image:mattcanstory1.png|400px|center]]
-
Test text
+
The storyboard below demonstrates the dynamic query technique. The checkboxes near the legend are used to modify the data displayed in the visualization. In this example, a checkbox was deselected to omit missed shots (the crosses) from the visualization. There is an error in this storyboard, in that the bottom display should contain some purple marks.
 +
 
[[Image:mattcanstory2.png|400px|center]]
[[Image:mattcanstory2.png|400px|center]]
 +
 +
 +
This storyboard demonstrates brushing and linking. First, note that shots by the Lakers have been made invisible by the deselection. The user has brushed a selection on the right half of the court. Marks that fall within the selection are colored regularly. Those that fall outside are grayed out. This happens on both the court display and the plot below.
 +
[[Image:mattcanstory3.png|400px|center]]
[[Image:mattcanstory3.png|400px|center]]
 +
 +
 +
The next example shows a user brushing a selection near the top of the scatter plot, then dragging that selection down. The selection on the left highlights shots that are far from the basket. This is reflected on the court display by highlighting points along the 3-point line. As the user drags the selection down, points inside the key are highlighted. Note that points outside the selection are grayed out in the same way for both teams.
 +
[[Image:mattcanstory4.png|600px|center]]
[[Image:mattcanstory4.png|600px|center]]
== Changes Between Storyboard and Final Implementation ==
== Changes Between Storyboard and Final Implementation ==
 +
There were no major changes from storyboard to implementation. One challenge though was drawing the basketball court display. Since it was tedious to draw all of the reference lines, I briefly considered only drawing the rectangular border. But I abandoned that idea because the marks lack meaning when not placed in the context of the 3-point line and the key (the center rectangle).
 +
 +
Another minor change was to use the alpha channel to color the marks. The data I used for court position was integer valued, so some shots have the same position and their corresponding marks overlap. In the final visualization, it's apparent when this happens.
== Final Interactive Visualization ==
== Final Interactive Visualization ==
-
[[Image:mattcanfinal1.png]]
+
Below are screen shots of the final visualization. I created it using Protovis. The user can issue dynamic queries by selecting/deselecting the check boxes. Pressing the mouse button and dragging invokes brushing and linking. The user can move the brushed selection by dragging the transparent gray panel. It works just as advertised in the storyboards.
-
[[Image:mattcanfinal2.png]]
+
 
 +
 
 +
[[Image:mattcanfinal1.png|300px]]
 +
[[Image:mattcanfinal2.png|300px]]
== Development Process ==
== Development Process ==
 +
I made this visualization using Protovis, not particularly because it's the right tool for the task, but rather because I've wanted to learn Protovis for some time now, and this assignment seemed like the right opportunity.
 +
 +
This assignment took me almost 20 hours. I spent around 4 hours looking for good data, cleaning it up, and converting it to the JSON format. I used the Data Wrangler tool to help me with this part of the assignment. I then spent about 2 hours brainstorming and storyboarding the visualization. The rest of my time I spent implementing the visualization in Protovis. Here are some thoughts on why it took so long:
 +
 +
* '''Learning Protovis''' - Most of the time spent on the implementation was actually time spent learning the Protovis language. In hindsight, a lot of this was unnecessary. If I solely wanted to crank out a visualization as quickly as possible, I would have copied the examples and modified them as appropriate. But, I wanted to understand how Protovis works, so I spent significant time reading the documentation.
 +
* '''Debugging Javascript''' - I was frustrated at how much Javascript debugging I had to do because my code would fail without error messages. Often this was caused by things like stray semicolons or undefined variables.
== Source Code ==
== Source Code ==
Source code here. [[File:mattcanvis3.zip]]
Source code here. [[File:mattcanvis3.zip]]

Latest revision as of 08:48, 12 March 2011

Contents

Data Domain

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.

Storyboards

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. The bottom portion of the display is a scatterplot of the shots along game time (minutes played) and distance from the basket. It shows how shots are distributed over the course of the game.

Mattcanstory1.png


The storyboard below demonstrates the dynamic query technique. The checkboxes near the legend are used to modify the data displayed in the visualization. In this example, a checkbox was deselected to omit missed shots (the crosses) from the visualization. There is an error in this storyboard, in that the bottom display should contain some purple marks.

Mattcanstory2.png


This storyboard demonstrates brushing and linking. First, note that shots by the Lakers have been made invisible by the deselection. The user has brushed a selection on the right half of the court. Marks that fall within the selection are colored regularly. Those that fall outside are grayed out. This happens on both the court display and the plot below.

Mattcanstory3.png


The next example shows a user brushing a selection near the top of the scatter plot, then dragging that selection down. The selection on the left highlights shots that are far from the basket. This is reflected on the court display by highlighting points along the 3-point line. As the user drags the selection down, points inside the key are highlighted. Note that points outside the selection are grayed out in the same way for both teams.

Mattcanstory4.png

Changes Between Storyboard and Final Implementation

There were no major changes from storyboard to implementation. One challenge though was drawing the basketball court display. Since it was tedious to draw all of the reference lines, I briefly considered only drawing the rectangular border. But I abandoned that idea because the marks lack meaning when not placed in the context of the 3-point line and the key (the center rectangle).

Another minor change was to use the alpha channel to color the marks. The data I used for court position was integer valued, so some shots have the same position and their corresponding marks overlap. In the final visualization, it's apparent when this happens.

Final Interactive Visualization

Below are screen shots of the final visualization. I created it using Protovis. The user can issue dynamic queries by selecting/deselecting the check boxes. Pressing the mouse button and dragging invokes brushing and linking. The user can move the brushed selection by dragging the transparent gray panel. It works just as advertised in the storyboards.


Mattcanfinal1.png Mattcanfinal2.png

Development Process

I made this visualization using Protovis, not particularly because it's the right tool for the task, but rather because I've wanted to learn Protovis for some time now, and this assignment seemed like the right opportunity.

This assignment took me almost 20 hours. I spent around 4 hours looking for good data, cleaning it up, and converting it to the JSON format. I used the Data Wrangler tool to help me with this part of the assignment. I then spent about 2 hours brainstorming and storyboarding the visualization. The rest of my time I spent implementing the visualization in Protovis. Here are some thoughts on why it took so long:

  • Learning Protovis - Most of the time spent on the implementation was actually time spent learning the Protovis language. In hindsight, a lot of this was unnecessary. If I solely wanted to crank out a visualization as quickly as possible, I would have copied the examples and modified them as appropriate. But, I wanted to understand how Protovis works, so I spent significant time reading the documentation.
  • Debugging Javascript - I was frustrated at how much Javascript debugging I had to do because my code would fail without error messages. Often this was caused by things like stray semicolons or undefined variables.

Source Code

Source code here. File:Mattcanvis3.zip

Personal tools