Gavin Wray

I made a data visualisation today showing the top 50 artists I listened to in 2010. The size of the artist photo is proportional to the number of times I listened to any track by that artist in 2010.

View full size image (jpg, 1.6mb) | View on flickr

Here’s how I made it…

Overview

1. Get the listening data from the last.fm API.
2. Turn the data into a form suitable for importing into Google Spreadsheets.
3. Visualise the data in a tree map.
4. Overlay the photos on the tree map.

Get listening data from last.fm API

I use last.fm to store data about my listening habits. Any track I listen to on my iPod, iTunes, Spotify or the last.fm website itself, is “scrobbled” – collected on my computer using the scrobbler tool and sent to my profile on last.fm.

You can access your data using the last.fm API (you’ll need to sign up for an API key, if you haven’t already done so). You get the data by submitting a request (i.e. typing the address in a web browser) to:

http://ws.audioscrobbler.com/2.0/

…and appending a method, your API key and (if you want) a time period.

To get the data about the top artists I listened to in 2010, I used the getTopArtists method:

http://ws.audioscrobbler.com/2.0/?method=user.gettopartists
&user=denituthered&period=12month&api_key=myAPIKey

This returns the data as XML, which looks something like this:

<lfm status="ok">
  <topartists user="denituthered" type="12month"
page="1" perPage="50" totalPages="12" total="596">
    <artist rank="1">
      <name>Left Lane Cruiser</name>
      <playcount>179</playcount>
      <mbid/>
      <url>http://www.last.fm/music/Left+Lane+Cruiser</url>
      <streamable>1</streamable>
      <image size="small">http://userserve-ak.last.fm/
      serve/34/13235587.jpg</image>
      <image size="medium">http://userserve-ak.last.fm/
      serve/64/13235587.jpg</image>
      <image size="large">http://userserve-ak.last.fm/
      serve/126/13235587.jpg</image>
      <image size="extralarge">http://userserve-ak.last.fm/
      serve/252/13235587.jpg</image>
      <image size="mega">http://userserve-ak.last.fm/
      serve/500/13235587/Left+Lane+Cruiser+LLC.jpg</image>
    </artist>

    <artist rank="2">
      <name>Otis Taylor</name>
      <playcount>165</playcount>
      […]
    </artist>

    <artist rank="3">
      <name>Black Stone Cherry</name>
      <playcount>165</playcount>
      […]
    </artist>

  </topartists>
</lfm>

Get the data ready for Google Spreadsheets

I wanted to get my data into Google Spreadsheets to use the visualisation tools. However, XML isn’t a supported file format in Google Spreadsheets, so I couldn’t just throw my XML file up there and start visualising. So, I needed to turn my XML into a format suitable for Google Spreadsheets, such as a CSV file.

You can do this with some recent versions of Excel or other Office tools. I needed something free and used Google Refine. It’s handy for cleaning up data and exporting data into different formats.

I opened the XML file in Google Refine and deleted some of the extraneous columns and rows leaving just the following fields (as column titles):

• Rank
• Artist
• Playcount
• Image URL

I then saved the data as a CSV file and uploaded it to Google Spreadsheets. Here’s the file.

Visualise the data

To get the basic layout of the visualisation I created a tree map. In Google Spreadsheets:

1. I selected the required data fields (Artist and Playcount).
2. Chose Insert > Gadget > Tree Map Gadget.
3. Placed the tree map in a new sheet.

View full size image (png, 66kb)

The tree map recalculates itself when you change your browser window dimensions. I wanted to make a visualisation with dimensions approximately A4 landscape, and changed the window dimensions until I got a tree map layout that felt right.

Overlay the photos

I took a screenshot of the tree map, opened it in Pixelmator (any image editor will do) and then increased the image dimensions by 50% to create a larger image to work with.

The last.fm data contains URLs for image files. I did use some of these though, where there were odd shapes in the tree map, I looked around for suitable images that would work well in extreme letterbox or elongated shapes.

The final stage involved getting the photo for each artist and cropping the photo to the same dimensions as the underlying shape in the tree map.

So, I started with Left Lane Cruiser and Otis Taylor at the top left of the visualisation and then worked my way through the other artists.

This is the final result:

Here’s the finished visualisation (jpg, 1.6mb) | View on flickr

Carefully posted on 3 January 2011 at 8:24 pm
Filed under Analytics
Tagged with Data, Infographics, Lastfm, Visualisation

Add a comment
Comments RSS
Trackback URL