The Design Process: Ludovico Einaudi Streaming Visual
October 17, 2020
Last week, I created my very first chart made completely in D3.js. Yay! 🎊 Before it came to life though, I iterated at least a few dozen times. This is what this article is about—the ins and outs of the data design process. It follows the structure I defined last summer for a book; you may want to take a quick look at it here before you move forward.
This step is not in the design process, but I just wanted to quickly share how the idea for the visualisation popped into my head. I’m a huge fan of Ludovico Einaudi (how can one not be, right!?) and listen to his music all the time. On September 14, he released a new album called Undiscovered. As soon as it was available on Spotify, I became hooked. I listened to it three times over every day, and it got me thinking…how much time did I spend listening to Ludovico Einaudi these past few years?
I requested my streaming data from Spotify (you can place a request on your account page and they’ll send it over in a few days!). I’d initially imagined a visualisation over multiple years, however Spotify only provides data for a 12-month period, so I was stuck with that.
In this initial stage, I analysed my audience and my data.
I divided my audience into two profiles as detailed below:
With an unfamiliar dataset, I’d go through a few rounds of 5Ws. This time, I knew from the start that I wanted to visualise the hours spent listening to Ludovico Einaudi. Here’s just a quick round of the 5Ws:
And here’s the headline I wrote:
In the past 12 months, I listened to 57 hours of Ludovico Einaudi’s music—an average of an hour per week.
I did this exploratory data analysis in Python; you can look at the code here if you’re interested.
2: Arrangement and Style
This section is all about the design of the visualisation.
I was inspired by the colours on the cover of the Undiscovered album—the different shades of green that create waves. I was also looking at radials on my Pinterest inspirations folder because I thought I was going to represent my data this way. In fact, it’s one of the reasons I was learning D3.js—to create more complicated visualisations with reusable code. I included the main inspirations in the mood board you can see below.
I sketched a few times during the process (not only at the inception stage) and you can see some of the drawings below.
Building the Chart
As I said earlier, I was determined to create a radial line or area chart for my dataset. Since I’d only been learning D3.js for a couple of weeks, it wasn’t an easy task. It took me quite a while to get the code right. At first, the figure was strangely cut off like in the image below:
When I finally managed to fix the area, the axes were still acting strangely:
Even though the axes still needed fixing, I already knew the chart wasn’t working. The radial area graph above shows how many hours per day I listened to Ludovico Einaudi’s music. The big differences in the data from one day to the next created these awful narrow spikes that I didn’t like at all.
So I aggregated the data by week instead, and tried again:
A very flat chart. I attempted to make it look better by smoothing the line’s curve and changing the colour. I’d also fixed the axes by this point!
Better, but still not good enough. Would a dark background help?
The dark version was even worse. I gave the white chart another shot in which I tried to adjust the size of the inner radius and the chart itself, as well as played with the axes.
Well, my work still resembled a green pancake. I had to come to terms with the fact that a radial chart of hours played per week wasn’t going to work. I toyed with another idea—a radial bar chart that showed the total hours played for each track.
It looked okay-ish, but wasn’t exploitable as a complete chart: when I tried to add a title and a subtitle, there was just too much text on the screen because of all the labels. I abandoned the idea of a fancy radial chart, and went back to basics: an area chart.
Since I’d already gone through hours of iteration, this part went rather quickly. I played around with curve types, annotations, colour and fonts…
…before settling for this final version:
Data has a better idea.
The sentence above is a perfect summary of this project. Even though I had a cool visualisation in mind from the start, I had to abandon that idea because the data didn’t work with it. I think this is a good reminder for all of us—we design with data, and data knows best.