Play With Your Food

Made by Jacob Slone

An interactive visualization for nutritional information.

Created: September 14th, 2014


I absolutely love food. I love to cook, and I love to eat. Everybody has to eat, but most of us are not experts in nutrition. Creating a healthy, balanced diet is extremely difficult and tedious, and most don't want to spend hours crunching numbers from the nutritional facts to plan out our dinner. However, I think there is a way to leverage our ability to solve visual puzzles to make this task much easier.


By taking the percent daily values for essential nutrients and displaying it as a visual block puzzle in the likeness of Tetris, I hope to make the challenge of creating a balanced diet easier, and possibly even fun. The blocks really help to embody the idea of fulfilling nutrition as they fill towards the daily recommended values (Dourish), and they embrace the complexity of the data in not altering the puzzle but simply changing how it presented (Viégas & Wattenberg). Percent daily value is used for simplicity and to give the user a very clear visual cue as to how close they are to meeting the daily recommended values. This also helps create the 'forceful point of view', as the use of percentage will make the end user believe that anything other than 100% is not good enough.

The visualization works as follows: users select ingredients from the right. Ingredients which are selected have their nutritional content stacked on top of one another, creating blocks which rise towards the daily recommended intake, and then toward the maximum recommended daily intake once the recommended quantity is surpassed. The goal of the user is to find the right balance of food they plan to consume that day to maximize the number of nutrients at the recommended intake while keeping everything below the maximum recommended intake. Since the visualization is interactive it does not need to remain static, and as such it is possible for entire sections to become collapsable. If a section is collapsed, the visualization will instead depict the average of each element in the section, and new ingredients will only depict how they will change that average. This interaction essentially makes creating a balanced diet an interactive visual puzzle since people are generally much better with visual puzzles.

The data for daily recommended values will come from the USDA, as they seems to have the most complete set of data, and the food visualized will be up to the end user. The end user should be able to select nutritional information from a wide variety of simple ingredients, specify the amount of each ingredient, and create and visualize full meals or a series of meals to gain a better grasp of how well they are nourishing themselves.


The interactivity of the visualization allows for this massive data set to be represented with a simple bar graph, as well as allowing the end user a variety of options for the amount of detail they wish to view. Not only does this allow for high data density, but it actually gives the user control over the data density (Tufte).

Making the visualization interactive has a second purpose. Since the bar and blocks already embody the idea of fulfilling ones nutritional requirements, the interactivity additionally forces the end user to become an active participant in their own nutrition, thereby encouraging them to actually act on the visualization (Galloway).

The feedback from class was very helpful, and led to the ability to collapse sets of data since the complete data set isn't entirely necessary at all times. Displaying potential ingredients by rendering them translucently was also a suggestion from class, which is much easier to see than displaying it in the same way Tetris displays upcoming blocks.

Share this Project


An interactive visualization for nutritional information.