top of page

Learn Your Music Taste

Teammates: 4 UX Designers who are passionate about music
Duration: 4 weeks
When: Dec 2019
Deliverables: Webpage with interactive visualizations

An information visualization project that helps the users to explore their music taste. 

 

Through our fully interactive visualizations, we guide the users to deepen their understanding of why they like the music in their playlist and to use this knowledge to help them better locate the music they might prefer in the future.

nadine-shaabana-U_z9Y0rEIJc-unsplash.jpg

Have you ever wondered how Spotify recommend songs for you?

mariachi.png

Seeds

Artists/Genres

tempo.png

Audio Features

Danceability/Liveness/Tempo, etc.

movement.png

Popularity

Playtimes

For details, visit Spotify API documentation page: https://developer.spotify.com/discover/

I understand genres and popularity, but what are these audio features?

Spotify creates four feature categories and calculate/assign numbers to these features for each track:

  • Mood: Danceability, Valence, Energy, Tempo

  • Properties: Loudness, Speechiness, Instrumentalness

  • Context: Liveness, Acousticness

  • Segments, Tatums, Bars, Beats, Pitches, Timbre, and more

BUT,

these terminologies still don’t resonate with me…

How can we help?

How can we help users to understand the features of the songs they like?

How can we help users to understand why they prefer the songs they added in their playlists?

​

​

Our solution

We believe communicating the information through visualizations, and more importantly, through visualizing information that is relevant to users can help them to better understand the components.

​

​

Technical implementation

Spotify API to get data from user’s playlists

Altair and D3 to code the interactive visualizations

HTML/CSS/Javascript to build the web page

A Video Demo

It’s LIVE! Try it with your Spotify account.

  1. Go to this site and click on “enable log in”

  2. Log in with your own Spotify account, we won’t collect any of your private data

  3. Wait a few seconds and check your data visualization

*Note: due to the limit of loading time, only the genre part and the sample exploration part are using the real-time data, the rest of the parts are made in Altair, which is using a built-in data

bottom of page