Remix of the Century

Earlier this week I posted about the project exploring the impact of Superstorm Sandy. One of the enduring features of this work was the integration of imagery with the core data visualisation interface, expanding the scope of the users’ connection with the event.

I came across another great example, this week, of how the utilisation of additional channels of media can really enhance the depth and enjoyment experiencing a visualisation work. This project is called  Remix of the Century and was developed by a group of developers from the Thud Group (Henrik Pettersson, Thomas Hannen and David Vella) at the London Music Hackday back in November.

RemixOfCentury

This D3 project is a combined visualization and remix of the top charted tracks on Billboard from 1890 up until 2011. Henrik describes the background to the work:

The idea was to take historic chart data from the Whitburn project, fetch a 30 second preview for each song from 7Digital and then feed it into the Echo Nest Remix API to create one long seamless remix. This worked better than we had imagined and created a nice aural representation of around 100 years’ worth of Billboard number ones. Once we had the remix done we wanted to represent the data visually as well, and for this D3.js came in handy. We fetched some data for each song, again using the Echo Nest API, acoustic properties such as “Danceability” and metadata such as duration, and then visualized the whole dataset using D3 scatterplots.

The visualisation actually goes beyond a scatter plot and offers a customisable bubble plot, enabling you to modify the combination of three variables for the y-axis, the size of the circle and its colour, then along the x-axis you have a timeline of the year in which the song charted at number one. For each song you have a breakdown of the main attributes of the sung such as key, tempo, time signature, as well as the wonderfully subjective meta-data of things like ‘liveness’ and ‘speechiness’.

RemixOfCentury2

Once you’ve done playing and exploring, press play and sit back to listen to a remix of all the songs back-to-back! A really great concept that had me exploring for longer than I could justify!

You can read more about the design work in this blog post and you can listen to the finished remix on Soundcloud if you just want the music.

Best of the visualisation web… December 2012

At the end of each month I pull together a collection of links to some of the most relevant, interesting or thought-provoking web content I’ve come across during the previous month. Here’s the latest collection from December 2012.

Mattiaparietti | An immersive and incredibly comprehensive look through the drink habits and patterns of the characters of Mad Men | Interactive Visualisation

Bomb Sight | Mapping the WW2 bomb census: Exploring the London Blitz during 7th October 1940 to 6th June 1941 | Interactive Visualisation

BBC | Interactive site to explore the UK census results and patterns | Interactive Visualisation

BBC | Population pyramids for the UK census population changes | Interactive Visualisation

Graphics Info | Graphic exploring the comparable goalscoring careers of Lionel Messi and Gerd Muller | Visualisation

Satyan Devadoss | Interesting radial/chord diagram to explore ‘Impact of Major on Career Path for 15600 Williams College Alums’ | Interactive Visualisation

Visualizing.org | Recapping the winners of the Visualizing Global Marathon | Gallery

Till Nagel | One of the winners of the Global Marathon, Till Nagel, describes his entry | Article

New York Times | Fun interactive way to determine who could be/have been hurt most by the US fiscal impasse | Interactive Visualisation

Design Seeds | Inspirational resouce for looking up colour palettes that you’ll love | Tool

UX Blog | Five years of US traffic fatalities | Visualisation

BBC | Plotted history of the growth of BBC News online | Interactive Visualisation

New York Times | A collection of their incredible work during 2012 | Gallery

Washington Post | Another wonderful collection of 2012 work, this time from the Washington Post | Gallery

Guardian US Interactive | 2012 in America: the year in review | Interactive Visualisation

Guardian Data Blog | A review of 2012 in data | Article

Mashable | Interview with and profile of Jer Thorp | Interview

Rich Blocks, Poor Blocks | See how much money people make in every neighborhood in every city in America | Interactive Visualisation

Vizify | My year on Twitter – bit of fun testing out vizify tool | Interactive Visualisation

13pt | Drawing science in sign – design narrative about creating an infographic about sign language | Article

Charts n’ things | Kevin describes the challenge of choosing the best form | Article

Clearly and Simply | Building network graphics in Tableau | Article

blprnt | “This summer, Mark Hansen and I created an artwork, installed at the eBay headquarters in San Jose, which investigates this idea of the eBay database as a cultural artifact” | Article

Eager Eyes | The changing goals of data visualisation | Article

Polychart | Announcing the commercial launch of polychart | Article

UX Blog | “The Real Losers of Election 2012? The Colorblind” | Article

