ILUVUXDESIGN – Part II

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 !!!

Posted in Fun Stuff | Tagged , , | Leave a comment

Interactive Colours in Culture – Now with Sort by Colour!

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

Posted in Data Visualisation, Flash ActionScript, Interactive Data, Lab Examples | Tagged , , , , , , , , , , , , | Leave a comment

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/

Posted in Data Visualisation, Flash ActionScript, Interactive Data, Lab Examples | Tagged , , , , , , , , , , , , | 2 Comments

ILUVUXDESIGN

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 !!!

Posted in Fun Stuff | Tagged , , | Leave a comment

Nokia Push Snowboarding Interactive Data Visualisation

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.

You can download all of Push Snowboarding’s original data (XML), videos and the Nokia phone app source code from here:

http://www.pushsnowboarding.com/tech/developer-centre/

Posted in Actionscript Animation, Data Visualisation, Interactive Data, Lab Examples | Tagged , , , , , , , , , , , , , , , , , , , , , | 3 Comments

Memory Jogger: SQL Query for minimum and maximum data values.

In the past when I needed to find the minimum and maximum value of a field returned in a data set I would loop through the query result in Flash Actionscript like this:

var minValue:Number = Number.MAX_VALUE;
var maxValue:Number = Number.MIN_VALUE;

for(var i:Number = 0; i < resultLength; i++) {
minValue = Math.min(minValue, result[i]);
maxValue = Math.max(maxValue, result[i]);
}

However I have recently began to try and move more of this sort of functionality from the front end to the PHP class functions in the AMFphp class services on the back end. The obvious advantage being that querying an indexed value directly from a MySQL table is going to be a lot faster than looping through large data sets to find the same values.

So this is the PHP function I use to do the same thing now.

function getRangeData ($ID, $tData, $tColumn) {

$query_str = “SELECT A.* FROM (SELECT * FROM ” . $tData;
$query_str .= ” WHERE ID = ” . $ID . ” ORDER BY ” . $tColumn . ” ASC limit 1)A “;
$query_str .= “UNION “;
$query_str .= “SELECT B.* FROM (SELECT * FROM ” . $tData;
$query_str .= ” WHERE ID = ” . $ID . ” ORDER BY ” . $tColumn . ” DESC limit 1)B “;

$data = mysql_query($query_str);

$result_array = array();
$resultCount = 0;

while($resultRow = mysql_fetch_array($data, MYSQL_ASSOC)) {

$result = $resultRow[$tColumn];
$result_array[$resultCount][$tColumn] = $result;
$resultCount ++;

}

return $result_array;

}

In this case you can pass the name of the table, the required data column and the “ID” you want the data filtered against however you could modify this easily enough if you didn’t require a WHERE class.

Posted in Memory Joggers | Tagged , , , , , , , , | Leave a comment

NMA 2010 – Tweet History CMS

You can view the final interactive Flash version here:
http://lab.zoho.co.uk/lab/nma-top-interactive-agencies/index-cms.php

Not completely sure why I am posting about this, as it is password protected so you will not be able to play with it anyway, other than to satisfy my compulsive need for structure and completism. One day I will get a life, but not today.

So, I have taken the off-line scripts I created to pull down and store the tweet time-lines and built them into a web interface. It basically loops through the interactive agencies stored in the two New Media Age lists I set up earlier and checks to see if I have tweets already stored, if it finds a match than it takes the most recent tweet status id and passes that to the Twitter API as the “since_id” argument.

http://api.twitter.com/1/statuses/user_timeline/”+twitterName+”.xml?since_id=”+latestTweetID

If the script finds an agency twitter account listed that I do not hold any previous tweets for than it will loop through the tweet history using the page IDs argument to get the time-line back to a total of 3,200 tweets. This “cap” is imposed by Twitter and there does not seem to be anyway around it that I can find.

http://api.twitter.com/1/statuses/user_timeline/”+twitterName+”.xml?include_entities=true&include_rts=true&count=200&trim_user=true&page=”+pageID

