ADV28_TRANSCRIPT – Jouer avec les couleurs

TEASER: Les couleurs représentent l’élément esthétique le plus important en visualisation de données. Il faut éviter à tout prix de mettre la couleur juste pour mettre de la couleur…

INTRODUCTION: Ici Johanie Fournier et bienvenue à un nouvel épisode d’Agriculture, Données et Visualisation. Le podcast où je vous apporte avec moi dans le processus de traitement et de visualisation de données pour apprendre à présenter vos propres données de la manière la plus efficace possible. Sans plus tarder, voici l’épisode de cette semaine.

Bonjour et bienvenue dans ce 28e épisode. J’espère que vous allez bien! Aujourd’hui, on regarde les résultats des votes de la Nouvelle-Zélande pour le choix de leur oiseau de l’année 2019. Et je peux vous dire qu’ils ont vraiment de beaux oiseaux là-bas, pas étonnant que les résultats des votes aient été serrés…

Les données de cette semaine proviennent de Dragonfly Data Science. Le lien pour y avoir accès se trouve dans mon article de blogue au johaniefournier.com/tyt2019w47.

Donc, cette semaine encore on dispose d’une base de données assez simple de 217 300 lignes d’information. Chacune de ces lignes nous renseigne sur la date à laquelle vote a été enregistré, l’heure du vote le rang du vote et l’oiseau associé à ce rang. Ce qui veut dire que chaque personne pouvait identifier et voter pour leurs 5 oiseaux préférés.

Alors, après avoir regardé ces données j’ai choisi de présenter l’oiseau gagnant du vote avec une carte proportionnelle ou treemap.

CHOIX DU TYPE DE VIZ: Les résultats du sondage aurait surement été mieux présentés avec un histogramme conventionnel dans ce sens ou ça aurait été plus facile de voir les différences du nombre de votes entre les oiseaux, mais ce n’était pas mon objectif cette semaine. Parce que je n’avais jamais fait de treemap et je voulais essayer et mon objectif cette semaine était d’utiliser les couleurs pour faire passer un message.

PRÉSENTER LE GRAPHIQUE: Donc, j’ai présenté les différents résultats du sondage avec un treemap. Avec ce type de graphique, on a un rectangle qui représente 100% de nos données, donc ici tous les votes du sondage et chaque carré à l’intérieur de ce grand rectangle représentent les votes pour un oiseau. Donc, plus le carré est grand, plus il y a de vote pour cet oiseau. Normalement, dans ce type de graphique, chaque carré est identifié avec le nom de la variable qu’il représente. Ici, comme on avait 85 espèces d’oiseaux et qu’écrire un roman dans un graphique ne m’intéressait pas cette semaine, j’ai choisi de ne pas identifier toutes les espèces, mais plutôt de jouer avec les couleurs pour énoncer clairement mon message. Dans la version que j’ai créée pour le Tydituesday de la semaine, j’ai identifié en bleu seulement le gagnant et j’ai utilisé le sous-titre comme légende pour inclure le nom de l’oiseau gagnant dans mon message.

ADD: Hey! tu travailles avec R et ça t’intéresse de voir le code que j’ai utilisé pour nettoyer et visualiser mes données? Va voir dans les notes de cet épisode, j’ai mis un lien vers l’article de blogue dans lequel tu pourras trouver tous les détails dont tu as besoin. Tant qu’à être rendu sur mon site, prend aussi le temps d’aller voir l’épisode 19, c’est un épisode spécial que j’ai créé pour la journée internationale du Podcast et tu pourras y retrouver un lien pour télécharger un outil gratuit: faire passer le message. Faire passer le message, c’est en fait un petit guide qui te donne les grandes lignes points à comprendre et des étapes à considérer pour créer des visuels qui vont efficacement faire passer ton message à ton audience.

REVOIR LES RÈGLES D’OR DE LA DATAVIZ: Alors, aujourd’hui j’avais envie de vous jaser de l’importance de bien utiliser les couleurs quand on créer notre graphique. Le meilleur conseil que je pourrais vous donner c’est d’éviter à tout prix de mettre de la couleur dans un graphique juste pour mettre de la couleur. Les couleurs représentent l’élément esthétique le plus important à considérer quand on créer notre graphique et il faut les utiliser à notre avantage.

