Analyzing Your Music Trends Over Time
Spotify API
Using d3.js
Project overview
In a team of two, I developed and designed an end-to-end platform to help Spotify users see how their music preferences have changed for artists and tracks over the past year.
Role
Data Analyst
Front-end Developer
UI Designer
Responsibilities
Data scraping & Visualization
Data Interactivity
UI layout and styling
Testing
Remote team coordination
Tools
VS Code
d3.js
HTML/CSS
Java Script
Github
Timeline
Mar- May 2025
Working Site Preview
Background
Trisha wants to know which songs she used to listen to!
Which artists were the most popular in her listening journey
If she stopped listening to certain tracks/ forgot about them
To reconnect with the patterns of how her taste has changed over the year
Opportunity
We witnessed that most of the users wanted to reminisce in the songs they once listened to, or reconnect with artists, and were genuinely curious about their listening journey. So we used the platform that was most widely used with a WEB API available.
Goal
Provide personalized music insights for Spotify users over the last year.
Analyze top tracks and artists from short, medium, and long term.
Help music listeners rediscover lost artists and tracks.
Utilize Spotify data for accurate insights.
How might we statement
How might we develop a personalized, authenticated web platform that allows Spotify listeners to gain insights through interactive visualizations of their music history?
Ideation
We started drafting some brainstorming ideas to display the data we had access to through the API. I realized that we had to cut down some of our initial ideas due to a lack of access to music analysis on Spotify, which was deprecated recently for privacy notices of users.
Idea
Generate Playlist based on mood input
Lyrics on the song selected and have an option to play
Info about the song such as genre and rankings
Limitations
Could not analyze moods for songs due to no access to lyrics
For playing, we had to integrate a link that takes them to spotify
Idea
Time capsule based on the data that could be scraped
A Sankey diagram to show the songs that were left off in their journey
Visibility of artists and their popularity
Limitations
Only a year-long data was available
Could not get a popularity score for artists that were not added to the users' account
Zoomed-out Ideation
I then suggested to keep dummy data on the landing page for the user to see what the visualization would look like and then they could connect their own accounts to get a personalized visual for their Spotify accounts.
Iteration 1
An initial version of the Sankey with a placeholder for connecting to one's account. We have the top three artist rankings for each short, medium, and long term.
Iteration 2
We allowed a filter for the Sankey with respect to the track or the artist to see both domains. We then tried making a scatterplot of the popular artists played, but this was prone to overlapping.
Iteration 3
We added a grid for the artists based on popularity score, added cards to display artist/track information like their Long/Short/Medium term ranks. We also added a small info section to get an understanding of what the page is made for.
Visual Layout features
Design
We applied a dark mode feature for the final design based on the color scheme of Spotify. We also used cards for artists and images to get a sense of the content displayed without further interactions.
Dominant dark mode background
Interactivity
We tried to reduce the need for back-and-forth clicking by applying hovering features that allowed the showcase of tooltips and helped users navigate easily.
Testing
We had a limit of 25 users and tested some of them to know of any bugs on the website. We asked them for any suggestions or difficulties they faced while navigating the visualization.
Methods
Surveys
Feedback
The Sankey made it difficult to choose between two lines that were close to each other.
Users faced some understanding gaps during onboarding.
There was a suggestion for playing the song directly through the platform
Changes made
What we would do differently
I would try integrating a separate source for lyrics or playing of the track to help users have a more fulfilling experience
I would also have a better interaction to discover artists and their tracks in case the user wants to listen to more tracks, similarly for tracks of the same kind.
Working with technical Constraints
Working with limitations was difficult as we had to try to deliver something the user would be engaged with and find helpful.
Having these constraints made us think out of the box to provide a visual that is fun to interact with and still holds all the data.
Working with development and having control through only code was new and provided me with more freedom.
