Zoho:Lab | Philip Hodges' experiments with Flash/Flex, RIAs, Interactive and UI/UX Design.

Lab Examples – Recap!

By phodgeszoho | Published: July 16, 2011

When I started this blog in November of last year (2010) my intention was to try and do a couple of interactive data visualisations each month. I did managed to keep that pace up for several months but it has suddenly dawned on me that I haven’t produced any new Labs since March. I have started working on half a dozen different things in the time since than but have not actually gotten around to finishing any of them.

So in an attempt to catch up and get my act together I though I would have a quick recap of the work produced so far and than also list the unfinished projects I have started to help me focus on them and try and get one finished.

2010:11:001 – USA Unemployment	2010:11:002 – Tattoo Kaleidoscope
2010:12:003 – NME’s Top Albums	2010:12:004 – End of Year Top Albums
2010:12:005 – End of Year Top 10s	2011:01:006 – History of the Batmobile
2011:01:007 – NMA Top 100 Agencies	2011:02:008 – NMA Ones to Watch
2011:02:009 – NMA Tweet History CMS	2011:02:010 – Nokia Pushsnowboarding
2011:02:011 – Pushsnowboarding CMS	2011:03:012 – Colours in Culture

The projects I have started but not yet completed:

UK Unemployment: This was an interactive heatmap very similar to the US version. I have scrapped the data into a local database and created all the required views and queries. I also adapted all the maps into Flash and tagged them up. I just need to wire it all up.

Software Story Lines: This was to be a dynamically generated interactive version of Michael Ogawa’s “Software Evolution Storylines”. The original version seems to be no longer live but there is a post on Flowing Data here: http://flowingdata.com/2010/10/12/software-evolution-storylines/. The interesting thing about this was you would be able to upload which ever open source software change log you liked and it would visualize it for you.

Show Me the Music: It is primarily an interactive app for exploring new music recommendations and relies heavily on various music APIs including Echonest and Last.FM. I am really excited about the user interface design I have produced for this. This one I definitely intend to finish one day.

My Tweet Box: For the life of me I cannot remember what this was going to be. I suspect it was something to do with the previous myTweetBox.com site which went dead but I will need to look at the design flats again.

Road Rage, Hexagoids and Hexman: These where updates to Flash Actionscript games created over the years but integrated into a common arcade that would show you timeline visualisations of peoples scores.

A History of Modern Music: This is an interactive visualisation of the Guardian’s “History of Moden Music“ series produced a back in June 2011. It took the music genre charts that the Guardian created and integrated them with loads of data scrapped from EchoNest, Last.FM and various other source. It had album covers, images, bios etc as well as dynamically generated links and built in search tools for additional media content, both MP3s and Videos on youTube. This is also pretty far along and I will hopefully get back to finish it soon.

There is something else I am working on which I really hope to find time to finish this month but I can’t really talk about that yet.

Social Bookmark It!

Posted in Data Visualisation, Flash ActionScript, Interactive Data, Lab Examples | Tagged Actionscript, flash, Interaction, Interactive, Interactive Data, Visualizations | Leave a comment

NMA Top 100 Interactive Agencies – Back issues/data required?

By phodgeszoho | Published: June 1, 2011

Earlier this year I did a couple of Twitter clients that aggregated the tweet histories and time-lines for the interactive agencies featured in New Media Age “Top 100 Interactive Agencies” and “Ones to Watch” and also alowed you to drill down and see some basic data visualisations of their tweet habits/histories and topics etc.

2011:01:007 – NMA Top 100 Agencies
2011:02:008 – NMA Ones to Watch

Now I am really hoping to do an interactive data visualisation and time-line for the entire 10 year history of the NMA’s Top Interactive Agency awards. There is potentially a lot of really interesting information about the historical growth and changes to our industry and I feel it would be a really nice data set to work with but I have not been able to find the relevant information anywhere. I have also tried emailing a couple of people at NMA directly but so far I have had no response.

So I optimistically thought I would try a bit of crowd sourcing and see if anyone out there has access to the relevant data. This could be back issues, PDFs or links to this information. If you do have it, or you know of anyone, or anywhere than please either email me or post a comment. Any and all help would be greatly appreciated.

