HTML5: Flow map of internal migration in England & Wales

At the start of this year, I wrote a brief post on how we’ve been looking closely at the emergence of HTML5 as a visualisation platform. This week, we’ve published the first fruit of those labours – an interactive flow map of internal migration data for England & Wales:

Migration flowmap of England & Wales

The aim here was to really stretch the technology and give it a tough visualisation challenge to see what it’s capable of. The underlying data used in the map contains over 60,000 migration flows – yet we have still managed to produce an interactive application that will run on an iPhone.

I will aim to write some more details later on the development process and the good and bad experiences of transitioning from a platform like Flash. But the majority of solutions to our problems came from a general realisation that HTML5 doesn’t really exist at all, but is more an amorphous mixture of inter-related technologies and javascript libraries that are becoming increasingly cohesive as a development platform. So – take a bow jQuery and Modernizr – these libraries in particular have really helped us to exploit HTML,SVG,Canvas,CSS, XML and javascript technology in a single, integrated document. There’s a way to go yet, but these initial results are extremely promising.

One other element I’m pleased on with this work is that we went beyond simple visualisation of the flow data here – every time you interact with the map to generate a flow visualisation, the browser performs a test to identify ‘significant’ flows (highlighted in orange, to attract your attention), based on a procedure first suggested in 1977 by Professors Peter Hagget and John Holmes. The speed with which that test is performed is real testimony to the improvements in javascript performance made by web browser developers in recent years. That we are now able to perform near real-time tests on statistical data of this volume in a web browser raises another interesting suggestion – that the key to many exciting visualisation challenges might lie in re-examining the past…

Mapping small area data using Google Fusion

From Rob Fry, Office for National Statistics

One of the problems we have in England and Wales is that the small area geography used to disseminate our statistics is largely meaningless to users. While many users might know their postcode, it is unlikely that they will know their statistical output area codes (mine is E02004729, since you asked). Although there is valid reasoning behind this geography (it is stable, hierarchical and optimised for statistical homogeneity), there is no doubt that, for most users, we need to add context to make the statistics more meaningful.

One of the outputs I am responsible for at ONS is the “small area income estimates”, and last year, with the aim of improving how users could interact with our data, I investigated using online mapping tools to display these estimates. The product I ended up using to create these maps was the Google Fusion tool (which I can highly recommend).  Several iterations of the map were published. They use a combination of the basic map produced via the online tool as well as HTML,CSS and some JavaScript (to add styling, tables, legends, branding, opacity etc). You can see the latest iteration of the map here.

screenshot from small area income estimates

The beauty of this approach, from my perspective, is the way it opens up small area data by making it more useable – by adding the context that our own geography hierarchy lacks. It enables users to first find their area by a postcode/address search or by using the background mapping, and then observe the estimate for their area and see how it compares to areas around them. Using mapping techniques like this will allow and encourage a much wider audience to explore the data compared to large static tables full of obscure geography codes.

Whilst I’m happy with what has been achieved so far, this is still work in progress. There are several enhancements I would like to make to the tool when time allows, including linking to the data source via an Application Programming Interface (API), rather than uploading it manually.  ONS is currently developing an API which will potentially make this kind of product much easier to produce and maintain. This kind of approach shouldn’t just be restricted to maps either – for example, we are keen to investigate adding charting and interactive tables to add further context. Keep an eye out on ONS’ interactive content page for further examples and future developments.

Javascript and SVG: Back to the Future

Happy New Year! One of the things I am looking forward to in 2012 is yet more improvements in the no-longer-humble web browser. The move towards ‘web apps’ has made browser manufacturers focus on the speed at which users can interact with a page (usually this is done via javascript). This has brought with it remarkable improvements to the usability of complex, interactive data graphics.  By way of example, I’d point you to the following page, making sure you are using a modern browser (Google Chrome, Firefox, Safari or IE9+). The graphic uses open SVG (Scalable Vector Graphics) content (not Flash) to show an interactive map of commuting patterns within Greater London (just mouseover the map to see dynamically-generated ‘flows’)

http://www.neighbourhood.statistics.gov.uk/HTMLDocs/dvc15/london2.svg

Commuting map of London

One of the reasons Flash has been so popular in recent years has been its better performance when dealing with complex animated/interactive content. But this map is easily handled by modern browsers (under Google Chrome, in particular, it flies along) – the excuse to use Flash for this kind of content is diminishing. Even better, because the content is based on open W3C technologies, it will work on any compatible browser, including mobile devices (e.g iOS 5+, Android 3+). Given the recent abandonment of mobile Flash by Adobe and the momentum towards greater mobile browsing, the rise of open standards for data graphics seems irresistible. And as a final bonus, there are some great visualisation libraries being put together which will make producing data graphics using these technologies even easier.

Here at ONS’ Data Visualisation Centre, we loved SVG a decade ago – so we’re really looking forward to re-working some of our existing Flash-based graphics back towards HTML5/SVG in the coming year – I’ll try and reflect on some of the experiences of doing this in a later post.

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.