Explorify: Visualize Your Playlists

Posted on Nov 6, 2016

The digital age has fundamentally changed the way we consume media, and in particular music.Β But as access Β to music continues to rise, we lose sight of the artists behind the art. To ameliorate this issue I created Explorify: An interactive application to visualize artists, explore track metrics and discover new music. Explorify was made using Shiny.

A recent pollΒ from 2015 shows the trends in how new music is discovered:

Source: Edison Research.

Source: Edison Research.

Internet as a source of music discovery is unsurprisinglyΒ on the rise, while radio and television are declining. Most notably, only in the last 5 years has the main source shifted from radio to internet.

While this shift has many advantages, such as easier access, no advertisements etc., it also comes at a cost.Β With internet radio we lose the visuals of a music video, andΒ the artist's backgroundΒ supplied by radio hosts: Where are they from? What genre of music? Who are their related artists?

Enter Explorify. Β I made Explorify with three goals in mind:

  • Summarize the track features of a playlist
  • Investigate artists in a genre andΒ how they are related
  • Filter large playlists to suit your tastes

Explorify uses the Spotify APIΒ to pull track features, track previews, artist images, artist tags, and the Last.fm APIΒ to pull artist biographies. All plots are made using Googlevis, an R package for creatingΒ Google Charts.

Functionality

When a user runs Explorify, they are taken to a playlist selection page where they can either choose from a list of curated playlists made from Spotify or select their own public Spotify playlist.

screen-shot-2016-11-06-at-10-37-03-am

Playlist selection screen.

Once the playlist is loaded, three pages appear in the sidebar:Β Playlist Summary, Track Features,Β andΒ Artist Network.

The Playlist Summary page displays plots for the playlist track's metrics as defined by Spotify's audio features. These include metrics such as energy, loudness, and tempo. Clicking on individual tracks on a plot will play a preview of the track. Top tags for the artists on the playlist are also displayed.

summary_page

Playlist Summary page from Spotify's 'Rock This' playlist.

The Track Features page allows users to view scatterplots comparing the aforementioned audioΒ metrics. Again, individual tracks can be previewed by clicking on them in the scatterplot. They can also filter selected ranges of metrics, e.g. to include only higher energy tracks. A dynamic table displays the filtered playlist along with track previews and the values of the selected filters.

track_features_page_scatter

Track Features Scatterplot from Spotify's 'Rock This' playlist.

The Artist Network page displays a network of artists, connecting similar artists. Similarity is determined by Spotify's related artist API, which is based on the Spotify's community's listening history. Selecting an artist will show their bio, top track, and tags. Node sizes are determined by how many related artists they have (i.e. the node's degree).

artist_network_page

Artist Network page from Spotify's 'Rock This' playlist.

Challenges

Creating Explorify was a lot of fun and introduced a number of challenges. I briefly outline a few in this section.

Scraping

In order to pull data from Spotify's web API, you need to register a web application to obtain a client id and secret id. You can then use these values to receive an authorization token, as outlined in the following code.

Once a token wasΒ obtained, I created a header value with the token to put in the GET requests that return Spotify data in the form of JSON objects. I used the jsonlite library to convert these objects to R data frames and lists.

For more details, see Spotify'sΒ authorization guide.

Constructing the Artist Network

The most challenging aspect of this project was figuring out how to construct the network graph of artists.

We defineΒ a node in the network to be an artist, and edges connect related artists. Given a playlist's artist, I wanted to exploreΒ them in this network. An issue arises in that some artists may only be indirectly related, or not related at all. This is akin to theΒ sixΒ degrees of Kevin Bacon problem, and traversing the entireΒ network to find connections between all artists would not only be computationally infeasible, it would be a horrific mess to look at.

I solved thisΒ by only one going one degree deep. That is, I created aΒ network usingΒ the set of artists and all their related artists. I then pruned any artists thatΒ only had a single connection in order to retain the most relevant artists in the genre. If two artists in the original playlist are two degrees apart, the common related artist will connect them in the network. If all artists are in the same genre, it seems reasonable that oneΒ would be two degrees away from at least one other. The code to construct the network is given below.

Embedding Audio into GoogleVis

MakingΒ the Googlevis plots interactive requires adding the gvis.listener.jscodeΒ argument to the Googlevis chart functions. The snippet below instructs the listener to send the value of the tooltip (in this case, artist name - track name) to the reactive variable, aptly named "tooltip".

Playing the track preview is then a matter of calling custom Javascript functions when the tooltip variable is changed, as shown below.

Insights

Here a few interesting insights I found when using Explorify.

Spotify's related artists seem reasonable: Let's take another look at the network created by the 'Rock This' playlist:

artist_network_page

It should be noted that in the above network, my favourite bands in high school are all directly connected: The Smashing Pumpkins, RHCP, Radiohead, Nirvana and The Strokes. This gives us (or at least me) some evidence that Spotify's related artist function is doing something right, and that we aren't as unique as we think.

Artist Networks contain subnetworksΒ of different genres: In the 'Today's Top Hits" playlist, I found clusters of artists representing different sub-genres. For example, we see in the top left Drake and the The Weeknd in the rap cluster, while Katy Perry and Justin Bieber are further down in the pop cluster. Similarly, in the "Peace" playlist, I found pockets including jazz, ambient and new age.

Some Spotify audio features seem dubious:Β When exploring tracks with different audio features, I found certain ones seemed inconsistent. For example, the beats per minute were wrong, or more subjective metrics about the mood or "liveness" of the song didn't capture certain tracks. Other metrics such as energy and loudness were more consistent.

Strange Artist Tags:Β I'm not sure where Spotify get their artist tags, but I was surprised to see the number of obscure and strangely specific tags like "contemporary post-bop", "dirty south rap" and "crunk" appearing in the top tags.

I didn't know "crunk" was a music genre.

Top tags for the "Rap Cavier" playlist. I didn't know "crunk" was a music genre.

Conclusion

Explorify is a music exploration app that helps users find new music and explore different genres. Using data pulled from Spotify and Last.fm, users can investigate track metrics like tempo, energy and popularity, as well as learn about artists in an interactive visual space. Javascript queries enable audio previews,Β make the resulting "audio graphs" come alive and delight the user's senses.

Future Work

In the future, it would be great to allow user's to login to their Spotify account so they could see a list of their playlists and select them directly. Also, the number of artists and tracks are limited to Spotify's API rate limit. A future version could allow for longer playlists by making multiple requests.

Finally, a clustering algorithm could be used to identify sub-genres in the artist network.

All code for Explorify can be found on the Github page. Check out Explorify here.

References

About Author

Joshua Litven

Joshua Litven received his Master's degree in Computer Science at the University of British Columbia where he worked on developing parallel algorithms to simulate realistic collisions between highly deformable objects. In practice, this meant watching lots of virtual...
View all posts by Joshua Litven >

Leave a Comment

Explorify: Visualize Your Playlists | Joshua Litven November 14, 2016
[…] out my blog post about it here, or just try it for […]

View Posts by Categories


Our Recent Popular Posts


View Posts by Tags

#python #trainwithnycdsa 2019 2020 Revenue 3-points agriculture air quality airbnb airline alcohol Alex Baransky algorithm alumni Alumni Interview Alumni Reviews Alumni Spotlight alumni story Alumnus ames dataset ames housing dataset apartment rent API Application artist aws bank loans beautiful soup Best Bootcamp Best Data Science 2019 Best Data Science Bootcamp Best Data Science Bootcamp 2020 Best Ranked Big Data Book Launch Book-Signing bootcamp Bootcamp Alumni Bootcamp Prep boston safety Bundles cake recipe California Cancer Research capstone car price Career Career Day citibike classic cars classpass clustering Coding Course Demo Course Report covid 19 credit credit card crime frequency crops D3.js data data analysis Data Analyst data analytics data for tripadvisor reviews data science Data Science Academy Data Science Bootcamp Data science jobs Data Science Reviews Data Scientist Data Scientist Jobs data visualization database Deep Learning Demo Day Discount disney dplyr drug data e-commerce economy employee employee burnout employer networking environment feature engineering Finance Financial Data Science fitness studio Flask flight delay gbm Get Hired ggplot2 googleVis H20 Hadoop hallmark holiday movie happiness healthcare frauds higgs boson Hiring hiring partner events Hiring Partners hotels housing housing data housing predictions housing price hy-vee Income Industry Experts Injuries Instructor Blog Instructor Interview insurance italki Job Job Placement Jobs Jon Krohn JP Morgan Chase Kaggle Kickstarter las vegas airport lasso regression Lead Data Scienctist Lead Data Scientist leaflet league linear regression Logistic Regression machine learning Maps market matplotlib Medical Research Meet the team meetup methal health miami beach movie music Napoli NBA netflix Networking neural network Neural networks New Courses NHL nlp NYC NYC Data Science nyc data science academy NYC Open Data nyc property NYCDSA NYCDSA Alumni Online Online Bootcamp Online Training Open Data painter pandas Part-time performance phoenix pollutants Portfolio Development precision measurement prediction Prework Programming public safety PwC python Python Data Analysis python machine learning python scrapy python web scraping python webscraping Python Workshop R R Data Analysis R language R Programming R Shiny r studio R Visualization R Workshop R-bloggers random forest Ranking recommendation recommendation system regression Remote remote data science bootcamp Scrapy scrapy visualization seaborn seafood type Selenium sentiment analysis sentiment classification Shiny Shiny Dashboard Spark Special Special Summer Sports statistics streaming Student Interview Student Showcase SVM Switchup Tableau teachers team team performance TensorFlow Testimonial tf-idf Top Data Science Bootcamp Top manufacturing companies Transfers tweets twitter videos visualization wallstreet wallstreetbets web scraping Weekend Course What to expect whiskey whiskeyadvocate wildfire word cloud word2vec XGBoost yelp youtube trending ZORI