Working with D3 Interpolation on Spotify Charts

February 2, 2014

I spent most of last week working on a new version of the Spotify charts site, and one of the things I did was play around with visualizaing some of the data from the public API. What I wanted to do was to display chart position over time, similar to Paul Lamere’s Awesome Chart Explorer, which you should check out.

I started by dumping all of the data from the Spotify charts API into a static JSON file. You can look at the script that does that here. In the future, I would want to write something that does this dynamically, but for now it is fine to just have a static data dump.

Next up was creating the line graphs with D3. There are a lot of great tutorials if you are interested in learning the D3 basics. I highly recommend reading the alignedleft D3 tutorial, or looking at some of the examples on bl.ocks.org.

This project involved testing a number of the different interpolation functions built in with D3. Interpolation, put basically, is the method of computing unknown points or values surrounding known points or values. What that means in this particular case is that the interpolation function is responsible for drawing the lines that connect the different points that represent chart positioning in a specific week. We are going to look at four functions; basis, cardinal, linear, and cubic monotonous.

A common interpolation function is the ‘basis’ interpolation function. This is great for drawing smooth graphs – check out this example, for instance. While basis interpolation draws smooth lines, it does not guarantee that the lines will intersect with the points that make up the line’s foundation.

Basis interpolation

Notice that with basis interpolation, the lines don’t pass through the points. For this type of visualization, this isn’t the desired behavior.

Cardinal interpolation

Cardinal interpolation is a bit better: it passes through all of the points, but there are still some weaknesses; when a track changes positions rapidly, the line will appear to overcompensate for that. Look for example, in the top right corner.

Linear interpolation

Linear interpolation, as you might expect, simply connects the points togther. This is certainly the most accurate, if the least stylistically interesting.

Cubic interpolation (preserving monotonicity in y)

Cubic monotonous interpolation seems like the best candidate. While it maintains the relative accuracy of the linear interpolation, it has more stylistically interesting curves.

Choosing an interpolation function certainly depends on what the data being displayed are, and if the underlying points are a critical element. In this particular case, we want to display the movement of the line between the different points on the graph, so we can’t use the basis interpolation function. Ultimately, I decided to use the cubic monotonous function; the rapid rise or fall of a track disrupts cardinal interpolation, and linear interpolation is very choppy and stylistically interesting. Cubic monotonous gives the right balance for this project.

Finally, I also wanted to make the charts interactive, so I added a simple click listener to the SVG circle; clicking it opens an info box on the right with stats about the track and links to the Spotify web player. You can check out a mock up of the fully interactive version here. Let me know what you think!