Autopsie d'une dataviz [1] : une mosaïque interactive de Jean-Claude Juncker

Démarrage d'une peut-être nouvelle série avec l'autopsie d'une dataviz. Première en date : une mosaïque interactive de Jean-Claude Juncker, Premier ministre luxembourgeois.

Photo: Serge Waldbillig

Quand j'ai commencé mon dernier stage au Luxembourg, j'ai tout de suite été impressionné par une chose : l'engouement des Luxembourgeois pour leur Premier ministre Jean-Claude Juncker.

Pour vous donner un ordre d'idée, le monsieur est tellement populaire qu'il surpasse Jésus Christ !

Vous imaginez si chez nous Jean-Marc Ayrault, François Fillon, Lionel Jospin ou Edouard Balladur avaient été plus populaires en France que Bob Marley ? Ce qui paraît de la science-fiction est réalité au Luxembourg.

Je me suis donc dit qu'avant mon départ du Wort, il fallait que je trouve une idée originale pour résumer les 30 ans de vie politique de Jean-Claude Juncker. Une dataviz me paraissait une très belle option, mais je n'arrivais pas à aller au-delà de la classique Timeline.

Or, il est très difficile d'en créer une mouture captivante avec plus d'une quinzaine de dates.

Vous vous imaginez aller jusqu'au bout d'une timeline composée de 500 dates ? Perso, je décamperais en me rendant compte de l'envergure de la chose...

Et là, une idée

Bref, j'ai eu le syndrome de la page blanche jusqu'à voir une publicité pour la tournée d'un artiste basée sur le principe de la mosaïque d'images.

Voici un exemple avec le fameux Bob Marley :

Le portrait du chanteur domine, mais il est en réalité dessiné à partir de plusieurs centaines d'autres photos. On est comme submergé, happé par l'ensemble. Les 500 photos enveloppent un tout cohérent, agréable à l'oeil.

Et si chaque carreau de cette mosaïque devenait indépendant de l'ensemble, pouvait s'afficher en plus grand à l'action d'un clic ? Quoi de mieux pour rendre hommage à 30 ans de vie publique d'un homme politique, immortalisés en photographies ?

L'idée était très jolie sur le papier, mais il fallait avant tout vérifier sa faisabilité.

Andrea Mosaic à la rescousse

Créer facilement une photographie à partir de plusieurs centaines d'images requiert soit un talent fantastique, soit une bonne dose d'autisme, soit évidemment les deux. N'ayant rien de tout ça, j'ai interrogé notre ami universel Google pour trouver d'éventuels scripts.

Je n'ai rien trouvé de très transcendant, à part plusieurs mentions à Andrea Mosaic, un logiciel gratuit.

L'ensemble était relativement intuitif, avec la possibilité de paramétrer sa mosaïque selon des critères comme :

• la taille totale : largeur, hauteur, etc...
• le nombre de carreaux composant la mosaïque : 500 pour les résultats "grossiers", 2 000 pour les plus précis
• la duplication des carreaux disponibles : comment arriver à 1 500 carreaux avec simplement 500 images de stock ? En dupliquant simplement chaque élément par trois !

J'en ai parlé à ma responsable et nous avons convenu de sélectionner 500 photos de Juncker pour créer une mosaïque horizontale, mieux adaptée à un écran, de 1 500 images.

L'enfer des BDD approximatives

J'ai clairement mis les mains dans le cambouis pour classer plus de 530 photos de Juncker, prises durant la période 1979-2012. Quelques difficultés, inhérentes à l'architecture de la base de données interne du Wort, ont demandé pas mal de temps d'adaptation.

La syntaxe un peu costaud pour les noms des personnalités photographiées, des descriptions extrêmement évasives ou des orthographes différentes selon les langues (je souligne que le Wort est un média couramment bilingue et de plus en plus trilingue) ont pas mal ralenti la collecte.

Mais ouf, je suis finalement parvenu à ce fond de sauce :

L’algorithme associé

Après la récolte de données, la principale difficulté était surtout d'ordre technique, car je ne connaissais aucune librairie capable de découper ce poster en centaines de vignettes interactives.

J'ai donc rédigé un algorithme qui pourrait se traduire en code. Cela revenait à :

• "découper" l'image créée à partir d'Andrea Mosaic en zones cliquables différenciées par numéro
• à chaque clic sur une zone cliquable, afficher la photo et la légende avec le bon numéro
• améliorer l'ensemble avec une lightbox encadrant chaque carreau

Le seul hic, c'est que j'ai dû reclasser a la mano les 1 500 photos dans le bon ordre. Si vous avez des voies plus simples à me proposer, je suis preneur en commentaire !

Avant de terminer, je tiens à remercier chaleureusement Dominique Nauroy, informaticien devenu journaliste au Wort, et qui a codé entièrement la mosaïque.

Comments

Comment by Nanou Schroeder on 2012-10-08 12:36:11 +0200

Beau travail 😉

Comment by Maurice on 2012-10-08 19:55:25 +0200

Bravo, c'est du très beau travail. Comme à ton habitude tu t'es surpassé!!

Comment by @jcdrpro on 2012-10-12 15:04:48 +0200

Excellent ! 🙂

Comment by Raphaël Vuitton on 2012-10-12 15:12:32 +0200

Très beau travail !

Félicitations !

Comment by rati on 2012-11-30 05:22:57 +0100

magnifique
il faudrait que tu me donnes des cours
bises
rati