Junkcharts | There’s life without animation – nice analysis of the charts without moving parts that still convey time varying data | Article

National Infographic | Wonderful behind the scenes explanation of the work behind ‘Penguins hit the gas’ | Article

Tableau | Andy Cotgreave presents his ‘Top 5 Visualisations of All Time’ | Article

Peltier Tech Blog | Jon Schwabish’s guest post explaining and critiquing some of the charts doing the rounds about the ‘Fiscal Cliff’ [You made it Jon!] | Article

Eager Eyes | Robert discusses a really important design issue: affordance | Article

The Functional Art | Claiming back the word infographic | Article

Flowing Data | Time-lapse writing of a research paper | Video

Jerome Cukier | Events in the Games of Thrones | Interactive Visualisation

Brain Pickings | Looking at the wonderful work of Accurat and their English version of the history of Nobel Prizes | Article

FastCo Design | 9 Personal Stories Of Love And Travel, Told In Data-Driven Jewelry | Article

Visually | Using Visual Reasoning to Understand Numbers | Article

Wired | Twitter lets you download your entire tweet archive | Article

Guardian Data Blog | Great dataset collated by the Guardian on the number of guns sold in the US | Data

Vallandingham | Tutorial on building ‘Small Multiples with Details on Demand’ | Tutorial

The Functional Art | There’s beauty in print graphics | Article

Autodesk Research | OrgOrgChart: The evolution of an organisation | Article/Video

National Geographic | Vintage Data visualization at Nat Geo, circa 1900 | Gallery

Census.gov | Interesting approach to showing the density of populations as you move up and down the latitude of a coast | Interactive Visualisation

Eager Eyes | Robert introduces the Tapestry conference, taking place in Nashville on 27th Feb | Conference

New York Times | The rather incredible ‘Snow Fall’ interactive story-telling telling project | Interactive Story

Atlantic Wire | “What the NYT’s ‘Snow Fall’ means to online journalisms’s future” | Article

Charts n’ Things | Snow Fall: Making a mountain out of a mountain of data | Article

Poynter | “How The New York Times’ ‘Snow Fall’ project unifies text, multimedia” | Article

Grahaphics | 3D illustrator Graham Roberts describes his work on the Snow Fall project | Narrative

Source | Finally… A Q&A with the NYT team behind Snow Fall | Interview

Michael Babwahsingh | Michael discusses the idea of the ‘Dawn of the Understanding Age’ | Article

Guardian | Geography Game: How well do you know the world? | Interactive Project

Perceptual Edge | Stephen discusses the important issue of background colour | Article

Brain Pickings | Vintage Visual Language: The Story of Isotype | Article

bmander | “This is a map of every person counted by the 2010 US and 2011 Canadian censuses. The map has 341,817,095 dots – one for each person” | Interactive Visualisation

Jonathan Crowe | New Book: “The Measure of Manhattan” | Book

BBC | Maps and Mapmaking | Programme

Data Desk | The LA Times’ Data Desk: Maps, Databases, Analysis and Visualisation | Site

Quartz | Check your US tax rate for 2012—and every year since 1913 | Interactive Visualisation

Wall Stats | An old one but needs resharing: ‘Down the Rabbit Hole of the Pentagon Graphics Machine’ | Gallery

Column Five | Cedric Kiefer on Generative Design | Interview

Viewtific | Building good infographics part 1: Just because you can say it doesn’t mean you can show it. | Article

Data Art | A Quick Illustrated History of Visualisation | Article/Site

Edward Tufte | Megan Jaegerman’s brilliant news graphics (from 2007) | Article/Gallery

Xocas | The NYT’s Xaquín G.V announces he is teaching at the School of Visual Arts and describes some of the themes he will be covering | Article

Fast Company | Without Human Insight, Big Data Is Just A Bunch Of Numbers | Article

Boing Boing | Jerry Seinfeld on information design (1981) | Video

Investigating the impact of Superstorm Sandy

I saw some nice techniques being used in this project developed by Derek Watkins and Laura Kurgan from the Spatial Information Design Lab at Columbia University.

The project has been developed to serve as a ‘launching pad’ for an ongoing investigation into the impact of Superstorm Sandy across the Tri-State region. Data generated by FEMA, the US Census Bureau and volunteers as well as photo imagery collected by the Civil Air Patrol have been brought together to help researchers at Columbia’s Graduate School of Architecture, Planning, and Preservation explore the implications of the storm.

Sandy2

The project, in its current form, allows you to explore the amount of assessed damaged buildings up and down the coastal areas affected. You can see the worst hit areas through the size of the red circular areas. You can also see the extent of the storm surge, depicted by the light grey areas.

I particularly liked the interface and the way you scrolled up and down the coast, exploring the map in a vertical landscape. To accompany this is a small thumbnail insert on the left which gives you an overview of the land, highlighting the area you are currently focused on and also includes a preview of the data/bubbles.

Sandy2b

As you scroll down and hover your mouse on the right hand side you are able to view photos taken of the coastlines about 10 days after Sandy hit landfall, you can click on them for a larger image. The view for each photograph is pinpointed along the coastal map.

Sandy2a

Sandy1

Whilst some people will understandably have a problem with the use of circle areas to encode the quantities of damaged buildings I think the use of opacity and hovering annotations compensates for the overlapping and distorting of the central point of reference.

Sandy3

You can also toggle on/off details of income levels and unemployment levels to establish a sense of the circumstances for those people most impacted by the storm.

Sandy4 Sandy5

All in all a great looking project and I look forward to seeing it develop further layers of detail and analysis in due course.

Sample extracts from my book

You will no doubt know by now that I have a book out – I’ve not been shy in letting people know! What I have neglected to do so far, though, is to give people a flavour of the style and coverage of the book. So, I have extracted a couple of sections and presented them in the pdf files below.

The first sample comes from ‘Chapter 1. The Context of Data Visualization’ and covers some general objectives behind data visualisation design.

DesignObjectives

The second excerpt comes from ‘Chapter 4. Conceiving and Reasoning Visualization Design Options’ and specifically relates to the section on the usage of colour.

UseOfColour

For all other information relating to the book, visit my dedicated page.

Increased activity or more coordinated BBC graphics output?

This is just a general observation that I shared on Twitter but wanted to capture it and share it on here. It has been noticeable over the past few days how much increased visibility/output there has been from the BBC with regards to its Interactive and Graphics work. This has been most prevalent on its Twitter feed @BBCNewsGraphics.

BBCTwitter

I’m not claiming to be some clairvoyant (though I will accept accusations of high-levels of wisdom and astuteness) but I did hope/forecast – in my 10 significant developments post of July – that the impact of the new Visual Journalism unit would help realise its incredible potential.

Whether or not this pattern of activity is linked to the creation of this unit is another matter but nevertheless it is good to see this great organisation start to leave a greater footprint on the data visualisation and infographics scene. Keep a watch on their dedicated collection site of graphic-related work as it hopefully continues to grow.

BBC

Talk slides: Tableau, SeaVis meetup & Facebook

It has been a rare pleasure to have the opportunity to spend the week along the US west coast, meeting some incredible people, catching up with old friends and new and being kindly invited to give a few talks along the way. I did various sessions at Tableau HQ, in Seattle for the SeaVis meetup and also at Facebook HQ.

This slide deck is a kind of amalgamation of all three talks so it kills three birds with one stone. I posted deck on Slideshare and tweeted it but I’ve had a few people who are not on Twitter enquiring about it so I thought I would give it a more permanent and efficient home on my site. If you’ve seen any of my other talks it probably isn’t massively different but I do tweak my slides and thoughts constantly as I learn more about the field.

As with all Slideshare documents, take the occasional skew-iffy appearance and formatting as not being my fault!

Andy Kirk's Facebook Talk from Andy Kirk

Data Stories podcast: Episode 16, a third guest appearance!

It was my great pleasure to be invited back on to the outstanding data stories podcast last week, for my third appearance! I joined hosts Enrico and Moritz alongside Andrew Vande Moere and Bryan Connor to discuss our feelings on what was big in 2012 and our hopes and expectations for 2013.

As well as a traditional audio podcast you can view the video recording of the Google Hangout session we used to hold the discussion.

Once again, many thanks again to Enrico and Moritz for inviting me back on the show and I look forward to receiving my hat-trick present in the post soon…!

Essential Resources: The most influential visualisation books (part 3)

The contents of this post are now published on the References page

Book review – ‘The Functional Art’, by Alberto Cairo

I would be surprised if many people out there have not heard of Alberto Cairo, given the vast amount of different channels and contexts through which he is active in the data visualisation field.

