HTML5 and Visualization on the Web
Why not Java or Flash?
The current way of building almost anything that's visual and interactive on a website is to use either Java or Flash. Many Eyes even uses both. And while both have great tool support and many developers that are familiar with them, there are also a lot of issues: startup takes a while, performance can be lacking, applications never look quite correct, keyboard shortcuts and accessibility features often don't work, etc.
HTML5's new features promise a much more integrated approach that makes live visualizations as much part of websites as images or text. Other parts of the page can interact with them, there is no seam between the visualization and the content. And on top of all that, they are fast and available everywhere.
SVG and Canvas
While there is a lot of interesting stuff in HTML5 in terms of telling the browser about the structure of your page, the two features that are the most relevant for visualization are known as SVG and the canvas element.
Scalable Vector Graphics (SVG) make it possible to create graphical objects in the browser. They are part of the document object model (DOM), and so can be associated with actions when the user clicks on them, hovers over them, etc. They are also specified in a way that is independent of display resolution, so they can be printed well and the entire display can be resized without a loss in quality.
Being part of the DOM also has its disadvantages, though: updates require more work and take longer. This is why visualizations using protovis can feel sluggish when they need to update a lot (protovis uses SVG for the actual rendering).
While SVG has been supported for a while in all browsers but Microsoft's Internet Explorer, canvas is relatively new. Canvas provides a framebuffer and a number of functions to draw graphics and text into it. The main difference is that canvas only stores pixels, not objects, so any interaction has to be done separately. But on the other hand, that also means that canvas can be much faster because any programs running in the browser do not modify the DOM.
Mobile browsers already support SVG and canvas, since they are all based on Webkit (with the exception of the Windows Phone 7 browser). That makes mobile devices the perfect testing platform for these new features, and will make it easy to move them into mainstream production use once the majority of users are using state-of-the-art browsers.
Great, How Do I Get Started?
While there is a lot of information about SVG out there, things are a bit more difficult to find for canvas. Mozilla has a nice, basic tutorial, and Mark Pilgrim covers some additional ground in his online book. Hakim El Hattab has some really impressive game demos.
Posted by Robert Kosara on December 21, 2010.