If you have been following the posts on this blog you will know about a 'proof of concept' prototype I built for The Economist earlier in the year. This post is about the refinement of that work into online interactive content now published on The Economist website.

User Interface Design

Aesthetically the main challenge for graphic designers at The Economist was creating an interface that fitted into a small space and the refinements from the prototype achieved that quite well. A feature that enhanced the usability immeasurably is the inclusion of the ability of the user to preview how data would appear on the chart by rolling over a country. Should the user then decide to add this country to the chart this is achieved with a single click.

Flex 3 Components

Using this approach instead of two columns of country names helped save a great deal of space. The previewing did bring with it a set of challenges though, isn't it always the case? On the horizontal bar chart, a scroll bar is employed so that as many countries as the user wishes can be compared. Typically issues that should be trivial, such as ensuring the scroll bar remains completely scrolled down, took more effort than it should have done. I hope Flex 4 scrollbars are an improvement on the Flex 3 variety as it is such an often employed interface component.

Flex Data Visualisation Library

Again I decided on using Flare, an AS3 visualisation library used in many online infographic projects, although I did experiment with Axiis in between stages 1 and 2 to see if any benefits could be gained. Ultimately Flare, while still in Alpha amazingly enough, is feature rich and the library seems more mature than its short life-span belies. Axiis, based on Degrafa, may grow to eclipse it though as it is the brain child of Tom Gonzalez and Michael VanDaniker who are no strangers to the world of data visualisation. Watch that space!

Back to the project at hand though. Something to consider when using Flare is that it seems to be just as capable of producing visualisations based on 'forced directed' or 'radial' layouts, for example, as it does straight forward line and bar charts. As such some customisations were needed to achieve details such as scales that suit economic data that haven't been considered in this general purpose library.

This is certainly not the last time I will be using Flare with Flex and PureMVC, everyday more and more information with a story to tell becomes available to us after all.

Watch this space!