Visualizing Audio Features of Spotify Tracks using D3.js

In this article, I am explaining how to visualize audio features of Spotify Tracks using D3.js in an Angular application. These are the top two reasons why am I writing this article:

1. How can you better understand yourself by going deeper into what you like (your saved tracks on Spotify in this case)?
2. How using visualizations can make it easier to spot trends in your choices?

First things first

Without making too many assumptions, let me just give some info about the technology being used in this demo.

• Angular: A framework for building web applications. This framework is built on JavaScript, TypeScript, HTML and CSS.
• D3.js: A library that helps you draw visualizations in data-driven manner.
• Spotify Web API: the API published by Spotify which allows your application to integrate with Spotify.
• Audio Features of a track: These are the characteristics of a song. Just as we can classify/describe computers by their Random Access Memory, and processor, we can classify tracks(songs) by using these features. For example, ‘danceability’ of a song describes how suitable a song is for dancing in terms of numbers.

Overview

My goal is to load audio features of my 150+ saved tracks on Spotify. And then, visualize them using the box plots ( a type of graph to help you understand distribution of values) with the help of D3.js library.

Step-by-step procedure

Step-by-step plotting Audio Features of Saved Tracks on Spotify

1. Load Audio Features
2. Create a <figure> in the template of the component to display the chart
3. Transform the Audio Features to the shape required to draw the box plot. Specifically, we need these numbers and data for each audio feature: quartiles, median, minimum, maximum, and inter quartile range. We also need an array of values for each feature to draw the distribution.
4. Append an SVG element to the <figure>
5. Create an x axis by using scaleBand() function: this takes audio feature names from an array and allocate area to them on x axis.
6. Create a y axis by using scaleLinear() function: distribute the values of an audio feature on y axis. So, it gives the point on y axis where the 0.8 value of danceability is to be plotted.
7. Show the main vertical line.
8. Draw boxes
9. Show median
10. Plot distribution (individual points)

Code Snippets

Conclusion

Box Plots for Audio Features

So, these are the few conclusions that we can make based on such box plot. I like songs with these characteristics:

• Songs with high danceability
• High energy
• Speechiness: More music than words
• loudness between 0 to -10
• Tempo between 80–120 beats per minute
• High versatility in terms valence: can enjoy from happy to sad music with ease.

Now that I have these numbers with me, it is easier to understand why Spotify recommends mixes like ‘House Mix’, ‘Chill Mix’, ‘Latin Mix’ and many others.