I’ve made a data visualisation 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. This post walks you through my process to create the image.
- Get the listening data from the last.fm API.
- Turn the data into a form suitable for importing into Google Spreadsheets.
- Visualise the data in a tree map.
- Overlay the photos on the tree map.
Get the listening data from last.fm API
You can access your data using the Last.fm API. (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:
…and appending a method, your API key and (optionally) a time period.
To get the data about the top artists I listened to in 2010, I used
This returns the data as XML. It looks something like this:
<lfm status="ok"> Left Lane Cruiser 179 http://www.last.fm/music/Left+Lane+Cruiser 1 http://userserve-ak.last.fm/serve/34/13235587.jpg http://userserve-ak.last.fm/serve/64/13235587.jpg http://userserve-ak.last.fm/serve/126/13235587.jpg http://userserve-ak.last.fm/serve/252/13235587.jpg http://userserve-ak.last.fm/serve/500/13235587/Left+Lane+Cruiser+LLC.jpg Otis Taylor 165 ... Black Stone Cherry 165 ...
Prepare the data for Google Spreadsheets
I wanted my data in Google Spreadsheets so I could use Google’s visualisation tools. However, XML isn’t a supported file format, so I couldn’t just throw my XML file up there and start. I needed to turn my XML into a format suitable for Google Spreadsheets, such as CSV.
You can do this with recent versions of Microsoft Excel or other Office tools. I needed something free and used Google Refine. It’s useful for cleaning data and exporting to different formats.
I opened the XML file in Google Refine and deleted the extraneous columns and rows, leaving the following fields (as column titles):
- Image URL
I then saved the data as a CSV file and uploaded it to Google Spreadsheets (see the file).
Visualise the data
To get the basic layout of the visualisation I created a tree map. In Google Spreadsheets:
- I selected the required data fields:
- Chose Insert > Gadget > Tree Map Gadget.
- Placed the tree map in a new sheet.
The tree map recalculates itself when you change your browser window dimensions. I wanted to make an image at approximately A4 landscape, and changed the window dimensions until I got a layout that felt right.
Overlay the photos
I took a screenshot of the tree map, opened it in an image editor and increased the image dimensions by 50% to create a larger image to work with.
The Last.fm data includes image URLs. I did use some, but where there were odd shapes in the tree map, I searched for suitable images that work well in extreme letterbox or elongated shapes.
The final stage involved cropping the photo of each artist to the same dimensions as the underlying shape in the tree map. I started with Left Lane Cruiser and Otis Taylor at the top left, then worked my way through the other artists.
This is the final result: