Language: EN | NL | FR

Scrollytelling met scrollama.js en d3.js (demo)

Dit is een scrollytelling demo. Het is gebouwd m.b.v. scrollama.js en d3.js. Ik ga ervanuit dat je scherm minimaal 1100 pixels breed is en de demo is alleen getest in een moderne firefox browser. Je kan het dus het beste bekijken op je computer.

Het onderwerp van deze demo is mijn Avicii Open Data Art project. Ik ben dit project kort na Avicii's overlijden gestart. Mijn doel was destijds om zijn songeteksten te onderzoeken, maar ik stuitte onbedoeld op een nieuw manier om zijn album abstract te visualiseren; een soort data kunst.

Nieuwsgierig? Scroll dan verder.

Het Album

Het verhaal start met zijn album. In dit geval is het Avicii's posthume album TIM. Elke punt hiernaast staat voor een nummer. Hover er maar eens overheen om de songtitels te zien.

Sentiment

Met behulp van sentiment analyse vertaal ik de songtekst van ieder nummer naar een datapunt. Dit bevat de sentiment score, een waarde tussen de -1.0 en +1.0. Dit geeft ieder nummer een negatieve waarde, neutrale waarde, of positieve waarde.

Magnitude

Naast de sentimentscore, geeft de analyse ook een magnitude waarde terug. Dit vertelt ons iets over de kracht waarmee de songtekst het sentiment uit. Is dit krachtig, of juist niet? De magnitude bepaalt de grootte van het datapunt.

Sentiment als x-positie

Nu ieder nummer twee datapunten heeft, kan ik die gebruiken om de nummers opnieuw te positioneren. Ik pas eerst de horizontale positie (x-as) aan o.b.v. het sentiment. Maar zoals je ziet, vallen sommige datapunten over elkaar...

Magnitude als y-positie

Op dezelfde manier als ik de sentimentscore gebruik voor de horizontale positie van de nummers, gebruik ik nu de magnitude voor de verticale positie (y-as).

Simpele puntjes

Na het aanpassen van de positie van de nummers, kan ik de weergave versimpelen. We zijn nu klaar voor de volgende fase van de visualisatie.

Teken een recht pad

Net zoals je vroeger wel eens een tekening maakte door nummers achtereen te verbinden, doe ik dat nu ook met de nummers van het album. Eerst een lijn van punt 1 naar 2, dan van 2 naar 3, enzovoorts. Het resultaat is alleen wat hoekig vind je niet?

Teken een krullend pad

Gelukkig kan ik het pad ook op een andere manier tekenen. Een zogenoemde Bezier curve gaat niet recht van datapunt naar datapunt, maar krult van het ene punt, via andere punten, naar een later punt. Bijvoorbeeld van punt 1, via punt 2 en 3, naar punt 4. En deze aanpak geeft een heel interessant resultaat!

Het resultaat

Als ik het resultaat wat opschoon, komen we tot het eindresultaat. Houd in je achterhoofd dat dit dus helemaal gegenereerd is door code. Het ziet er alleen niet zo uit, het lijkt eerder op een handtekening. Best cool toch?

Dat was 'm. Ik hoop dat je deze scrollytelling demo en projectuitleg interessant vond.

Als je interesse hebt in de technische kant van deze demo, dan staat deze op Github (Engels).

Wil je meer weten over mijn Avicii Project? Ga dan naar mijn Avicii Open Data Art pagina (Engels). Ik geef ook lezingen en workshops over dit project.

Wil je iets vragen aan me vragen? Neem dan contact met me op door @outlook.com achter erik.driesen te plakken.