From CS294-10 Visualization Sp11

Jump to: navigation, search


Data Domain and Storyboard

In my storyboarding phase, I was interested in making a star-field-like visualization that a user can interactively assign different attributes to the axes. One scenario I came up with was nutrient comparison of various foods. For example, for people who prefer to eat foods that are low-carb, and also low-fat, they would want to plot many foods with those two dimensions to see which fall in the lower left corner. Others, however, may be more interested in eating foods that are high in protein and low in fat, but not worried about carbs. Moreover, these preferences may change for one individual over time or even regularly. I imagined a tool that could produce visualizations while giving the user full control of such choices, similar to starfield visualizations like the HomeFinder example we had read about.


As the drawings above show, I thought it would be a good idea to provide hover and click feedbacks to provide the details of particular foods. I imagined a hover would reveal the name of the food (although that could be an axis as well) and clicking would roll out the full data in the form of a nutrition label. That made me think that a pie chart might be a better way to show this comprehensive picture than a bunch of text, which I draw out in the following image. Then I thought, why not let the users decide which they prefer (thus the radio buttons drawn below)? So, my idea was to provide a customizable visualization tool.


The data I chose for this assignment comes from the USDA National Nutrient Database for Standard Reference, which contains nutrient contents of more than 7,000 foods. One of the first things I realized with this assignment was the size really ""does"" matter. The enormous dataset presented challenges I had not expected. I often had my computer freeze up or lag, so I decided to work with just a subset of the data (this is called fooddata_short.js in my submission; I also include a much larger one (fooddata2.js), although even that had to be shortened from the original file.

Changes from Storyboard

My final implementation allows the user to pick from several choices for the x and y axis of the plot, which was one of my original goals. I ran into a some problems with proper rescaling of the axes, which I discuss in the README. I switched ideas a few times during this process. For example, I originally had the food name hover as a label next to the dot while the dot change color to red. However, I then switched to the Tipsy tooltip tool because it provides a cleaner and quicker way to view the details. Also, since the task focuses on comparative analysis among different foods, and the data already presents the nutrients normalized to 100g of each food type, I thought providing serving size selection would only cause more confusion or misinterpretations. One thing that got left out was the ability to pick between pie chart and table view of the detailed information for each food. Unfortunately, I just wasn't able to get around to implementing this part.

Development Comments

I wanted to try out Protovis for this assignment, which meant I also had to learn javascript. At first, I was pleased by how easy it was to get started with Protovis. A fair chunk of my time was spent going through many of their great examples and getting a feel for the framework. As I had expected from reading paper and hearing the lectures, I enjoyed working with a toolkit that struck a balance between freedom and ease of use. The most challenging part for me, however, was trying to work with (a huge amount of) raw data. I also got a chance to try Google Refine, which I think is a great tool. The implementation process was rougher than I had expected, primarily because I had not expected to meet such difficulty in dealing with the data. Swapping dimensions in and out of the system was a little more complicated than I had thought.

I probably spent about 20 hours on this project. I would say about 5 of it was spent on browsing and modifying the data, and the remaining hours were spent learning/coding Protovis. Javascript was a little harder to debug and that took more time than I had anticipated. It would have been nice to have integrated some of the ideas that got left out at the end.


File:As3 sally ahn.zip

Update (added after deadline): I fixed the scaling problem and browser compatibility bug (it was only working in Firefox) and added dot highlighting. The uploaded source is untouched from the submission before the deadline, but the updated version can be viewed here.

[add comment]
Personal tools