Skip to end of metadata
Go to start of metadata

Accessible Visualizations Using HTML5 Canvas, processing.js and Fluid Infusion

The aim of this project is to design inclusive data representations using HTML5 canvas and Fluid Infusion to create visual representations of data sets to address the diversity present in cognitive principles of human interpretation and understanding.  At it's core, this project will utilize key components of the Infusion framework, including inversion of control, the renderer, change applier, and FSS. To implement visualizations in HTML5 canvas, processing.js, a javascript framework for rendering processing, a visual programming language based on java, will be utilized. A QA mechanism will be built into the code which will include unit tests written along side the code. Focus will be on designing with enough flexibility to be able to function in an improved capacity, incorporating accessible formats using these applications.

User Interface

Click on the thumbnail below to see a preview of the user interface.

The user interface will feature visual representations of data sets, optimized for accessibility. The interface will provide data input entry to produce user specific visual representations.

The data used in the application is from Canada's Food Guide. The application will be able to generate a chart showing the user's diet in comparison to the recommended daily intake. It is necessary for the user to input data to receive a personalized comparison. The user will be able to add the foods they've consumed in a day as data. The visual element portrays the user's consumption compared to government recommended amounts. Another aspect of the application could be to make suggestions of healthy foods required to make up components of the food groups lacking in the user's diet.


Users can augment the visual display of data. The visual display will be responsive to mouse events. Close proximity will result in jiggles and shudders in nearby areas of the visualization. Hovering over sections will reveal details. More advanced interactions will involve the user tweeking the visualization with the mouse, dragging it to change view variables such as perspective and orientation.

A module of buttons on the left side of the visualization will allow the user to choose to view a different type of visualizations of the data, for example:

- bar
- tree map
- network
- pie
- units

Visualization Defaults

When a user first encounters the application, the default view will be using data from the Canada's Food Guide recommended daily intake for the average person. The following basic visualizations are possible default views for data representations. As the user inputs more personalized data, the visualization will become more complex (see fig. 1b).



Tree Map



Health Canada homepage

Choosing foods

Eating Well with Canada's Food Guide online

My Food Guide, an interactive tool to personalize Canada's Food Guide information, generates a pdf at the end.