At the moment I have 2007 and 2010 so a long way to go.

Social Bookmark It!

Posted in Data Visualisation | Tagged Data, Data Visualisation, NMA, NMA Top 100 Interactive Agencies, Visualizations | 3 Comments

Interactive Colours in Culture – The grid version

By phodgeszoho | Published: May 4, 2011

You can view the grid version of Interactive Colours in Culture here:
http://lab.zoho.co.uk/lab/interactive-colours-in-culture/#/?shape=square

A month ago I created an interactive adaptation of David McCandless‘ iconic “Colours in Culture“. At the time that I created it I was unaware that Stephen Few had written a visualization critique “Our Irresistible Fascination with All Things Circular [PDF], in which he remarked on its “design failures”, and questioned its “integrity” and “usefulness”.

However when Flowing Data posted “Business intelligence vs. infotainment” describing a recent post that Stephen Few had written “Teradata, David McCandless, and yet another detour for analytics” as a “rant” that I than became aware of the previous critique.

I found the resulting debate that followed in the comments section really fascinating and was generally disappointed when it was cut short. Not 100% sure but it seems as if the ability to add comments to this post had been deactivated, although saying that I have just noticed in writing this that the ability to add comments appears to have been activated again.

Anyway to cut a long story short I was curious to see what Stephen Few would make of my interactive adaptation so I posted the URL on his blog and he responded with:

“Your interactive version of McCandless’ “Colours of Cultures” diagram make it possible to explore the data more easily and meaningfully, but a matrix of columns and rows with the same functionality would work much better.”

So last night I decided to add an additional grid view which would allow users to switch between the two interactive versions and see what they think.

Interactive adaptation of the grid view from Stephen Fews’ original article:
http://lab.zoho.co.uk/lab/interactive-colours-in-culture/#/?shape=square

Interactive adaptation of David McCandless’ original circular design graphic:
http://lab.zoho.co.uk/lab/interactive-colours-in-culture/#/?shape=circle

Social Bookmark It!

Posted in Data Visualisation, Flash ActionScript, Interactive Data, Lab Examples | Tagged Actionscript, Adobe Flash, Colours in Cultures, Data Visualisation, David McCandless, flash, Infographics, Information is Beautiful, Interaction, Interactive, Interactive Data, Stephen Few, UX/UI Design, Visualizations | 1 Comment

Stalk Yourself with iPhone and R

By phodgeszoho | Published: April 28, 2011

Recently the story broke that iPhone appeared to be tracking your location and storing this information in an unencrypted log file on your computers hard drive.

“iPhone tracks users’ movements” via BBC ==> http://www.bbc.co.uk/news/technology-13145562 .

Well it didn’t take long for someone to than come up with an app that allows MAC users to easily create a visualisation of this data.

“Stalk Yourself: Use R to Analyze Your iPhone Location Data” via Read Write Web ==> http://tiny.ly/b22c

Further information on the iPhone Tracker app can be read and the App downloaded from here: http://petewarden.github.com/iPhoneTracker/

“This open-source application maps the information that your iPhone is recording about your movements. It doesn’t record anything itself, it only displays files that are already hidden on your computer.”

There is also some further reading clarifying some of the history and reations to the discovery here:

“iPhone tracking: The day after. Analysis and criticism came in the wake of our iPhone tracking story.” ==> http://radar.oreilly.com/2011/04/iphone-tracking-followup.html

Bit freaky but I couldn’t resist running it to see what it came up with. One thing to note is that when I have been overseas I have had data roaming turned off and probably as a result it has not tracked any points from trips to Europe or Asia.

Social Bookmark It!

Posted in Data Visualisation, Fun Stuff | Tagged Data, Data Visualisation, Infographics, iPhone, Map, OpenStreetMap, R, Visualizations | 3 Comments

ILUVUXDESIGN – Part II

By phodgeszoho | Published: April 26, 2011

Happiness! They made a sequel. Let’s keep our fingers crossed and hopefully they will complete the trilogy.

ILUVUXDESIGN Part II from lyle on Vimeo.

