SpotCharts

Visualize your music taste like never before with SpotCharts - the app that turns your top 50 Spotify artists into an interactive bubble chart

Comment

Inspiration

The inspiration for SpotCharts came from my deep passion for music and my fascination with the power of data visualization. I was drawn to the idea of creating an application that could take a user's Spotify data and translate it into a unique and captivating visual experience. While the annual Spotify Wrapped is a great way to reflect on one's listening habits, I wanted to create something even more expressive and personal -- something that could tell a story about someone's tastes in music over time by simply using a visual that could be shared with the world.

What it does

SpotCharts is a web application that allows users to visualize their top 50 Spotify artists in a proportional bubble chart. Users can log in to their Spotify account, authorize the app to access their data, and then see their top artists represented as bubbles, sized based off of listening time (larger bubbles for artists with more listening time and vice-versa).

How I built it

I built SpotCharts using Python Flask for the back-end, D3.js (a javascript package that handles data visualization) and html/css for the front-end, and the Spotify API for data retrieval and user authenication. The python script authenticates the user using tokenization and writes their data into a dictionary, which is fetched by the javascript and used to create the bubble-chart display. There's also a loading screen.

Challenges I ran into

  1. Sizing: I Initially wanted to size the bubbles based off listening time in hours/minutes, but couldn't find a good way to get that data since the Spotify API doesn't allow you to. Instead I sized them based off of their rank in the user's top 50 artists (which was based on the listening time for each artist).
  2. User Login: The authentication process took a long time to figure out as I had never done a project like this before. I learned the whole process of recieving a user code and requesting a token, then using that token for the application to make it specific to a user.
  3. Data Storage / Time: The process of storing the data into a dictionary and recieving it on the front-end side proved to take a while, around 5-10 seconds. I realized that this was not very optimal and tried to find workarounds. In the end, I added a simple loading screen during the processing stage to make it feel less time heavy.
  4. D3.js: D3 is a huge library with tons of support for different visualizations. I found it a little overwhelming at first but was able to narrow my implementation down to the parts I wanted. Find the right animation proved to be a very long process.

Accomplishments that I'm proud of

I'm very proud of the way this project turned out, as it's exactly what I envisioned. I was satisfied with the bubble chart visual, and am glad I could figure out how to size the bubbles using a similar metric. I felt most accomplished after I was able to retrieve the artist images as svg's and actually display them in the chart, as well as when I created the ease-out flower animation. That was really cool.

What I learned

Through building SpotCharts, I learned how to work with the Spotify API, how to create an interactive data visualization using D3.js, and how to optimize data retrieval. I also learned how to implement a python back-end using flask and how it interacted with the javascript html css front-end using routes and requests on the server.

What's next for SpotCharts

I intend to contact the Spotify Developer Team to obtain a commercial license for my software and extend its impact among Spotify users. In addition, I plan to introduce new features, such as a hover animation to display the bubble's artist name, rank, and top songs on users' playlists. I also aim to integrate a filter by genre feature and randomize the bubble chart sizing for a more personalized experience. Furthermore, I am interested in exploring monetization opportunities for SpotCharts through partnerships with music companies like Spotify, who could leverage the visualizations to engage their user-base.

Built With

Share this project:

Updates