Working with Data – ICM week 8

Working with data is pretty fun.  Trouble is, there’s just too much of it!  I looked through maybe 20 different data sets, ranging from historic climate conditions, to school test scores, to satellite and planet positions, but coudlnt’ settle on what to actually do with any of those data sets.  Many of these data sets had an api, but most were so poorly documented that I coudlnt’ wrap my head around how to actually grab the data I wanted.  After struggling for half a day trying to get historic climate data from NOAA, I gave up and decided to find a well documented API.  I stumped across The Echo Nest ( which provides a super well documented, pretty complete API for getting musical artist information including songs, popularity rankings, instances of media relating to a song or a band, and a whole host of other musical information.  Bingo.

So I ended up building a musical artist comparison tool.

Click here for the sketch! and Here for source code

Echo Nest utilizes a library that analyzes songs for different characterstics – energy, danceability, how acoustic the song is, and a bunch more metrics.  I created a tool that allows the user to search for a band and get an overall feel for how the band scores on these characterstics.  The sketch averages the scores for each characterstic across up to 100 songs for a particular artist.  If the user searches for a second artist it will overlay the results of the two searches on top of each other.  I’ll admit after it was all built and working I wasted WAY too much time comparing any polar opposite bands I could think of: Beyonce and Nick Drake, Radiohead and Michael Jackson, Metallica and Paul Simon.  Pretty interesting.


There were definitely a few wrinkles to work through to get this to function smoothly.  The first issue was just figuring out how to get the data I wanted from the API.  This meant just reading through the API and trying queries until I figured out what worked.  At first I just wanted to search for an artist, but I realized that it’s almost impossible to get an exact match based just on the artists name.  Echo Nest gets around this by assinging each artist a unique ID, so I had to figure out how to create a bunch of buttons – each one referring to one of the artists that came back from the API query.  Creating the buttons was relatively simple, just loop through the results and create one for each artist.  Figuring out which artist was tapped was a bit trickier.  It’s easy enough to identify which button was tapped, but how does the button that was tapped relate to the data I got back from the query?  What I ended up doing was in the callback for tapping the button, I’d get the inner HTML of the button (i.e. the exact artist name), then I’d compare the name against the array of the artists to find the object in that the user wanted.

Once I had the exact artist object that the user selected, I’d get the artist ID (ensuring an exact artist match) and query the Echo Nest API again to get a list of the artists songs ordered by song popularity.  Annoyingly the song data would come back with tons of duplicates, so I had to devise a way to remove the duplicates otherwise the results would be skewed.  The javascript method indexOf() was a big help here.  If an item is contained in an array, indexOf returns it’s index, otherwise it returns -1, so I created a new array to hold the non-duplicates, and everytime a song doesn’t exist in the new array, I’d add it.

I did some basic averaging of the characteristics from each song, then drew them on the screen.



This project evolved pretty naturally through exploration and playing.  Once I started getting artist data back, but before I had figured out how to get all the song data and create any visuals, I went looking for other music visualizations.  And I found some really interesting stuff.

Links for examples:

Leave a Reply

Your email address will not be published. Required fields are marked *