Visify

Explore your music taste on Spotify using an aesthetically pleasing force directed graph that categorizes your liked songs by genre

Comment

Inspiration

Our love of music inspired us to explore ways to find new insights into our music preferences by visualizing them.

What it does

Our website takes the user’s liked songs and playlists from Spotify and creates a 3D graph that provides data-driven insights into these tracks and recommends similar new tracks. Finally, the colors convey how much a song can help one getaway by dancing away your worries.

How we built it

This app is built in a frontend-backend architecture, with the standard OAuth third-party authentication service from Spotify. The web frontend employs HTML/CSS along with WebGL and ThreeJS to provide data visualization and a modern user interface; the backend server uses NodeJS with Express to provide support for our own web application and our own APIs the frontend uses. As expected, making a purely data-driven insight into music tracks is a tough task: not able to find any satisfying existing algorithms and libraries, we decided to spend a huge amount of effort to design our original algorithm that works well. Inevitably, our algorithms would require large amounts of data and relatively complex computation, so we utilized modern JavaScript’s event system to perform asynchronous and functional programming to optimize the performance. After we finally tackled the algorithm and the implementation, we polished our projects in detail to make the experience smoother.

Challenges we ran into

Spotify Limitation

The Spotify API only allows manually adding up to 25 users for our current status, so it is a bit inconvenient to perform testing. But we solved it by refreshing and using access tokens manually.

OAuth Authentication

As the OAuth authentication requires the Spotify server to send requests to our server, so we cannot use our device as the development server. To tackle this, we set up an AWS cloud server to perform tests.

Algorithm

Our biggest challenge was figuring out how to convert the high dimensional vectors with all of the feature statistics that Spotify provided us into something that humans could intuitively understand and also be correct from a data level. We tried so many dimensionality reductions and clustering algorithms (we even tested out almost an entire library) but eventually landed on our original algorithm based on vector similarity and connectivity.

Performance

As visualizing thousands of tracks requires a large amount of computational power, optimization is crucial to user experience. The data gathering and computation can take up to several seconds. To make it better, we used asynchronous programming and an event system to take advantage of NodeJS’ event system, eventually proving a better performance. Also, to further improve our user experience, we added a progress bar when polishing.

Accomplishments that we're proud of

We're proud of how aesthetically pleasing our website is: we took a long time to decide on our current display, with its color, number of nodes, size, zoom, rotation, etc...

But we were even more rewarded when we realized that our graph was something that was intuitive for humans to understand! For example, we were pleased when our algorithm was able to detect that two songs were in Japanese. This was revealed when two songs were seemingly randomly far away from the rest of the songs. Upon exploring the titles of these, we realized that they were in a different language. Other interesting patterns, such as genre recognition, also emerged.

Furthermore, this means we have discovered a way to effectively model a person’s music preferences. Based on this purely data-driven model, we see a huge potential in the future that our platform can act as a basis for many applications that need this insight into music preferences: for example, we’re thinking about a social app that matches people with similar music taste together, and with our platform, this is easily achievable.

What we learned

We learned a lot about the OAuth authentication process, such as how it works, how to use it, how to implement it, and also why it is required to be secure. We learned a lot of data algorithms such as dimensionality reduction and data clustering. We also learned how to use ThreeJS to visualize data.

What's next for Visify

In the future, we would love to expand our application to more users. Currently, the Spotify API limits the number of access tokens (max 25) they provide for non-commercial projects. Thus, we are unable to allow numerous users, but if we were to take on this project in the future, we could commercialize it as a platform mentioned above, and maintain more users. We would also add more ways to visualize the data, such as adding pertinent information about each song when it was clicked. Building upon this, we could also recommend activities to do while listening to each song by coloring the graph by the feature that each song excelled in the most. We could also drastically improve our algorithm by applying much more powerful modern machine learning based on big data.

Share this project:

Updates