Visualizing data in-browser

2nd March, 2012

This page is from our blog archive

You may still find this page interesting, but there are more relevant and up-to-date blog posts available. Use search or filter options to find the latest content.


Before we talk about the best way to use the modern browser for data visualization, lets look at some older techniques.

VML

Vector Markup Language (VML) is a way of rendering content in Internet Explorer. It is similar but annoyingly different to SVG.

VML is often used by libraries as a stop gap. For example, Raphaël and dojox.gfx use VML for Internet Explorer but SVG in other browsers.

VML started to die with the rise of Firefox & WebKit-based browsers, and Silverlight didn’t help either. The future of VML is clear, with Microsoft finally dropping it in Internet Explorer 10 .

Anyone developing VML now should just stop and start reading the SVG spec.

Ajax

Inspired by the brilliant Google Maps implementation back in 2005, the Ajax technique renders content on the server and transmits images up to the browser on demand. Surprisingly the technique is still used by visualization vendors today, with Tableau Public being an obvious example. (Tableau itself is great system – we’re just not big fans of the public web implementation!)

The technique has advantages and disadvantages.

One advantage is that the trick works well on all browsers – after all, all the browser needs to do is respond to user actions and get images asynchronously. If your browser can’t do that then you really are in the 1990s!

From a software development perspective there are advantages in terms of existing libraries. Provided you can cope with the server loading problem (which is non-trivial), you can continue using your existing Java, Python or .NET code.

But there are major disadvantages. The first is obvious – animation is going to be very difficult if every frame has to be retrieved over the network. Interactivity in general is a problem as there will be perceptible lags between user activity and getting new images. And each image eats bandwidth. If you are on a low bandwidth connection, the Ajax approach just isn’t going to cut it.

DOM manipulation

Direct DOM manipulation uses standard DOM elements, like divs, and positions them absolutely. D3 can be used like this, though most people will use D3 with SVG.

Generally things will work across all browsers although you will need to test them. For text rendering this technique works really well. The browser is a great text rendering machine so it makes a lot of sense to use it. CSS can be used to style your visual elements, giving a nice separation of concerns.

One disadvantage is that it can be hard to retrieve the actual image generated – to post back to the server for example. A second issue from a programming perspective is the large amount of DOM expertise needed.

Out of the techniques we’ve talked about here, this one is the most interesting going forward, with browsers getting faster and CSS3 helping with transitions and animation.

Subscribe to our newsletter

Get occasional data visualization updates, stories and best practice tips by email