Drawing with HTML5 canvas: New ways of visualisations

HTML5 now uses the element <canvas> which allows the instant creation of SVG-like graphics. The contents of the <canvas> element may be manipulated by javascript at any time. This implies a whole set of new opportunities.

General explanations, tutorials and definitions for <canvas>


A quite concrete usage example is drawing charts and graphs on the fly using data.

A starter: Creating a bar chart with canvas

Digging further into it:
Now let’s have some data and put it in a scollable and zoomable timeline

Even better: Let’s some functions and display them on a canvas, again scollable and zoomable

A whole framework for HTML5 charts: RGraph
See examples here: http://www.rgraph.net/examples/index.html
The documentation is here: http://www.rgraph.net/docs/index.html

Why would we want to do this. As with increasing availability of data, be usage date for website, social platforms or statistical data like the Eurostat data sets, we need to be able to visualise this data and especially draw conclusions from this. The Educause Horizon Reports 2010 and 2011 have pointed out on this.
Graham Attwell in his recent blog post puts it a little further. Drawing conclusions and making statements or even decisions from data or visualisations might essentially be about storytelling with data:

And the hardest task of all is the storyboarding. At the end of the day we are trying to tell stories with data: TEBOs are a storytelling and exploration approach to learning. So for each TEBO I intend to make a short video explaining the key concepts and showing the various visualizations. We will also provide access to the raw data and to static versions of the graphing, along with explanatory notes. And for each TEBO we will try to construct an interactive visualisation tool, allowing learners to play with the data and displays. (From http://www.pontydysgu.org/2011/02/story-telling-with-data/)

But I think it’s necessary to go beyond storytelling as data and their visualisations – as well as narratives – need to be interpreted in order to make decisions based upon these conclusions. So my assumption is that we might need to suggest some decisions along with the narratives we are delivering. In practice this might mean to deliver 3 bullet points with potential decisions along with visualisations of data.