Daily Food Intake Visualizer

An application that graphs the quantity of servings in the four food groups; Vegetables and Fruit, Grain Products, Milk and Alternatives, and Meat and Legumes, as set out by Canada's Food Guide.

Accessible Visualizations using Fluid Infusion, HTML5 Canvas and Processing.js

A visualizer that displays graphical representations of selected data from user input. The aim in designing the data representations is accessibility, to address the diversity present in cognitive principles of human interpretation and understanding. This is achieved by having multiple graphics; a pie chart, bar graph and network graph, as well as text, to allow users a variety of ways to view the information. For example, it is possible to see how the ratios of the different food groups are similar across age groups in the pie chart, in contrast to the bar graph which more aptly illustrates the difference in quantity of food servings consumed by different age groups.

The application employs key components of the Fluid Infusion framework; the renderer, change applier, and FSS. Focus is on maintaining flexibility in the design to be able to function in an improved capacity, incorporating accessible formats using these tools. Infusion provides the interface to produce the visual representations using data input. Processing.js and HTML5 Canvas are used to create and display custom graphical representations of data.

The application is online at http://carolineross.ca/foodguide/.

As a contribution to the open source community, the code is available for use on github. This project is mentored by the Inclusive Design Institute as part of Google Summer of Code 2011.

---