You can view the final interactive Flash version here:
There are just some data visualisations and infographics that when I see them I feel like fireworks are going off inside my head! It is usually designs that feature lots of colour or lots of curves so as you can imagine seeing this was like the 4th of July.
When I decided to try and start dedicating some time to doing non-commercial “fun” projects, this was actually one of the first interactives I thought about doing, but as usual I became distracted by other ideas/projects and it was put on my eternal list of things to do. However last week I finally got back to the graphic that first inspired me to start messing around with interactive data visualisation.
All the content was fed into relational database tables and the central graphic, menus etc are all drawn dynamically. There where some challengers with dynamically creating the arcs/wedges and at first I had a slightly elaborate layering process to create the shapes required but as this prevented the roll over highlighting of the ring and wedge selected it was ultimately not going to work. After unsuccessfully messing around with some complicated mathematically approaches I actually stumbled across a very simple solution where multiple overlapping shapes within the same ActionScript “beginFill” will cancel each other out.
As well as the rollovers this approach ultimately allowed me to add colour filtering. For example: http://lab.zoho.co.uk/lab/interactive-colours-in-culture/#/?colour=yellow. I also toyed around with adding a CMS layer to this so that people could submit additional colour information, a sort of “fill in the blanks” so to speak but will leave that for another time.
Apart from adding the navigation interface for the interaction I wanted to keep this as close as possible to the original design and I was really please when it all came together in the end.
For more visualisations from David McCandless make sure you check out his website http://www.informationisbeautiful.net/