HTML5 CanvasDATA VISUALISATIONAntonio Fabregat MundoHinxton Services ForumMay 30, 2013
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Overview•  Aim•  Web technologies for rich graphics...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Aim•  Data visualisation•  Interactivity•  Animation
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Web technologies for rich graphics creationCANVAS S...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Web technologies for rich graphics creation•  Canva...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Dealing with the dataData acquisitionWeb services p...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Dealing with the dataSplitting the view from the mo...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013CANVASing the dataClient side image generationObjec...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013CANVASing the dataGraphical projectionCalculating w...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013CANVASing the dataMouse positionBijective function ...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Interactivity in Canvas•  Interactivity is not anim...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Animation in CanvasFull redrawingEvery object drawe...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Some tipsAlways update the modelActions over the ca...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Some tipsPrecalculate as much as possibleCalculatio...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Some tipsDiscrete time slotsResponse improvement
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Some tipsRefreshing only when neededChecking basic ...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013ExamplesPRIDE - Protein coverage viewerPRIDE - Sequ...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013METABOLIGHTS – Spectrum viewerExamplesPRIDE – Spect...
Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013ExamplesREACTOME – Pathway Diagram
Thank you! Jfabregat@ebi.ac.uk
Upcoming SlideShare
Loading in …5
×

Data Visualisation using HTML5 Canvas

2,446 views

Published on

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,446
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
6
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Data Visualisation using HTML5 Canvas

  1. 1. HTML5 CanvasDATA VISUALISATIONAntonio Fabregat MundoHinxton Services ForumMay 30, 2013
  2. 2. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Overview•  Aim•  Web technologies for rich graphics creation•  Dealing with the data•  CANVASing the data•  Interactivity in Canvas•  Animation in Canvas•  Some tips•  Examples
  3. 3. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Aim•  Data visualisation•  Interactivity•  Animation
  4. 4. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Web technologies for rich graphics creationCANVAS SVGHigh 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 operationsrequiring pixel-level manipulation.Accessibility to the SVG objects can be much better than that of canvas elements.CANVAS SVGNo DOM nodes for the represented objects. Slow rendering when document complexity increases. A use case is a large dataset tobe represented as an image.Animation to be implemented manually. SVG might not be suited by itself for applications like games. Perhaps the best choicewould be a Canvas + SVG combinationPoor text rendering capabilities. Difficulties exporting the resulting image.AdvantagesDisadvantages
  5. 5. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Web technologies for rich graphics creation•  Canvas•  Interactive image editing•  Generating raster graphics•  Image analysis•  Rendering game graphics, suchas sprites and backgrounds•  SVG•  Resolution-independent Webapplication user interfaces•  Highly interactive animated userinterfaces•  Data charts and plots•  Vector image editingEach technology has its own usesIt is not like one can abandon Canvas in favor of SVG, or vice-versa.Which one to pick?
  6. 6. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Dealing with the dataData acquisitionWeb services providing raw data (XML or JSON format)
  7. 7. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Dealing with the dataSplitting the view from the modelMV* keeps data and representation separated
  8. 8. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013CANVASing the dataClient side image generationObjects in the data model are drawn into the canvas
  9. 9. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013CANVASing the dataGraphical projectionCalculating where to draw every objectDepends on the available area and number of objects
  10. 10. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013CANVASing the dataMouse positionBijective function to determine hovered objects
  11. 11. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Interactivity 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. 12. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Animation in CanvasFull redrawingEvery object drawer defines how to proceed for a certain percentage
  13. 13. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Some tipsAlways update the modelActions over the canvas directly modify the model
  14. 14. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Some tipsPrecalculate as much as possibleCalculations that can be done once have to be moved out from the drawing methods
  15. 15. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Some tipsDiscrete time slotsResponse improvement
  16. 16. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013Some tipsRefreshing only when neededChecking basic user actions before refreshing saves time
  17. 17. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013ExamplesPRIDE - Protein coverage viewerPRIDE - Sequence viewer
  18. 18. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013METABOLIGHTS – Spectrum viewerExamplesPRIDE – Spectrum viewer
  19. 19. Data Visualisation using HTML5 CanvasHinxton Services ForumMay 30, 2013ExamplesREACTOME – Pathway Diagram
  20. 20. Thank you! Jfabregat@ebi.ac.uk

×