In either case any tweets returned in the resulting XML are than looped through, parsed into the format I desire and than stored in the server’s MySQL database. It than moves onto the next agency. If it errors for any reason than it pauses and tries again, if it errors three times in a row it logs it and moves onto the next agency.

Another thing to mention is that each Twitter API call cycles through different PHP proxies set up on different servers. As Twitter’s API limits each application’s API calls to 150 an hour per IP address than setting up a series of proxies on different servers allows the three Flash interactives to have increased access before they hit Twitter’s rate limit. This is not a viable commercial solution but considering not many people actually look at this stuff it will be proficient for my needs.

Hopefully in the future Twitter will reconsider it’s crossdomain.xml strategy so than Flash apps will not require to circumvent the cross domain sand box security by using PHP proxies. It works but the downside is that as all the API calls are filtered through the proxy servers’ IP address rather than coming directly from the users’ browser IP address than the cap kicks in after 150 calls from the app, rather than kicking in from 150 calls from an individual user.

One of the reasons I migrated this code into a browser interface was I was planning to create an interactive where users could point it to their own Twitter accounts, Twitter lists etc but I than came across Damon Cortesi aka (@dacort) excellent TweetStats and decided that I would move onto something else.

The other two New Media Age Twitter clients can be viewed at these links:

New Media Age 2010 Top 100 Interactive Agencies
http://lab.zoho.co.uk/lab/nma-top-interactive-agencies/

New Media Age 2010 Interactive Agencies to Watch
http://lab.zoho.co.uk/lab/nma-top-interactive-agencies/index-otw.php

Posted in Data Visualisation, Interactive Data, Lab Examples | Tagged , , , , , , , | Leave a comment

Votes Referendum – How Should I Vote?

Votes Referendum – How Should I Vote? - Flow Chart

OK, so this is a little off topic for me but I couldn’t resist.

It may not be interactive but hopefully it will still be informative and helpful enough to assist everybody struggling to understand the complicated issues behind the Alternative Vote referendum to be held on the 5th of August.

So on the 5th of September if you are still struggling to make up your mind than please feel free to print this out and take it with you.

Good Luck and I hope your side wins!

Posted in Data Visualisation, Fun Stuff | Tagged , , | Leave a comment

New Media Age 2010 Twitter Lists

Also forgot to mention that the two Twitter clients run off two Twitter “lists”, so if you want to be able to follow these agencies yourself than you just need to follow these two lists:

NMA Top 100 Interactive Agencies 2010
http://twitter.com/#!/phodgeszoho/nma-ninjas-2010

NMA Top 100 Interactive Agencies 2010
http://twitter.com/#!/phodgeszoho/nma-nijas-to-watch-2010

You might like to also check out New Media Age’s twitter profile which is here:
http://twitter.com/#!/newmediaage/

Originally I did set up the clients to run directly from Jordan Stone’s Twitter lists but there seemed to be a few accounts that where no longer working and this was causing some problems for me so I decided to set up two lists of my own.

Until next year!

Posted in Lab Examples | Tagged , , , , , , , | Leave a comment

NMA Interactive Agencies 2010
“Ones to Watch”

You can view the final interactive Flash version here:
http://lab.zoho.co.uk/lab/nma-top-interactive-agencies/index-otw.php

Once I had completed the Twitter client for the NMA Top 100 it was a fairly simple thing to modify it to load in the NMA 2010 “Ones to Watch”.

Here are the statistics for the NMA Interactive Agencies 2010 “Ones to Watch” based on their tweet history as 13th Feb 2010

Agency Screen Name Tweets Friends
77 Agency 77agencylondon 2,755 752
1000heads 1000heads 2,359 2,289
Punktilio punktilio 963 1,503
Cogapp cogapp 601 230
Adjust Your Set adjustyourset 529 412
We Are Social wearesocial 411 43,089
Somethin’ Else voiceofse 353 367
The Cloud and Compass cloudandcompass 341 52
Public Creative publicreative 222 301
Digital Jigsaw digitaljigsaw 119 306
Ralph ralphcreative 80 1,161
Techlightenment techlightenment 5 17
Posted in Data Visualisation, Interactive Data, Lab Examples | Tagged , , , , , , , | Leave a comment