This website is an interactive visualization originally designed while taking CS498: Data Visualization at the University of Illinois as a part of the Masters of Computer Science - Data Science program during the Summer 2017 semester.
It uses a martini glass hybrid narrative structure to convey its intended message. This is accomplished by providing a tutorial to walk the user through an initial example visualization. The tutorial walks through all the major elements of the interactive visualization individually. Once the user completes or exits the tutorial, they are free to explore the dataset as they wish in the confines of the visualation. A cookie is stored so that the tutorial is not automatically triggered when visiting the website again. The cookie expires at the end of the browser session.
The scenes of the visualization are largely focused on the bubble chart. The bubble chart is composed of food items for a given food and nutrional category (e.g. Beef & Pork and Calories, respectfully). Each bubble corresponds to a given food item (e.g. the Big Mac) with the name of that food item placed in a text element over the bubble. The area of the circle is directly proportional to the nutritional value (e.g. Calories) of that food item. The color of each circle is purely aesthetic to help the user distinguish between the bubbles. The bubble chart is located to the right of the user controls on a desktop web browser. The controls on the left are interacted with by the user to change the food or nutritional category. The bubble chart then transitions to represent any new choices. This allows the same bubble chart template to be used to display any arbitrary selections. Finally if appropriate, an additional list is displayed underneath the controls to show any food items that do not have any significant nutrition in the selected category (e.g. water would have no Calories). Both bubbles and the list of items with no significant nutritional value in the selected category provide an option to bring up a full nutritional label for the selected item. This nutritional label template is also consistently used for every single food item.
Annotations are used carefully in the visualization. As previously mentioned, each bubble in the bubble chart has text overlayed to indicate the name of the food item that it represents. The bubbles can be arbitrarily sized, so it was important to "clip" the text so that it does not spill outside of the circle. If it was not clipped, the text could potentially cover a different circle and would generally lead to an over-cluttered visualization. Unfortunately, this also means that an arbitraty amount of the text could be cut off preventing the user from being able to read it. To remedy this, each food item representation is provided with a tooltip that provides the full name of the item as well as the numerical value of the food item's nutrition in the given nutritional category if hovered over. Lastly, it was importantant for the annotations in the nutritional label template to match real world nutritional labels so that the user would immediately recognize it at such.
There are two parameters that can be set by the user. That is, the controls mentioned before can set the food category and the nutritional category for a total of 150 different combinations and, by extension, potential bubble charts.
The visualization also includes a variety of triggers. There are previous, next, and close actions that can be triggered by on-screen buttons and keyboard events through the tutorial when appropriate. The left and right keyboard arrows map to the previous and next actions respectfully, and the on-screen buttons are located in the tutorial modal. There is also a button near the top of the controls on the left called "Run the Tutorial" which can manually trigger the tutorial to run again. Next, when the user selects a new food category or nutrition category in their respective dropdown menus, the bubble chart is triggered and then transitions to match the new selection. Lastly, each food item whether represented by a bubble or list item triggers a tooltip with the previously mentioned annotations when hovered over. Likewise when clicked, the nutritional label template is triggered and populated for that food item.
