Data Visualisation with 1 Billion Shazam Music Recognitions

Umar Hansa
Jul 18, 2017 · 7 min read
Shazam’s in San Francisco

What is a ‘Shazam recognition’

Think of a Shazam recognition like this. You open up Shazam, the mobile app, and have it ‘listen’ for a piece of music that’s playing in the background. A recognition is the successful identification of the song.

Location data

A user may opt-in to sharing their location data with Shazam. Shazam then makes some of the anonymised location data (latitude and longitude) available to employees, depending on their use case.

The visualisation

One thing you need to know, all visualisations follow this idea: One dot represents one successful recognition. Dots are plotted onto a geographical coordinate system. This is not the same as taking a Google Map and then plotting location markers over it.

Chicago, London, New York, Full
Zoomed into New York
  • iOS: Blue
Chicago, Los Angeles, New York, United Kingdom

Interactive Maps

I thought it would be fun to visualise the map interactively. In the same way you would drag/zoom on a Google Map, what if you could also drag/zoom a Shazam map? This element of interactivity is what encourages people to use, explore and learn from the maps. Rather than just being something static that you never revisit.

The code

Like with everything I do, I’m only benefiting from hard work done by others in our community. All credit goes to Eric Fischer for their excellent work on datamaps. If you follow the instructions on that Github repository, you’ll be able to make your own visualisations. You’ll need a dataset consisting of longitude and latitude points, you might find something on Github, for example, awesome-public-datasets.

csv.fromStream(stream,{headers : true}).on(‘data’, handleRecord);
function handleRecord(record) {
const location = tag.location.latitude + ‘,’ + tag.location.longitude;
console.log(location);
}
lat,lon-22.1028,166.183329.8075,-95.411351.2168,-0.804527.3007,-82.522120.5743,-100.3793-36.0451,146.926726.7554,-81.4237
./render -A -- output 14 51.641353 -0.447693 51.333508 0.260925 > london.png
Data structure to render all maps

Presenting

At Shazam, there were multiple hack days. Then after a few months, was a demo day. You presented your hack day work on the demo day. Showing folks this particular project was well received.

High resolution images of the data maps

Note: You can zoom into these images with the Google Photos interface

Conclusion

I’m grateful to Shazam for encouraging us to learn new skills and technologies. Also thanks to Eric Fischer for developing the datamaps project in the first place! If you have access to location data, consider the many interesting ways of visualising it. You could also try using Tweets from the Twitter API, just make sure they have location data attached to them.

Want to see more like this?

Follow me on Twitter: @umaar and let me know! I try & tweet out lots of web development resources.

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead

Umar Hansa

Written by

Video Course: https://ModernDevtools.com, Weekly gifs in your inbox https://umaar.com/dev-tips/, useful resources: https://twitter.com/umaar

freeCodeCamp.org

This is no longer updated. Go to https://freecodecamp.org/news instead