Accessible Visualizations Using HTML5 Canvas, processing.js and Fluid Infusion
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:
- tree map
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).
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.