Data Visualisation using HTML5 Canvas

Data Visualisation using HTML5 Canvas

• 1.
  HTML5 Canvas DATA VISUALISATION AntonioFabregat Mundo Hinxton Services Forum May 30, 2013
• 2.
  Data Visualisation usingHTML5 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 usingHTML5 Canvas Hinxton Services Forum May 30, 2013 Aim •  Data visualisation •  Interactivity •  Animation
• 4.
  Data Visualisation usingHTML5 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 usingHTML5 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 usingHTML5 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 usingHTML5 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 usingHTML5 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 usingHTML5 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 usingHTML5 Canvas Hinxton Services Forum May 30, 2013 CANVASing the data Mouse position Bijective function to determine hovered objects
• 11.
  Data Visualisation usingHTML5 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 usingHTML5 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 usingHTML5 Canvas Hinxton Services Forum May 30, 2013 Some tips Always update the model Actions over the canvas directly modify the model
• 14.
  Data Visualisation usingHTML5 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 usingHTML5 Canvas Hinxton Services Forum May 30, 2013 Some tips Discrete time slots Response improvement
• 16.
  Data Visualisation usingHTML5 Canvas Hinxton Services Forum May 30, 2013 Some tips Refreshing only when needed Checking basic user actions before refreshing saves time
• 17.
  Data Visualisation usingHTML5 Canvas Hinxton Services Forum May 30, 2013 Examples PRIDE - Protein coverage viewer PRIDE - Sequence viewer
• 18.
  Data Visualisation usingHTML5 Canvas Hinxton Services Forum May 30, 2013 METABOLIGHTS – Spectrum viewer Examples PRIDE – Spectrum viewer
• 19.
  Data Visualisation usingHTML5 Canvas Hinxton Services Forum May 30, 2013 Examples REACTOME – Pathway Diagram
• 20.
  Thank you! J fabregat@ebi.ac.uk