Project Plan

Owned by Caroline Ross
Last updated: Aug 18, 2011Version comment
3 min read

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.

http://carolineross.ca/visualizations/visualizations.html

https://github.com/care/Infusion-Visualizations

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.

Interactivity

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).

Pie

Bar

Tree Map

Unit

Network

Health Canada homepage http://www.hc-sc.gc.ca/index-eng.php

Choosing foods http://www.hc-sc.gc.ca/fn-an/food-guide-aliment/choose-choix/index-eng.php

Eating Well with Canada's Food Guide online http://www.hc-sc.gc.ca/fn-an/food-guide-aliment/index-eng.php

My Food Guide, an interactive tool to personalize Canada's Food Guide information, generates a pdf at the end.
http://www.hc-sc.gc.ca/fn-an/food-guide-aliment/myguide-monguide/index-eng.php