NME’s Top Albums – Updated to include 2011 & 2012

You can view the final interactive Flash version here:
http://lab.zoho.co.uk/lab/nme-top-albums/


I had an hour to kill this evening so I added updated the NME Top Albums interactive visualisation to include the results for 2011 & 2012. “Dream Pop” seems to have become a popular genre for 2012. With “Indietronica“, “Neo-psychedelia“,  “Psychedelic Pop” and “Psychedelic Rock” all doing well.


2011 was more of a mixed bag with “Folk Rock” and “Experimental Rock” being the only two that stand out above the crowd.

However this being NME will still have the ever present “Indie Rock” and “Alternative Rock” dominating both years.

If I get the chance this weekend I might also try and new versions of the “End of Year Top Albums for 2010” to show the charts for 2011 & 2012.

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

CS&PF – Sandettie Lightship Buoy Data

The HTML5 interactive charts can be viewed here:

http://lab.zoho.co.uk/lab/sandettie-lightship-buoy-data/

With this year’s late start to Spring the question was recently asked – “would this have an effect on the summer sea temperature?” This question was especially relevant to some friends of mine who are booked in for solo and relay channel crossings. Especially for channel soloists, where a couple of degrees diference to the water temp can have a huge impact when swimming 12-16 hours in open water.

So we attempted to answer this question :-)

There are various offshore monitoring stations but the most relevant to Channel swimmers is the Sandette Lightship Buoy which is owned and operated by the UK Met Office. Its position is 51.103 N 1.800 E (51°6’9″ N 1°48’0″ E) – roughly due North from Calais and due East of Dover.

The Channel Swimming & Piloting Federation (CS&PF) website has detailed charts plotting the data recorded from this buoy going back to 2004. However it is very “spiky” data and as you can only view the charts for each year it is difficult to get a quick overview of all the data. So the first thing I did was scrape their data and put it into a single time series chart. This gave you a better overview but was still difficult to interpret.

So the next thing to do was to plot the moving average and smooth out the spikes. This is a great way to get a better look at the underlying curve and thus makes it easier to visually interpret the shae and trend of the changes.

So it appears that although there is a “seasonal lag” between the water temp and air temp, it seems to only be over a 1-2 week period i.e. a cold Winter or late start to Spring does not seem to have a impact on the water temperature in July/August. The channel season water temperature is more dependent on the air temperature during June/July then it is Feb/March.

One important thing to note is that because Sandettie station is a buoy, the air temperature recorded there is very near the sea surface. It means that the sea will greatly moderate the air temperature reading. To get a better understanding of the air temperature effect on the water you really need to source the air temperature data from elsewhere. Possibly some Met data for Dover. If anyone can recommend a historical data set for air temperature in Dover/Calais then please send me the link and I will swap out the air temp data from the buoy.

The charts where created using dygraphs JavaScript Visualization Library which you can download from here: http://dygraphs.com/

Posted in Data Visualisation, Lab Examples, Swimming | Tagged , , , , | 1 Comment

Cold Water Poll for Open Water Swimmers

Owswimming.com recently conducted a poll to explore how swimmers from different countries defined “cold”. They have posted the results on their blog and you can check it out here.

“When I showed these results to my fellow swimmer (and wife) Susan, she said “Duh, so swimmers from cold weather can stand colder water”.  Well, it is true that I am not solving the Riemann Hypothesis, but I kind of like having data that supports anecdotal assumptions.”

Posted in Data Visualisation, Swimming | Tagged , , | Leave a comment

HTML5 – Data Visualisation Open Source Development Tools

I started working on a new interactive dataviz yesterday and I am determined that this project is designed and developed using HTML5 rather then Flash. I have already started putting some bits together with Google Charts but just thought it might be useful to list some of the various dataviz open source tools/libraries that I am curently looking at in case there are any other Flash people looking to move other to HTML5 as well.

I am also very keen to hear from anybody else if they have some open source tools to recommend.

D3 - Data-Driven Documents

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

http://d3js.org/

CrossFilter - Fast Multidimensional Filtering for Coordinated Views

Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser. Crossfilter supports extremely fast (<30ms) interaction with coordinated views, even with datasets containing a million or more records.

http://square.github.com/crossfilter/

Google Charts – Display live data on your site

Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.

http://developers.google.com/chart/

JpGraph – Powerful PHP Driven Charts

JpGraph is an Object-Oriented Graph creating library for PHP >= 5.1 The library is completely written in PHP and ready to be used in any PHP scripts (both CGI/APXS/CLI versions of PHP are supported).

http://jpgraph.net/

Tablea Public - Data In. Brilliance Out.

It is a free-to-use program that offers analytic capability, with the limitations that visualizations are limited to 100K rows of data and can only be saved to the Tableau Public servers.

http://www.tableausoftware.com/public/

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

Most Profitable Hollywood Stories

The Flash based wireframe and CMS can be viewed here:

http://lab.zoho.co.uk/lab/most-profitable-hollywood-stories/

I was going over some old ‘unfinished’ projects when I came across this interactive ‘wireframe’ and CMS that I developed. So I thought I would post it up. I was very disappointed I didn’t get to ‘skin this up’ but at the time I had just started a new contract at UBS and my time was suddenly taken up with designing and building a prototype tool for traders to view their overnight risk calculations against trade types.

The concept and data behind this was put together by David McCandless of “Information Is Beautiful” and ultimately used as the  basis for his 2012 “Hollywood Dataviz Challenge”. You can see the shortlist for the interactive finalists here.

