From CS 294-10 Visualization Sp10

Jump to: navigation, search


Data Domain

Nutritional Values of Common Foods

  • Users can input their gender and weight to see how much nutrition they need daily. This will be displayed as a series of calibrated stacks.
  • Users can enter food items which will populate a legend and fill up the relevant stacks according to the nutritional value of the food item. The legend is interactive – items can be dynamically dropped into or dragged out. Multiple food items can be added.
  • Clicking on an empty stack shows suggestions of food items that can fill up the stack
  • Excesses are shown as overflows on the stacks

Visualization Technique

We chose to visualize our data in this stacked bar chart manner because we feel it shows the data in the most effective way. Because the information shows recommended daily allowances of various nutrients, minerals and vitamins, we decided it was a good idea to show how each different food played a part. Filling up a bar for each different food shows how big a role that food plays for different nutrients.


Page 1

Page 1

  • This is the initial page where user enters weight and gender

Page 2

Page 2

  • After the user enters “100 lbs” and “female”, the visualization animates to show stacks with the total required amounts of daily nutrition
  • The user enters “apple” and hits “Go”

Page 3

Page 3

  • The visualization animates as it fills up the stacks with the values corresponding to the entry (here, “apples”)

Page 4

Page 4

  • Clicking on an empty space in one of the stacks shows suggestions of items that can fill up the stack (in descending order of value)

Page 5

Page 5

  • Since milk has a good calcium concentration, the user adds milk to the dataset. The legend is updated with 2 items which are colored differently in order to make their respective contributions to the stacks more explicit.


We will be using Protovis to implement our visualization

Final Writeup

Final Interactive Visualization

"You are what you eat" is an interactive visualization that allows users to see the contribution of food items towards daily requirements of basic nutrients. Input parameters from the user include gender, weight and activity level. Using these parameters, the tool calculates the daily needs of the user. This information is displayed as 5 stacks, one each for Calories, Water, Carbohydrates, Proteins and Fats. The user can then enter a food item in the search bar and upon pushing "Go", the visualization will change in-place showing the contribution of the food item towards each of the 5 stacks.

Hovering over the bar shows the value in a tooltip. Hovering also has a highlighting effect. Clicking the empty part of the stack shows some suggestions of food items that can potentially fill up the white space. The suggestions are displayed in a textbox on the left pane. Clicking on a filled part shows the benefits of the particular nutrient. If the user has exceeded the RDI (Recommended Daily Intake) value, the stack turns red indicating an abnormality. Clicking on a red stack shows the harmful effects of an overdose of the respective mineral. The top of the stacks show a percentage value denoting the ratio of the total requirement fulfilled so far.

Changes Between Storyboard and Implementation

We made substantial changes from the storyboard as we progressed in our implementation.

The following are the main changes we made:

  • There is a single user input form that takes in gender, weight, activity level, and the search term (a fruit) at one time instead of two different entry forms. We decided to do it this way because it is easier for the user to complete all the input in one form. In addition, the implementation for two different forms was more difficult than we first thought because it required storing values from one form in the other.
  • We provide information for only one row of nutrient stacks instead of the three original rows we had planned. The reason for this was because the implementation for three rows was time-consuming, and didn't add much interactive value, so we decided the visualization would still be very effective with just one row.
  • Some of the interaction details were changed. When a user clicks any empty space in a stack, the left-side pane will be populated with suggestions of how the user can fill up that particular stack. In addition, if the user clicks on any of the filled space in a stack, the left-side pane will contain the benefits of that particular stack. Lastly, if the user clicks on an over-flowed stack, the left-side pain will be populated with the reasons why an overflow of that particular nutrient is harmful.
  • We decided to allow only a single search entry at a time, instead of allowing the user to see an aggregate of different fruits. The reason for this was because the implementation was too difficult and time-consuming without adding any interactive value.
  • The dataset is limited to fruit as of now because the data is very hard to obtain. We decided to use a theme of fruit because they contain a good variety of the nutrients that we display.

Source Code

You may view our visualization here: You Are What You Eat

  • Note: when opening this in Firefox, an alert dialog pops up, but once it is closed, it doesn't interfere with the visualization

You may also choose to download the source code here: File:Yawye.zip

  • In order to run this source code
    • download the Yawye.zip file above
    • unzip the contents into a folder
    • double-click to launch the "yawye.html" code in a browser ("yawye.html" should be in the main Yawye.zip folder)

Possible data points

  • apple, orange, banana, pear, apricot, peach, plum, cherry, strawberry, grapes, grapefruit, kiwi, papaya, watermelon, pomegranate, lemon, mango, pineapple, guava, nectarine
  • skew - this (fake) data point (when searched as a "female" of "100 lbs" with a "sedentary" lifestyle) will allow the user to see what happens if any of the nutrients overflow.

Sources for suggestions/benefits

  • Benefits of water [1]
  • Benefits of water [2]
  • Benefits of carbs [3]
  • Excess carbs [4]
  • Benefits of calories, fats, proteins [5]
  • Excess proteins [6]

Sources for RDAs

  • Calories [7]
    • The source code from this page was used to dynamically calculate recommended calorie count in our code based on the user input.
  • Water [8]
  • Carbs, proteins, fat [9]

Sources for nutritional data

  • National Agriculture Library [10]

Work Breakdown

Part 1

  • Shimul: write up
  • Prahalika: storyboard drawing

Part 2

  • Shimul: Protovis implementation and interaction, benefits/suggestion data, write up
  • Prahalika: HTML implementation, integration of implementations, fruit data, write up

Implementation Commentary

Implementing our idea in Protovis turned out to be very interesting and a bit more difficult than we first imagined. In total, we spent around 15 hours coding up all the parts of our project. There were a couple major reasons the implementation was difficult:

  • The data
    • Finding the data we needed was a lot more difficult than we thought. First, using the user input to figure out the recommended daily allowances of the nutrients was hard because there are no standards for many of the nutrients. The way we were able to solve this was by calculating the number of calories needed based on user input, and then calculating the amount of each nutrient needed as a percentage of the recommended calories (sources listed above).
    • Getting the nutritional data for the actual food items was tedious. Using the National Agricultural Library website was our first choice, but that site was down for maintenance for the greater part of when we needed it. We did end up using that site, but it is very time consuming to manually look up the different food items to get the nutritional information. We used Wikipedia as a secondary source (Wikipedia articles on fruits uses pulls data from this website) since it provided the same information in a more readable format. This led to our limiting of the data scope to just fruits.
  • Protovis
    • While Protovis is a good tool to use for interactive visualizations, it is very limited because it is still a pretty new software. Because of this, we felt there were things we weren't able to do, or do easily, in order to make the interactive components of our visualization better. Some of the things we intended to do but couldn't include:
      • A pop-up dialog box on a mouse click event
      • Drag and drop/zoom features
      • Animations between static images

[add comment]
Personal tools