Posts Tagged ‘stamen’

GUI Part 2 – Interactive Data Visualisation

Monday, December 22nd, 2008

The second part of our GUI class was about interactive data visualisation. Again, we had an outstanding external teacher: Shawn Allen from Stamen Design in San Francisco. Along with Shawn we also had our own CIID genious David Mellis to help us with the ActionScript3 programming. We started using FlexBuilder, but quickly realised that it would be easier for the beginners to start using Flash as the environment instead. I already knew a bit of AS3 and Flash, so for me the two weeks were about upgrading my skills in this field, staying in the context of data visualisation.

We started using XML data from UN Data, which is an enormous source of information on almost anything. I started digging into data about alcohol consumption per capita for a wide range of countries, and came up with a small application that will let you filter, sort and highlight countries based on either country name or consumption. The app is just a quick one, so it’s probably buggy and hard to use, but at least I got around handling XML data in Flash. Click the screenshot below, to try the application.

Screenshot of the data visualisation of alcohol consumption per capita

Screenshot of the data visualisation of alcohol consumption per capita

 The second week, I started exploring other data formats than XML. I went with a set of datafiles in CSV-format from the Danish Statistics Bank. Here the main task was to parse and combine different files into one dataset, so that I could use it for a visualisation. The data i worked with, was about the number of fatal bike accidents in Denmark for the last ten years. Actually I was surprised to see how relatively low the numbers were, compared to the amount of cyclists here in the country. Again, usability was not my main focus, and I know there could be done a lot in this field, so please bear with me. Here my main focus lied in using layout organizers, which is why you will find three buttons, each representing a different layout.

Screenshot from the data visualisation of bike accidents

Screenshot from the data visualisation of bike accidents. Beware of the bugs!

Click the part of Denmark you want to see the statistics for, and you will get a graphical representation of the fatal accidents. Red bikes are women, black are men. Mouse over a bike to see limited details on the accident.

Btw: For some reason the swf runs fine in the external Flash player, but acts a bit strange in the embedded browser player. Do you know why?