From CS 294-10 Visualization Sp10

Jump to: navigation, search


Description of Data Domain & Storyboard Interactive Visualization Techniques

Quick Summary of Visualization

Our visualization plots views versus ratings of youtube videos on a scatterplot, in response to dynamic queries provided by the user. Dots will represent each video, and a thumbnail+preview of the video will be shown on mouseover. The axes will be views on the x-axis and rating on the y-axis.

Our main objective is to provide a way to search for youtube videos and then provide a graphical way to make a decision on the video to choose to watch.

We plan to use Protovis, in conjunction with additional Javascript bindings, to implement this visualization.

Data Domain

We will pull information from the official Youtube data API: http://code.google.com/apis/youtube/2.0/developers_guide_protocol.html

Using this api, we should be able to extract the information we want and properly synthesize the data into our protovis visualization. We hope to build it and then place in on a website, since we are leveraging web technologies.

We are choosing to create a scatterplot with protovis points denoting a video. Mousing over the video will allow the user to see a small bubble popup that provides a quick thumbnail+preview of the video. It will also show the numerical value of the views and ratings. We will allow users to filter the data by searching for keywords. We think this mostly closely mimics how users find videos on Youtube.

Storyboard Interactive Visualization Techniques

Visualization Techniques

  • Quick Filtering: Immediately once a user begins typing in the search box the data points will begin to be filtered inside the visualization.
  • Quick Preview: When a user mouses over a data point, a preview of the video will popup allowing the user to see numerical values for the rating and number of views. Additionally the video will be displayed right there on the page to be viewed. If we find that we cannot implement the video, we will provide a link to youtube.
  • Relative Axes: While the axes will be encoding numbers, we are focusing on the relative position of videos to one another. So while the exact number of views is important, the relative position provides enough information to the viewer. This is also true for the overall rating.
  • Color: Color will help to distinguish between ratings of videos. The position of the videos will help to distinguish the relative rating within the stared range.

We think that these techniques are appropriate for the domain because they allow the user to search for videos more effectively. Users can find a video that has a good rating and large number of views (denoting that it is a good video hopefully). Videos could have a good rating, but from only a few raters and have only been viewed a few times. What we allow users to do if find a more accurate video for their search using graphical encodings of position. We think that using a scatterplot is the most effective because it will allow our axes to quickly encode rating and # of views. We contemplated a stacked area chart, but thought it didn't work well for isolating videos and properly placing them in order to help determine rating and # of views. By providing color is allows the user to quickly separate the different ratings (i.e all videos in a range of 4-4.99 will be blue).

General Overview of Interface

Begin Searching for a Video

Mousing Over a Video Point

Useful URL's for Reference

Final Writeup

Description of the Final Interactive Visualization

The information being graphed is Rating vs. Views. The size of the dots represents the relevance of the search query, or the order in which the video returned. When you mouse over a dot, you are presented with a thumbnail preview of the video, the rating of the video, and how many views it has received in a infobox on the right hand side of the screen. You can play the video by moving your mouse over the thumbnail preview or clicking on the dot.

The final visualization is implemented using a combination of protovis and javascript. We are pulling in information about videos from Youtube's API. Whenever a user inputs a key in the search box we are automatically updating the search to better refine the results the user is looking for. This creates a tighter coupling between the action of the user and the interactiveness of the visual. To accomodate the wildly different changing view numbers, we decided to use a linear scale, that updates dynamically to accomodate different views. For instance, if you are searching for a very specific video, there might only be a few views, but if you search for a cat video you will get upwards of many thousands of views.

Something that protovis did not allow us to integrate (unless we are able to do it Sunday night) was pan and zoom. They only just released a build that would allow us to pan and zoom on areas of the graph. However, due to time constraints this functionality may not get built. This would allow one to further explore areas of tightly clustered videos.

Explanation of the Changes from Storyboard to Implementation

The main difference between the storyboard and the implementation is our layout. We decided to spool a preview and a video into a separate infobox on the side of the visualization rather than as a popup. We thought this better allowed us to handle the problems of occlusion and allowing users to view the videos. If we used a popup it severely blocked other data points and if a user wants to watch a video, having the popup resize and play blocked more data points. As a result we thought it would be better to create a infobox that we could populate and update appropriately, without it interfering with data.

Another difference is the introduction of dot size. We decided to encode another piece of data by changing the dot size to represent relevancy, which helps to pick out videos that were returned first for the search query.

While we originally imagined color to help divide videos and encode their rating, we found that most videos either had a 4-5 rating, or a zero rating. Consequently, it became more important to provide a way to allow dots to distinguish themselves from one another, such that they did not simply overlap and disappear behind one another in the case of a tight coupling. To do this we used a low alpha value to help show when dots were overlapping. Additionally, when you mouse over a video its dot changes color to help pick out the dot.

We discovered an interesting observation that the visualization made apparent. To help validate this observation we did a little searching and found a techcrunch article (http://techcrunch.com/2009/09/22/youtube-comes-to-a-5-star-realization-its-ratings-are-useless/) about Youtube ratings and that they were either 5 or 0, meaning the rating system is mostly meaningless. Our visualization completely revealed this trend in that most video results fell into that exact pattern.

The main features that were kept from the storyboard were:

  • Dynamic Filter: keeps a tight coupling between the user's action and the visualization's change
  • Quick Preview: the user can see a thumbnail and immediately watch a video by clicking a dot or mousing over the thumbnail
  • Relative Axes: we dynamically scale the axes to create a position comparison between number of views, rather than providing an absolute number

The main features that were modified from the storyboard were:

  • Color: the main color of a dot is gray and we only used color to help denote the mouseover of a dot, by introducing opacity we were able to see the various dots, which proved more useful than coloring dots

Source Code of Implementation

The implementation can be viewed at this page: http://tc-garden.eecs.berkeley.edu/~akshay/294/index.html

Source code can be seen by viewing the source of the webpage. All code can be seen from there.

Breakdown of how Work was Split Between Partners

Part 1

  • Akshay - Proofread and added last tweaks to write-up. Found google API. Came up with initial idea for visualization.
  • Jeff - Created storyboards. Provided the art for the idea based on what Akshay described. Composed write-up.

Part 2

  • Akshay - Provided Youtube API integration. Linked the data into the scatterplot template. Created website page layout. Provided further visual tweaks.
  • Jeff - Used protovis to create the scatterplot template. Enabled dynamic scaling. Provided visual tweaks to website layout.

Commentary on the Development Process

We went about building the visualization in the following manner:

  1. Jeff created the visualization template using protovis. Akshay worked on Youtube API integration.
  2. Akshay plugged in the data to the visualization. Changed layout of webpage. Jeff added data to be displayed and worked on the scales of the visualization.
  3. Akshay and Jeff tweaked the overall layout and appearance of the visualization, adding additional features and refining

We found that step three took much longer than either of us anticipated. While initially building the visual and integrating the data took a smaller amount of time (approximately < 3 hours between the two of us). After the initial set-up, the more difficult part has been tweaking the page to our desire and building in more features as we wanted the visual to work better. Scaling proved to be extremely difficult, since using a log scale did move the points all within range it introduced more issues that we didn't anticipate. We have spent approximately between 4-6 hours tweaking the visualization and adding additional features.

[add comment]
Personal tools