From CS294-10 Visualization Sp11
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.
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.