Ryan Sandor Richards: High performance visualisations using canvas

Orde Saunders' avatarPublished: by Orde Saunders

Ryan Sandor Richards (@rasandor) was talking about high performance visualisations with canvas at Scotland.js, these are my notes from his talk.

Plots (graphs) are the kind of visualisations that users most understand. Time series plots have the time domain on the X-axis, it will always be a discrete axis, not continuous.

Building static plots:

  1. Initialisations- make a positioned and sized container on the page. Add a canvas and an SVG (SVG for the elements that don't move) then overlay the canvas over the SVG.
  2. Handling data - data is often not structured in a way that is useful for plotting. Often best thought of as layers that have sets of values. Prepare the layers to annotate the data so you can render easily.
  3. Rendering data - array of points with data, iterate over and plot each point.

Real time plots

Handling incoming data as you get it. Latency is variable :-( Put items into a queue and then read this back from the front end code to make sure you can poll it at a set frequency. Render the next point out of the visisble area then animate it in before chopping the old data. Stop the animation if there's no data in the queue.

Don't re-render the the whole graph on each tick, we want to only render the new data. Raster rendering is fairly fast, image copy operations are really fast. Use a paint canvas that only lives in memory, set this this to be the size of your graph plus one item. You can then copy the visible area you need from this canvas to the on screen canvas. Changing the size of the paint canvas is also an image copy.

Epoch: http://github.com/fastly/epoch Does a lot of this work for you :-)