Language: EN | NL | FR

Scrollytelling with scrollama.js and d3.js (demo)

This is a scrollytelling demo. It was created using scrollama.js and d3.js. It assumes your screen is at least 1100 pixels wide and it has only been tested on a modern Firefox browser. Technical notes are down below.

Have fun.

The Album

The story starts with a music album. In this case, it's Avicii's posthumous album TIM. Each dot represents a song. Hover over a dot to check the song titles.

Sentiment

Using sentiment analysis, I turn the lyrics of a song into a data point with a sentiment score. The values range from -1.0 to +1.0 and give each song a negative value, neutral value, or positive value.

Magnitude

Besides a sentiment score, the analysis returns a magnitude value. This tells something about the way the sentiment is expressed in a song. Is it weak or strong? The magnitude defines the size of a dot.

Position x by sentiment

Now that each song has two data values, I use those to reposition the songs. First, I change the horizontal position (x-axis) based on the sentiment score. But as you can see, some songs overlap...

Position y by magnitude

In the same way I use the sentiment score for the horizontal position of the songs, I use the magnitude value for the vertical position (y-axis).

Simplify dots

Now that I have updated the positions of the songs, I simplify the visualisation for the next phase of the story.

Draw a path

Next up, I draw a path from dot to dot, starting at song 1, moving to song 2, and continuing like this al the way up to the last song. But the result is a bit edgy...

Draw a curved path

Luckily, there's an alternative. Bezier curves are paths that don't go straight, but curve from data point to data point. And combining this type of path with the data, I get a pretty interesting result...

The result

When I clean up the final visualisation, I get a nice view of the generated shape. Keep in mind that this is all generated using code. But it doesn't look like that. It looks like it's a hand-drawn signature. Pretty cool right?

That's a wrap. I hope you enjoyed this scrollytelling demo. The technical notes are available on Github.

If you have any question, please do reach out to me.