Zoho:Lab - USA Unemployment = UI/UX Data Visualisation Example

LAB:2010:11:001 - USA Unemployment Rates 1990-2009
Lab Version: VERSION 1.0 :: 08 NOV 2010

You can view the final interactive Flash version here:

Flowing Data recently did a post on a USA heat map which can be viewed here:


I loved the look of the resulting image so much that I thought it would be interesting to try and create an interactive version that would allow the user to be able to zoom into states as well as view the data over a time-line.

Thanks to some advice from an earlier tutorial on how to get data to correspond to XML nodes contained within a SVG file of a US Map it was possible to create the necessary Flash files that would allow a similar approach to be applied using Actionscript as Flowing Data had done using Pearl Scripts.

It was than just a case of downloading the data, setting up some appropriate MySQL tables, PHP classes (I use AMFPphp for my Flash Remoting) and than tying it all together.

I have to confess I had expected performances issues with having 3000+ movieclips dynamically updated from data but Flash seems to be able to handle it.

It was than suggested that it would also be interesting to be able to display the values as an incremental change so I also added an additional view that allows for this:


The additional data for incremental change is calculated in the Flash front end. I did this as I had hoped to allow the user to set the start point for the change rather than it just defaulting to the previous year but that will have to be something for a future version. The data for the national and state aggregates is handled by MySQL views.

I had a lot of fun doing this and will definitely be messing about with this again in the future to add more functionality.

LAB INFORMATION URL: http://lab.zoho.co.uk/2010/11/08/usa-unemployment/

All Content Creative Commons Attribution Non Commercial PHILIP HODGES 2010 - 2013

You do not have the Flash plugin installed, or your browser does not support Javascript (you should enable it, perhaps?)

Download Flash Player