Language: EN | NL | FR

Scrollytelling avec scrollama.js et d3.js (démo)

Ceci est une démo de scrollytelling. Elle a été créée en utilisant scrollama.js et d3.js. Elle suppose que votre écran a une largeur d'au moins 1100 pixels et n'a été testée que sur un navigateur Firefox moderne. Les notes techniques se trouvent plus bas.

Amusez-vous bien.

L'album

L'histoire commence par un album de musique. Dans ce cas, il s'agit de l'album posthume d'Avicii, TIM. Chaque point représente une chanson. Survolez un point pour connaître le titre de la chanson.

Sentiment

Grâce à l'analyse des sentiments, je transforme les paroles d'une chanson en un point de données avec un score de sentiment. Les valeurs vont de -1,0 à +1,0 et donnent à chaque chanson une valeur négative, neutre, or positive.

Magnitude

Outre la note de sentiment, l'analyse renvoie une valeur de magnitude. Celle-ci renseigne sur la manière dont le sentiment est exprimé dans une chanson. Est-il faible ou fort ? La magnitude définit la taille d'un point.

Positionner l'abscisse en fonction du sentiment

Maintenant que chaque chanson possède deux valeurs de données, je les utilise pour repositionner les chansons. Tout d'abord, je modifie la position horizontale (axe des abscisses) en fonction du score de sentiment. Mais comme vous pouvez le voir, certaines chansons se chevauchent...

Positionner l'ordonnée en fonction de la magnitude

De la même manière que j'utilise le score de sentiment pour la position horizontale des chansons, j'utilise la valeur de magnitude pour la position verticale (axe des ordonnées).

Simplifier les points

Maintenant que j'ai mis à jour les positions des chansons, je simplifie la visualisation pour la phase suivante de l'histoire.

Dessiner un chemin

Ensuite, je dessine un chemin de point en point, en commençant par la chanson 1, en passant à la chanson 2, et en continuant ainsi jusqu'à la dernière chanson. Mais le résultat est un peu anguleux...

Dessiner un chemin incurvé

Heureusement, il existe une alternative. Les courbes de Bézier sont des chemins qui ne vont pas tout droit, mais qui s'incurvent d'un point de données à l'autre. En combinant ce type de chemin avec les données, j'obtiens un résultat assez intéressant...

Le résultat

Lorsque je nettoie la visualisation finale, j'obtiens une belle vue de la forme générée. N'oubliez pas que tout ceci est généré à l'aide de code informatique. Mais cela n'en a pas l'air. On dirait une signature dessinée à la main. Plutôt sympa, non ?

C'est terminé. J'espère que vous avez apprécié cette démonstration de scrollytelling. Les notes techniques sont disponibles sur Github.

Si vous avez des questions, n'hésitez pas à me contacter.