Who doesn’t love a good UX design, and who doesn’t get totally frustrated with bad experience design.

Hail to all the great UX designers of the world. Spread the love for UX design !!!

Social Bookmark It!

Posted in Fun Stuff | Tagged Funny, UX Design, video | Leave a comment

Interactive Colours in Culture – Now with Sort by Colour!

By phodgeszoho | Published: April 6, 2011

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

On the way home last night I had the inspiration to add sorting to the culture menu. It works best when you have a region selected and than sort by colour. This allows you to easily see which colours are used the most and also collectively what each colour represents for each colour.

You can see an example of this here: http://lab.zoho.co.uk/lab/interactive-colours-in-culture/#/?region=western_american&sortOrder=desc&sortOn=colourLabel

Social Bookmark It!

Interactive Colours in Culture

By phodgeszoho | Published: April 5, 2011

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/

Social Bookmark It!

ILUVUXDESIGN

By phodgeszoho | Published: March 10, 2011

At last! Now when friends and family ask me to explain the UX part of what I do I can just show them this! Now if someone will just do a funky animation for interaction designer, data visualisationer(?) and all the other things I get paid to do than I will be cool. Alternatively I could just focus on one area and give up this life of multi-disciplineing ing.

ILUVUXDESIGN from lyle on Vimeo.

Who doesn’t love a good UX design, and who doesn’t get totally frustrated with bad experience design.

Hail to all the great UX designers of the world. Spread the love for UX design !!!

Social Bookmark It!

Posted in Fun Stuff | Tagged Funny, UX Design, video | Leave a comment

Nokia Push Snowboarding Interactive Data Visualisation

By phodgeszoho | Published: March 5, 2011

You can view the final interactive Flash version here:
http://lab.zoho.co.uk/lab/nokia-push-snowboarding/

So the back story is that PushSnowboarding in conjunction with Nokia and Burton have wired up all kind of nifty space-age sensors to some snowboards, put some more sensors on some really awesome snowboarders, put a Nokia N8 phone in their jacket and got them to do their thing.

All these high tech senses, along with the Nokia N8′s than recorded all sorts of lovely data and the really cool thing is they than put the data online for everyone to play with. The source code for the phone app is up there too if anybody wants to mess about with that side of things.

Now, the bit that really interested me was they had also filmed the runs and provided the digital video as well so this would be a great opportunity to play with time coded data and attempt to get it all synced up with the video. My intention was to position the time line based charts so that they correlated with the position of the video scrubber, that way if you wanted to quickly see the fastest point, longest air time etc. you would easily be able to jump straight to it.

For the moment I haven’t done much with the data collected from the accelerometer, magnetometer and Inertial Motion Unit as I have struggled to find much documentation on what this all actually means. So if anyone is familiar with that than please feel free to point me in the right direction. Ultimately it would be cool to visualise some sort of 3D gyroscope to show the position and orientation of the board.

So for the moment I am displaying the foot pressure, heart rate, ground speed, air time, and GSR (Rush). There is also the phones GPS data (Latitude, Longitude and Altitude) which I hope to add a visual component for in the future that will show these values plotted via an integrated Google map.

Initially I set out to just explore the possibilities of being ably to sync and render the raw data to the video and apart from a few little bugs with the video buffering and manual scrubbing it has turned out better than I had expected. There is around 30,00 lines of data in the longest run and although the raw-data xml has been imported into a MySQL database and slightly re-purposed for faster indexing, all of that has been scripted so in theory adding more runs would now be a simple case of just uploading the raw data via the CMS here:

http://lab.zoho.co.uk/lab/nokia-push-snowboarding/index-cms.php

I think this project is probably just scratching the surface of what you could do with this. I have only visualised about half the data they collected I like the idea of adding more functionality to allow the user to add there own comments etc. Almost like a scuba divers log book but for snowboarders.

Finally I think adding a social aspect to allow people to taunt other riders with the top speeds, longest jumps etc would be cool or forming your own social group leader boards to ad a level of competitiveness for a ski holiday, the ideas are pretty endless really but for the moment you can just tweet a link to each ride.