Interactive Colours in Culture

You can view the final interactive Flash version here:
http://lab.zoho.co.uk/lab/interactive-colours-in-culture/

Ever since I first saw the cover of “Information is Beautiful” I have always loved David McCandless‘ iconic “Colours in Culture“.

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/

Related Posts:

This entry was posted in Data Visualisation, Flash ActionScript, Interactive Data, Lab Examples and tagged , , , , , , , , , , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

2 Comments

  1. Posted May 12, 2011 at 10:29 pm | Permalink

    Excelent work, let me ask you this, where did you gather the data from? and also how? I do not need precise details just a hint.

    • Posted May 13, 2011 at 4:52 am | Permalink

      Thanks but this is just an interactive adaptation of David McCandless’ original design so he deserves the credit. You can see the original and find more information about it here:

      http://www.informationisbeautiful.net/visualizations/colours-in-cultures/

      He lists the credits and sources as:

      DESIGN: AlwaysWithHonor.com and David McCandless.
      RESEARCH: David McCandless, Pearl Doughty-White, Alexia Wdowski
      SOURCES: Colormatters.com, Brandcurve.com, About.com,Pantone, John Gage.
      DATA: Explore in this Google doc

      Hope this helps.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>