1. HTML5 Canvas
DATA VISUALISATION
Antonio Fabregat Mundo
Hinxton Services Forum
May 30, 2013

2. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Overview
• Aim
• Web technologies for rich graphics creation
• Dealing with the data
• CANVASing the data
• Interactivity in Canvas
• Animation in Canvas
• Some tips
• Examples

3. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Aim
• Data visualisation
• Interactivity
• Animation

4. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Web technologies for rich graphics creation
CANVAS SVG
High performance 2D surface for drawing. Resolution independence.
Constant performance because everything is a pixel.
Performance only degrades when the image resolution increases.
SVG has very good support for animations.
Elements can be animated using a declarative syntax, or via JavaScript.
Resulting image into the Canvas can be saved as PNG or JPEG. Full control over each element using the SVG DOM API in JavaScript.
Best suited for generating raster graphics, editing of images, and operations
requiring pixel-level manipulation.
Accessibility to the SVG objects can be much better than that of canvas elements.
CANVAS SVG
No DOM nodes for the represented objects. Slow rendering when document complexity increases. A use case is a large dataset to
be represented as an image.
Animation to be implemented manually. SVG might not be suited by itself for applications like games. Perhaps the best choice
would be a Canvas + SVG combination
Poor text rendering capabilities. Difficulties exporting the resulting image.
Advantages
Disadvantages

5. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Web technologies for rich graphics creation
• Canvas
• Interactive image editing
• Generating raster graphics
• Image analysis
• Rendering game graphics, such
as sprites and backgrounds
• SVG
• Resolution-independent Web
application user interfaces
• Highly interactive animated user
interfaces
• Data charts and plots
• Vector image editing
Each technology has its own uses
It is not like one can abandon Canvas in favor of SVG, or vice-versa.
Which one to pick?

6. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Dealing with the data
Data acquisition
Web services providing raw data (XML or JSON format)

7. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Dealing with the data
Splitting the view from the model
MV* keeps data and representation separated

8. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
CANVASing the data
Client side image generation
Objects in the data model are drawn into the canvas

9. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
CANVASing the data
Graphical projection
Calculating where to draw every object
Depends on the available area and number of objects

10. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
CANVASing the data
Mouse position
Bijective function to determine hovered objects

11. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Interactivity in Canvas
• Interactivity is not animation
• Refreshing canvas when mouse over
• How to improve behavior?
• Render screen differences only
• Back Buffer (redraw a gradient à 5 times faster)
• Layered canvases
• Important:
Refreshing more than 24 times per second?

12. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Animation in Canvas
Full redrawing
Every object drawer defines how to proceed for a certain percentage

13. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Some tips
Always update the model
Actions over the canvas directly modify the model

14. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Some tips
Precalculate as much as possible
Calculations that can be done once have to be moved out from the drawing methods

15. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Some tips
Discrete time slots
Response improvement

16. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Some tips
Refreshing only when needed
Checking basic user actions before refreshing saves time

17. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Examples
PRIDE - Protein coverage viewer
PRIDE - Sequence viewer

18. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
METABOLIGHTS – Spectrum viewer
Examples
PRIDE – Spectrum viewer

19. Data Visualisation using HTML5 Canvas
Hinxton Services Forum
May 30, 2013
Examples
REACTOME – Pathway Diagram

20. Thank you! J
fabregat@ebi.ac.uk