Notre premier objectif quand on crée un visuel est de faire passer notre message. On veut que le lecteur qui regarde notre travail comprenne les résultats qu’on présente, mais surtout qu’il soit capable d’identifier facilement la conclusion importante à retenir, et qu’il la retienne! Donc, il faut que les couleurs fassent leur travail, c’est-à-dire capte l’attention de notre lecteur, dirige la manière dont ils consomment les informations contenues dans notre visuel et mettent en évidence la conclusion qu’on veut qui soit retenue.

Ça fait beaucoup de tâches à accomplir, me direz-vous! oui, c’est vrai c’est beaucoup demander à un seul élément esthétique, mais vous allez voir, c’est assez simple à réaliser quand on s’y prend bien.

Pour mettre tout ça en évidence, j’ai décidé de m’amuser un peu à créer différentes versions du graphique que j’ai créé cette semaine. Donc, toutes les versions sont disponibles dans les notes de l’épisode, ça vaut la peine de prendre le temps d’aller y jeter un coup d’oeil et de les comparer pour bien comprendre la mécanique derrière tout ça.

Alors, la première version que j’ai créée représente la version de base obtenue avec le logiciel R. Dans cette version, les seules couleurs que j’ai spécifiées sont les couleurs du titre en noir et du sous-titre en gris. J’ai choisi de le faire comme ça juste pour des fins de comparaison avec les autres versions créées, pour ne pas venir perturber notre perception. Donc, le logiciel R, quand on lui demande de créer un treemap avec 85 espèces d’oiseau et ben il crée un treemap avec 85 couleurs à l’intérieur. J’ai retiré la légende, parce que ça fessait litéralement mal aux yeux…mais il devrait bien y avoir une couleur pour chaque espèce d’oiseau dans ce graphique. Par contre, vous pourrez constater que le grand nombre de variables à présenter cause un problème et que les couleurs se répètent…En plus, il n’y a rien qui nous dit quel est le carré qui représente les manchots dans ce graphique. Je mentionne en sous-titre que c’est l’espèce qui a gagné le titre de l’oiseau de l’année en 2019 (ce qui représente mon message à retenir), mais il n’y a aucun élément dans le graphique qui mette cette conclusion en évidence… En plus, la première chose qu’on voit quand on regarde le graphique est l’arc-en-ciel de couleur…. qui nous mène à ne regarder rien en particulier parce que ça n’a pas une signification pertinente… Donc, à mon avis cette première version n’atteint pas son objectif: elle ne fait pas bien passer le message…

La deuxième version que j’ai créée est celle que j’ai présentée au début de l’épisode. Le graphique, le titre et le sous-titre sont exactement les mêmes. Par contre, j’ai retiré l’arc-en-ciel de couleurs qui composait le treemap pour les remplacer par un gris pâle. Je me retrouve donc avec un rectangle de couleur unie dont la superficie totale représente 100% des oiseaux et pour lesquels chaque petit carré qui le compose représente une espèce. Déjà juste avec ça c’est plus intuitif comme visuel. Pour mettre l’emphase sur la conclusion ou le message que je veux faire passer qui est que le manchot est l’oiseau gagnant de l’année 2019 pour la Nouvelle-Zélande, j’ai identifié le carré à l’intérieur de mon treemap en bleu. Déjà, juste avec ça on peut voir que j’ai mis en évidence le plus gros carré, donc celui qui a gagné le résultat du sondage. Ensuite, j’ai choisi un titre qui vient capter l’attention sans pour autant être descriptifs. Les titres descriptifs sont en général plus longs à lire et captent moins l’attention que les titres courts qui posent une question. Pour venir ensuite utiliser le sous-titre pour guider et expliquer au lecteur ce que je veux qu’il retiennent. Dans le sous-titre, j’ai expliqué que c’est le vote pour l’oiseau de l’année en Nouvelle-Zélande et que le gagnant est le manchot. Pour que ce soit bien clair que le carré en bleu dans mon treemap soit associé au mot manchot dans mon sous-titre, j’ai choisi mettre le mon de mon sous-titre exactement de la même couleur que le carré. En d’autres mots, j’utilise mon sous-titre comme légende. Une pierre deux coups, mon lecteur lis la conclusion que je veux qu’ils retiennent et il n’ait même pas a investir d’énergie mentale pour comprendre la légende du graphique, il la comprend sans même s’en rendre compte. je ne sais pas pour vous, mais moi je trouve que c’est de la vraie magie! Donc, je me retrouve avec un graphique qui à l’air beaucoup plus simple et qui fait passer son message facilement et la seule chose que j’ai changée c’est les couleurs!

