Flash, SVG and a stunning timeline

A timeline is a perfect tool for visualising complex information … and is sometimes quite complex itself. This example from evolutionoftheweb gives both. And it shows interesting details like the evolution of Flash and SVG over time.

Flash

SVG.

Snapshots from the Census Years

Recently the ONS has published some new interactive content aimed at bringing together visualisation, narrative,audio,data table, images and animation into a single compact product. The Snapshots from the Census Years product is, in one sense, a logical continuation of the storytelling themes Armin talked about in his recent posting

Snapshots from the Census Years
Snapshots from the Census Years - integrating content

As we move from print to web, it becomes clear that we need not think of visualisation/narrative/data as such separate constructs.  Modern web content should allow us to integrate these forms so they can be authored together as a powerful composite product:  Clicking on a story in the text highlights the appropriate part of the graph.  Enabling audio allows you to follow the text while looking at the graph.  Each component allows and encourages further exploration of the other components.  Although only a small product aimed at promoting our 2011 Census, it really does suggest there is more scope for integrated outputs from official statistics producers.

Why open standards matter

On this blog we usually showcase best practices of how to communicate statistics and keep the technological aspects of it in the background – which is the right way to do. But we also never get tired of mentioning how statistics is a basis for informed decision making and therefore a foundation for democracy. To live up to these standards we make sure our methods are well documented and I would argue we should also give some thoughts on what technology we use.

SVG in Internet Explorer

There are two reasons for this: We should allow our users to learn from our applications on the web, build upon them, mash them up with other stuff we didn’t imagine or even improve them. And secondly when we talk about archiving in the digital age, we are well advised to use open standards. Everyone of us who recently tried to open some old Word 2.0 documents will understand what I mean.
The topic comes up as several statistical offices have moved from the SVG format for interactive statistical graphics to Flash. See the latest population pyramid from ONS or the election atlas in Germany. While SVG is an open graphics standard just like HTML, you can think of Flash more like Word documents, those are closed binary files. Users cannot look behind the scenes and if the source code gets forgotten or the technology changes dramatically, all is lost.
Now there is a flipside to it: Just like Microsoft Word, Flash is ubiquitous, works really well and works the same way across all supported platforms. SVG on the other hand had its ups and downs. Since 2008 it is very well supported on modern browsers such as Opera, Firefox, Safari and Google Chrome but even Internet Explorer 8 doesn’t handle it at all. There was a plugin for Internet Explorer, but that never had the significant market share that Flash enjoyed (no YouTube without Flash!) and was “end of lifed” in January 2009, meaning SVG support on Internet Explorer was gone at the beginning of this year. So why all the bemoaning, free and open doesn’t allways win.
Well, things are changing right now. With the help of Google an open source project aims at adding SVG support to Internet Explorer through the Flash plugin. And they are aiming high, want to implement it in Wikipedia, which uses SVG as a base format for all their graphics and maps. It’s called the SVG Web project, and already it works well enough to support our use-cases. I’ve put up an animated population pyramid and an interactive map with it and couldn’t be happier.
Even in Internet Explorer you can right click in the graphics and “view source”, see how everything was done, adapt it, improve it … And when your are using Firefox or Safari you can print these graphics into PDF and get print quality vector graphics.
Give it a look, talk about it with your tech people and let me know what you think. We have comments here for a reason.