Would be fun to return to this one day as I built a lot of additional tools that connect to various movie website APIs and also some tools for scraping data from Rotten Tomatoes, Metacritic and the Internet Movie Database (IMDb). The CMS also has a nice feature where it ‘guesses’ the movie’s URL on wikipedia, IMDb and provides quick links to these guesses as well as a quick search link for the title on Google. These quick search links where designed to aid a researcher find and update the data. Once the correct perma-links to the movies’ pages where in the system it became easier to automate the data management and ultimately the aim was to create a script to update the ‘numbers’ each night.

Another interesting change since I did this is Google now has data for movies on the search result page so it would be interesting to explore if there was an API for this or even just putting together a script to scrape this data.

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

Evolution of Batman logo, 1940-2012

When I did the interactive “History of the Batmobile” I included as many different bat logos in the background as I could find. They were stylised as “bat signals” but they weren’t in any particular order and I don’t think I had specific information on their origin to tag them up to the appropriate year.

This new poster from “Calm the Ham” – http://calmtheham.com would have been extremely useful.

I may go back and update the timeline at some point in the future, as there have been a few new batmobiles since I created it, and if I do then hopefully I can add additional information to add some structure to the bat logos.

Posted in Data Visualisation, Fun Stuff | Tagged , | 1 Comment

New Year’s Resolution – Keep it Simple!

Hopefully the title says it all!


Icons for the “Ten Laws of Simplicity” by John Maeda

“The ability to simplify means to eliminate the unnecessary so that the necessary may speak.” — Hans Hofmann

“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.” — Antoine De Saint-Exupery

Some good reads on the subject:

The Laws of Subtraction: 6 Simple Rules for Winning in the Age of Excess Everything
by Matthew May

Simple and Usable Web, Mobile, and Interaction Design (Voices That Matter)
by Giles Colborne

The Laws of Simplicity (Simplicity: Design, Technology, Business, Life)
by John Maeda

Posted in Fun Stuff | Tagged , | Leave a comment

Stephen Few – Introducing Bandlines

Bandlines: Sparklines Enriched with Information about Magnitude and Distribution.

The latest newsletter from Stephen Few of Perceptual Edge is out today and it looks quite interesting. I would love to do an interactive version of this.

“In the last edition of this newsletter I wrote about the many ways in which sparklines can be scaled to serve various purposes and convey different aspects of time-series values. This article grew out of discussions that I had with several of you in my blog and discussion forum about the way that sparklines are sometimes deficient when used in dashboards. Now, in this new edition of the newsletter, I’m continuing along this same path, but this time I’m introducing a new version of sparklines, called bandlines, which are designed to include a great deal more information without overcomplicating them.”

You can read the full PDF by clicking here.

I would also recommend you check out his other articles, newsletters and blog at: http://www.perceptualedge.com/

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

My Christmas Made Easy With My Amazon Wish List

I must confess, as strange as it sounds, I have never been very comfortable with receiving gifts and I am especially uncomfortable about telling people what I would like for Christmas. My wife comes from a large extended family and every year I struggle to think what to say when people ask me. This year when I received an email from my brother-in-law asking the dreaded question, I decided to take a different approach and just distribute my Amazon Wish List.

My wish list was never actually a list I put together for the purposes of distributing, I have always kept lists of books I want to read and thanks to a life long history of insomnia and also a one hour train ride to work I am always looking for new books.

The result was great, I didn’t feel awkward being specific about what I wanted and based on the number of books I received from the list my in-laws where OK with using it.

Another useful thing to note is that after Christmas I went onto my wish list to remove the books I had received only to discover that Amazon had already done so which I thought was a very nice feature.

Here is the list of books I very kindly received that will be keeping my nights and train rides occupied for the foreseeable future.

The Laws of Simplicity (Simplicity: Design, Technology, Business, Life)
by John Maeda

100 Things Every Designer Needs to Know About People: What Makes Them Tick? (Voices That Matter)
by Susan Weinschenk

Living with Complexity
by Donald A. Norman

Understanding Comics: The Invisible Art
by Scott McCloud

The Design of Everyday Things
by Donald Norman

Design by Nature: Using Universal Forms and Principles in Design (Voices That Matter)
by Maggie Macnab

Universal Principles of Design, Revised and Updated: 115 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions and Teach Through Design
by William Lidwell

Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences (Voices That Matter)
by Stephen P. Anderson

If anyone else is interested in seeing what else is on my current wish list then the address is here. Think I could learn to like this gift receiving thing.

http://www.amazon.co.uk/registry/wishlist/1Z8DGRZRF12W7

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

Memory Jogger: Creating Quick Contact Sheets

Creating contact sheets in InDesign is another one I am always forgetting the short cut keys for.

1. Choose File > Place, select multiple images, and choose Open.

2. Hold down Ctrl+Shift (Windows) or Command+Shift (Mac OS) and click or drag.

3. While still dragging, release the other modifier keys and press the arrow keys to determine the number of rows and columns. Use the Up Arrow and Down Arrow keys to change the number of rows and the Left and Right arrow keys to change the number of columns. To change the spacing between frames, use the Page Up and Page Down keys or hold down Shift while pressing the arrow keys.

4. Release the mouse button to place the grid of images.

Original Adobe blog/tutorial here

Posted in Memory Joggers | Leave a comment