Map of Music Styles

I spent this weekend at Rethink Music Hackers’ Weekend building a music hack called Map of Music Styles (aka MOMS).  This hack presents a visualization of over 1000 music styles. You can pan and zoom through the music space just like you can with Google maps.  When you see an interesting style of music you can click on it to hear some samples of music of that style.

It is fun to explore all the different neighborhoods of music styles. Here’s the Asian corner:

Here’s the Hip-Hop neighborhood:

And a mega-cluster of ambient/chill-out music:

To build the app, I collected the top 2,000 or so terms via The Echo Nest API. For each term I calculated the most similar terms based upon artist overlap (for instance, the term ‘metal’ and ‘heavy metal’ are often applied to the same artists and so can be considered similar, where as ‘metal’ and ‘new age’ are rarely applied to the same artist and are, therefore, not similar).  To layout the graph I used  Gephi (Its like Photoshop for graphs)  and exported the graph to SVG.  After that it was just a bit of Javascript, HTML, and CSS to create the web page that will let you pan and zoom. When you click on a term, I fetch audio  that matches the style via the Echo Nest and 7Digital APIs.

There are a few non-styles that snuck through – the occasional band name, or mood, but they don’t hurt anything so I let them hang out with the real styles.   The app works best in Chrome. There’s a bug in the Firefox version that I need to work out.

Give it a try and let me know how you like it:    Map of Music Styles

, ,

  1. #1 by markmakingmusic on April 22, 2012 - 12:51 pm

    Man, I’m really glad I saw your talk @ NYU in February. I am a big fan of your work! Awesome new app.

  2. #2 by Jer White (@afront) on April 22, 2012 - 1:00 pm

    Amazing! I’m gonna spend hours on there following the threads…

  3. #3 by SuperMeow Records (@AronBlue) on April 22, 2012 - 5:39 pm

    It’s very, very, very cool! there were some glitches: I had some scrolling issues, even in chrome. the scroll bar tended to disappear. and sometimes you couldn’t see the band name as the example of the genre. i really enjoyed going through it, though.

  4. #4 by Stephen Baggaley on April 22, 2012 - 11:01 pm

    A fascinating idea, and it certainly covers a wide range of music styles. However, the absence of classical music, world music and jazz limits its relevance to people like me whose music interests are very broad.

    Having said that, of course some of the music samples that crop up in unlikely places fall within the ambiguous category of classical.

    Any chance of expanding the map further?

    • #5 by Paul on April 23, 2012 - 6:21 am

      Stephen – look harder! There’s jazz, classical and world music in the graph. The music coverage is driven by popularity, so there’s more coverage of pop and rock, but there 10 so classical styles in the map. There are 30 or more Jazz related styles (look for the cluster on the right of the graph), and quite a bit of world music too, with region specific clusters like Japan, France, Norway scattered throughout along with a cluster of ‘world music’ near the bottom.

  5. #6 by Clement on April 23, 2012 - 8:00 am

    Very cool. You could check for another viz app of your gephi file. The author of can easily be reached on Twitter @jacomyal

  6. #7 by Clement on April 23, 2012 - 8:03 am

    Hi, great viz. You could have a look at for an alternative way to visualize your gephi file in javascript. If support is needed, the creator of sigmajs can easily be reached on twitter @jacomyal

    • #8 by Paul on April 23, 2012 - 8:19 am

      clement – great tip! Will give it a try when I have a chance! — Paul

  7. #9 by Matthew Hawn on April 24, 2012 - 5:19 am

    Awesome map, Paul! Are you using tag data to help fill in some of the 1000 tags/genres?

  8. #10 by Teo Oliver on April 25, 2012 - 3:13 am

    I really liked, this is perfect! Can i repost this in my blog? Of course, i will give all your credits and the link to this site. (Its a Brazilian blog that talks about music, art, culture.)

    • #11 by Paul on April 25, 2012 - 5:05 am

      Sure thing

  9. #12 by Fernando on April 26, 2012 - 4:20 pm

    Great idea but why don’t you go back further in time? What happened to jazz, blues, billyrock, reggae, cajun, dixie, big band – what about pop music of the 1900-1920’s – what about classical music? This map is like showing New York as the subway system without realizing that it is connected to an external city. Still cool though if you’re 30 and under. All this stuff came from somewhere even further back. Your map only shows the top layer.

    • #13 by Paul on April 26, 2012 - 6:30 pm

      Fernando – Jazz, blues, rockabilly, reggae, classical, big band are all on the map. You just need to look a bit harder. The genres are picked based on today’s popularity. Dixieland isn’t in the top 1,500 styles. Someday I’ll expand it out to more than 1,500 styles.

  10. #14 by teolizoli on May 5, 2012 - 2:11 pm

    Posted! A hope you like, in the begining i put “via machinery” and all the credits are in the final part…if something is wrong tell me so i can fix it! Thanks!

    • #15 by Paul on May 5, 2012 - 10:06 pm

      Looks great.

  11. #16 by Yogi on May 15, 2012 - 5:46 pm

    Paul regardless of the some what critical feed back i think that this was a great idea and i am quite sure that someday you will expand your selection I would like to use this in a presentation giving your credits where most certainly due if you don’t mind. Believe me this will help me out a whole lot.

  12. #17 by ezequiel on May 20, 2012 - 6:10 pm

    hi, paul nice visualization. I´m trying to make some datavisualization on music. You get the database via The Echo Nest API. I want to use a database with songs and cover to link each other. Could you recomend me where could I get a free music database o any clue on how to reach this kind of data.

    Thanks in advance

    • #18 by Paul on May 20, 2012 - 8:10 pm

      I used the Echo Nest APIs to gather all the data used in the visualization. You can do the same. The Echo Nest API is free for non-commercial use. — Paul

%d bloggers like this: