SPOTIFY DATA VIS PROJECT

PROJECT SUMMARY



This project was part of the Emerging Media Graduate class at Kutztown University in the fall of 2016. Our first project was a Data Visualization / Infographic. We could produce something digitally or printed as long as it was partly connected to "emerging media" (creative code, database, generative processes). Project steps included:





INITIAL IDEAS



What data will you visualize?


I would look at user-created playlists on Spotify and determine the most popular songs for each genre of playlist. For example, what is the top song on “workout” or “gym” playlists? What is the top song on “meditation” or “calming” playlists?


Where you will get the data?


Hopefully the Spotify API. I could also try the last.fm API if that doesn’t work.


The tools/process used (software to capture/parse/visualize)


I would like to incorporate some fun D3.js effects.


The final display of the piece


It would live in a webpage, but it would be awesome to be able to incorporate some sort of dial that users could turn to scroll through the information. Or touch screen maybe?


Necessary technology: print/interactive/physical/combo


Interactive


Why is this concept unique?


This would be able to show the “best” (or most popular) songs for a given environment (like a workout, bike ride, long commute, etc). Spotify itself creates playlists for these situations, but employing user-created playlist information would show what people actually find effective or most enjoyable.


What you need to learn to build this


D3.js, how to use API information, maybe some other Javascript

DEVELOPMENT & CHANGES


Revised project idea:


Create an interactive visualization of the most popular songs for specific environments or situations (like a workout, long commute, etc). Spotify itself creates playlists for these situations, but employing user-created playlist information would show what people actually find effective or most enjoyable. I will look at user-created playlists on Spotify and determine the most popular songs for each type of playlist. For example, what is the top song on “workout” or “gym” playlists? What is the top song on “meditation” or “sleeping" playlists?


Where you will get the data?


Spotify's API - https://developer.spotify.com/web-api/


How you will access the data:


Plan A is to make it live, but Plan B is to capture it in a file.


How you will visualize the data:


The "top 5 songs" will be visualized in a chart of some sort to show which songs are the most popular, second-most, etc. for each given category.


The final form of the data:


I would love for this to be a combination of website and physical. Plan A is to make it a combo, Plan B is just a really nice web piece.


What software, hardware, libraries, websites, etc you plan to use:


Spotify and Spotify's API, HTML/CSS/Javascript/JSON, Maybe Chart.js


What do you need to learn to make it happen:


How to get the data I need from the API and then how to code it to display what I want. If I go the physical/web combo route, I'll need to learn how to make a physical thing talk to a web thing (haven't done that before).

A sketch (hand or computer) of the proposed project:


This is just my visualizing the steps a user would take, but I don't love the pie chart idea yet since that's kind of boring. The bottom half (great guitar drawing, I know) shows what would be a life-size or larger guitar (cardboard, plexi, something like that) with a giant pick that could be used to play each song by plucking the coordinating string. This might be really stupid or really fun or really impossible given the time we have.



Developments



Some major developments on my data search:

I was making progress working with the API and found a way to do 2 separate searches to first find user playlists and then to find the tracks on their playlists. Phil was trying to help me sift through it and tried searching for "spotify data mining" and somehow that magic Google search brought us this:

Spotify Playlist Miner

That is exactly what I was trying to do. It allows you to type in a keyword, and it generates every single playlist that includes that keyword then shows the top 100 tracks in that list.

It still doesn't seem to allow me to play the tracks, so I would have to figure that out. Basically I need to know if this is now a bad idea because it kind of already exists, or if it's great.



Verdict: This is very helpful and the project can still be great.



Initial Mockup


Now that the tool I needed to create is already created for me, I need to find a compelling and interactive way to display my data. It’s a challenge to do this, but here is my first attempt at a possible look/feel and functionality for the piece.



I started with a simple bar graph just to wrap my head around how this might work, but thought the idea of a “donut graph” would be more visually appealing and could be used in other graphic elements like music notes, records, guitars, etc.



FINAL PIECE




For the final piece, I used the Donut Chart from Chart.js to create the 6 charts. I gathered the data (100 tracks for each playlist type) and used Spotify to get the track code for each one. Using Excel, I was able to cross reference which tracks were on multiple playlist types.



Professor Miller was then able to help create the code to connect the cross-referenced tracks using SIN, COS and creating a div upon clicking on certain coordinates. This part was beyond my ability, so having Professor Miller's help was key in achieving this portion of the chart.





Professor Miller also helped me to connect the Spotify play button to each track upon clicking. This allows a user to listen to each song if they are signed into their Spotify account.



For the gallery opening, I was logged into Spotify, so anyone could click on a song to hear it. We projected the website on the wall and people enjoyed interacting with it and seeing which songs were most popular in each category. I was very pleased with the final result and enjoyed seeing people's reactions to it, since music is such a universal interest.

BACK TO TOP