Une fois qu’on a compris ça, le reste ces du pur plaisir! On peut s’amuser à l’infini à repenser exactement le même graphique, mais en lui attribuant un message différent. C’est ce que j’ai fait, j’ai créé deux autres graphiques en fessant seulement varier le message.

J’ai créé un graphique qui met en évidence le top5 des oiseaux favoris de la Nouvelle-Zélande. Je l’aime particulièrement celui-là parce que j’obtiens un bel effet de couleur de par la manière dont le treemap est conçu. Donc, j’ai choisi différentes teintes de bleu pour identifier les 5 oiseaux préférés. J’ai pris soin d’utiliser une seule couleur parce qu’il y a un lien ici entre les oiseaux. Je voulais que ce soit clair que ce n’est pas des éléments différents que je présente ici, mais bien les résultats d’un même sondage pour lesquels les oiseaux ont juste obtenu un résultat différent. Donc le manchot qui a reçu le meilleur résultat est en bleu plus foncé et le pluvier qui est le dernier du top 5 a reçu le moins bon résultat et est donc en bleu plus pâle. J’ai changé mon sous-titre pour inclure le nom des 5 espèces d’oiseaux et j’ai utiliser la même technique c’est-à-dire de mettre le nom de l’oiseau du bleu qui lui correspond dans le treemap et voilà! j’obtiens un autre graphique qui est simple à comprendre et qui fait bien passer son message.

J’ai aussi créé une autre version qui met en évidence le gagnant et le perdant. Donc, j’ai mis dans le treemap le carré qui correspond au manchot en bleu et le carré qui correspond à l’oiseau qui a eu le moins grand nombre de votes en orange et j’ai utiliser le sous-titre pour décrier mon message et identifier ma légende exactement de la même manière que dans les autres versions. J’ai utilisé 2 couleurs différentes ici pour bien mettre l’emphase sur la notion de gagnant/perdant. C’est exactement les mêmes données que dans la version précédente, donc j’ai pu juste utiliser 2 tons de bleu, mais ça ne m’aurais pas mis en évidence la notion de gagnant vs perdant, j’aurais juste identifié 2 résultats d’un même sondage.

Comme vous pouvez le voir, un même graphique peut être travaillé de plusieurs façons. C’est pour ça que c’est primordial de savoir quel est le message qu’on veut faire passer quand on conçoit un visuel. Il faut avoir un objectif clair en tête pour être capable de bien travailler nos éléments esthétiques. La meilleure façon de faire, je pense, c’est de créer un graphique qui fonctionne bien avec les données qu’on veut présenter et de mettre l’ensemble de notre visuel en gris. Une fois que tous les éléments qui compose notre visuel sont perçus sur un même pied d’égalité, on peut se concentrer sur notre message et sur comment on veut qu’il soit mis en évidence avec les couleurs et les autres éléments esthétiques dont on dispose.

CONCLUSION: Voilà, ça fait le tour de ce que je voulais présenter aujourd’hui. Si jamais tu as des commentaires ou des questions, n’hésite pas à me contacter. Tu peux aller au johaniefournier.com/contact pour m’écrire directement ou aller dans la section commentaire de l’épisode pour poser tes questions, ça va me faire plaisir de te répondre. Alors, j’espère que cet épisode a été utile et que tu as appris quelque chose, merci de m’avoir écouté et on se dit à la semaine prochaine!

Quelques liens utiles:



Publicités

Une réflexion sur “ADV28_TRANSCRIPT – Jouer avec les couleurs

  1. Pingback: ADV28 - Jouer avec les couleurs | Johanie Fournier, agr.

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.