For the rest of you, Alberto is visible as the editor of ‘The Functional Art’ website/blog about data visualisation and infographic design, but that only scratches the surface of what he gets up to – I included Alberto in my round of up 2012 as one of the most important figures of the past 12 months and you can read more about him there.

Anyway, a few months ago Alberto released an English version of his book ‘The Functional Art‘ which, as he describes, offers “an introduction to Information Graphics and Visualization, the communication of facts and data by means of charts, graphs, maps, and diagrams”. As a bonus, the book also included a DVD with 90 minutes of video lectures.

Having gratefully received a copy a couple of months ago it unfortunately landed at a busy time for me so this is the first chance I’ve had to read and review the book. With plenty of other insightful reflections already out there (1, 2, 3, 4, 5 and 6) I didn’t want to rehearse too much of what others have covered but I did want to offer a rather belated and brief personal review.

Cover

 

The first thing to say is that this is a super book. Let’s get that out there from the off. If Alberto was in school he’d definitely be running home proudly showing his parents the A1 he got from his teacher. You’d hope so too. To write a book in school is no mean feat.

I digress.

This book is very well written, extremely well-considered in its structure and sequence and covers so much ground without ever feeling too heavy or too laboured. Despite so much being covered, the book has room to breathe – you never feel things are rushed or corners are cut.

It is structured into four Parts, though it feels more like two distinct sections. Parts 1, 2 and 3 include nine chapters covering the Foundations, Cognition and Practice. Part 4 then changes gear and includes ten interviews with notable designers and practitioners from the field. Click here to see the chapter breakdown within each part.

When you read the book – and if you know or have met Alberto – you can’t help but hear him talking. It’s akin to an audio book without the audio. His personality and passion for the subject leaps from the page, maintains a momentum and keeps you turning the pages.

The clarity of his conviction is also very impressive but not stylistically ‘oppressive’ - this is no preacher’s book. The book has gravity in the sense that you feel you are in safe hands being guided through this subject by somebody who has the necessary depth, experience and knowledge to pull it off.

I really enjoyed the rhythm of the book in the sense that every major point or message is supported with a well-selected example (illustration or anecdote). This significantly helps readers to cement their understanding of what, let’s face it, can be fairly tricky things to wrap your head around sometimes.

Alberto also does a commendable job of creating a linear account of a non-linear, almost radial subject. Having faced this challenge with my own book I know how tricky this can be. I was pleasantly surprised by the theoretical depth in to which he explored issues of cognition and the tightrope that is the discussion about form and function.

Throughout the book you are reminded that Alberto is a journalist at heart and this is such a strong and important attribute. This informs some of the most important messages in the book, such as:

I won’t go in to much detail about the rest of the many take away insights I picked out the book, but some of the more prominent ‘sticky page markers’ were inserted for the following…

Pg. 19 – Difference between figurative and non-figurative
19 – Visualisation as a technology
26 – What does the designer want me to do?
31 – Not just one way of encoding
37 – Think like a reader, not a designer
41 – Bubble diameters
51 – Wheel diagram
67 – Tufte vs. Holmes
97 to 142 – Great introduction/summary of the visual system (ties in value of Few and Ware, etc.)
111 onwards – Excellent treatment of cognition
123 – Perceptual tasks
153 – Great quote (shown below)

Quote

I loved the interviews section at the end. It brought a really nice change in focus to round off the learning, with some excellent choices of key individuals to probe for their tidbits of wisdom. All are great but I felt a particular highlight was the interview with Juan Velasco and Fernando Baptista from National Geographic – the depth of research and preparatory work and the attention to detail that goes into their graphic work is mind-blowing.

To point out things that the book lacks is a redundant issue really. It fundamentally matches up to your expectations or hopes as something that offers a comprehensive treatment of the key aspects of this great field. It isn’t a “coffee table” glossy gallery, it isn’t a tutorial-laden “how-to” book, it is an “Introduction to Information Graphics and Visualization” – exactly as it sets out.

I don’t know this as fact, but I suspect Alberto has written a book that he would have valued himself down the years and I’m sure other infographic and visualisation designers now will find great value in it.

All in all, as I began, this is another super addition to the literature around this subject and really should find itself on your bookshelf (e- or otherwise). After all, anyone who can command respect and receive great reviews from people from (relatively or, at least, traditionally) diverse positions within the field, such as Stephen Few and Nigel Holmes, must be doing something right!

You can buy The Functional Art from the usual places such as Amazon and Barnes & Noble. On Alberto’s site, there is also the chance to download three chapters for free.