Infographie ou visualisation de données
Certains outils externes requièrent un mot de passe. Demandez à votre pupitre au besoin. Commentaires, questions, suggestions? Équipe formats numériques equipe-mpf-grp@radio-canada.ca. Et suivez-nous sur Twitter pour voir ce que l’on publie!
TL;DR
Il faut aller droit aux faits, donner suffisamment de contexte et éviter de faire du bruit simplement pour l'apparence.
Il existe plusieurs formes de graphiques. Les plus courants sont les histogrammes (bar chart), graphiques en secteurs (pie chart) et en courbes (line chart).
Les informations communiquées par un diagramme doivent être accessibles en lui-même ou ailleurs dans la page. Par exemple, une légende qui résume les faits à retenir.
La couleur ne doit pas être la seule façon de communiquer une information.
L'utilisation du texte en image est à proscrire.
Prenez note que cette documentation rédigée en 2014 pourrait contenir des informations qui ne sont plus à jour.
Principes
L’objectif principal de la visualisation de données est de transmettre l’information graphique la plus claire et la plus intelligente possible. Même si les particularités de style doivent être respectées, il est également important d’être constamment créatif dans la présentation de l’information au sein de ces paramètres.
1. Aller droit au fait
Avant de commencer n’importe quel graphique, peu importe sa taille, identifiez le point le plus important que vous devez transmettre à votre lecteur.
Toujours se demander : qu'est-ce que ça apporte de plus pour le lecteur? Est-ce que ça ajoute à la compréhension? Est-ce que je veux ajouter ceci seulement parce que je trouve ça beau? Est-ce que le graphique est autoportant et compréhensible en lui-même?
2. Donner du contexte
L’étiquetage donne le contexte. Il faut s’assurer que le langage utilisé pour décrire le tableau donne dès la première lecture suffisamment d’informations pour comprendre non seulement la tendance, mais aussi la tendance dans son contexte.
3. Simplifier
Éviter les ombres et la surutilisation des textures et d’icônes (en particulier des logos d’entreprises).
Maintenir la cohérence de jour en jour. Tous les graphiques doivent garder la facture Radio-Canada, peu importe qui les fait.
Meilleure utilisation du temps. L’énergie doit se concentrer sur les moyens plus intéressants de présenter les données ou travailler sur des projets plus importants. Les effets spéciaux ne peuvent faire un graphique plus cohérent ou plus intelligent.
Les illustrations de données interactives ou les infographies doivent pouvoir être lues par un lecteur d’écran. Les données présentées sous forme d’images sont à proscrire : elles ne sont pas lisibles par un lecteur d’écran et ne sont pas prises en compte dans le référencement. S’il est impossible de ne pas utiliser une image statique, s’assurer que les données sont copiées dans le champ long dans le HTML.
Guide des graphiques
Meilleures pratiques pour les visualisations de données les plus courantes :
Histogrammes (Bar Chart)
Graphique en secteurs (Pie Chart)
Graphiques en courbes (Line Chart)
Histogrammes
Les histogrammes, ou diagrammes à barres, sont très polyvalents. Ils sont mieux utilisés pour montrer de changements au fil du temps, de comparer différentes catégories ou comparer parties d’un tout.
...
Variations
...
Exemples
...
Vertical (Graphique à colonnes)
Mieux utilisé pour les données chronologiques (les séries chronologiques doivent toujours s’afficher de gauche à droite), ou quand nous affichons des valeurs négatives en dessous de l’axe des x.
...
...
Horizontal
Mieux utilisé pour les données avec des noms de catégorie longs.
...
...
Barres empilées
À utiliser de préférence quand il est nécessaire de comparer plusieurs relations entre les parties et le tout. Ceux-ci peuvent utiliser des données discrètes ou continues, orientées soit verticalement ou horizontalement.
...
...
Barres empilées à 100%
Mieux utilisé lorsque la valeur totale de chaque catégorie n’est pas importante et le message principal est le pourcentage des sous-catégories.
...
Exemples
...
Les libéraux de Justin Trudeau en tête dans les intentions de vote (2014)
...
En deux semaines, la situation dans les CHSLD et les RPA s'est rapidement détériorée (2020)
...
Voici combien d'aînés en résidence ont contracté la COVID-19 et combien en sont morts (2020)
Meilleures pratiques
Utilisez des libellés horizontaux : Évitez l'orientation diagonale ou verticale, car elle est difficile à lire
Arrangez l'espace entre les barres : L’espace entre les barres doit être la moitié de la largeur des barres.
Commencez la valeur de l'axe Y à 0 : Commencer à partir d’une valeur supérieure à zéro tronque les barres et ne reflète pas la valeur complète.
Utilisez des couleurs cohérentes : Utilisez une seule couleur pour les graphiques à barres. Vous pouvez utiliser une couleur d’accent pour mettre en évidence un point important dans les données.
Triez les données adéquatement : Ordonnez les catégories par ordre alphabétique, en séquence ou par valeur.
...
Graphiques en secteurs
Les graphiques en secteurs sont mieux utilisés pour faire des comparaisons entre les parties et le total. Ils ont plus d’impact avec un petit ensemble de données.
...
Variations
...
Exemples
...
Standard
Utilisé pour montrer les relations entre les parties et le total.
...
Anneau
Variation stylistique qui permet l’inclusion d’une valeur totale ou d’un élément de design dans le centre.
...
Exemples
...
De l'éventail à la climatisation en 8 infographies (2015)
...
Les effets secondaires de la vaccination sont rares, quasi absents chez les enfants (2022)
...
Un été sans Boeing 737 MAX : les transporteurs canadiens évitent le pire (2019)
Ce graphique est l’un des types les plus populaires. Cependant, certains critiques, comme le spécialiste de la visualisation de données Stephen Few, ne sont pas fans. Ils affirment que nous sommes seulement capables de mesurer la taille des tranches si elles sont en pourcentages et positions standards (25 % , 50 %, 75 % , 100 % ), car elles sont des angles communs. Nous interprétons les autres angles de manière incohérente, ce qui rend difficile de comparer les tailles relatives, et donc moins efficace.
Meilleures pratiques
Ne pas afficher plus de 5 catégories par graphique : Il est difficile de faire la différence entre les valeurs plus faibles; représenter un trop grand nombre de tranches diminue l’impact de la visualisation. Si nécessaire, vous pouvez grouper les valeurs plus petites dans une catégorie « autre » ou « divers », mais assurez-vous qu’il ne cache pas des informations intéressantes ou importantes.
Ne pas utiliser plusieurs graphiques à secteur pour faire des comparaisons : Les tailles des tranches sont très difficiles à comparer côte à côte. Utilisez un graphique à barres empilées à la place.
S'assurer que les données s'additionnent à 100 % : Vérifiez que les valeurs s’élèvent à 100 % et que les tranches sont de taille proportionnelle à leur valeur correspondante.
Triez les tranches correctement : Il y a deux façons qui sont toutes deux destinées à faciliter la compréhension :
Option 1 Lancer la plus grande section à 12 heures, dans le sens horaire. Placez les sections restantes dans l’ordre décroissant, dans le sens horaire.
Option 2 Placez la plus grande section à 12 heures, dans le sens horaire. Placez la deuxième section à 12 heures, dans le sens antihoraire. Les sections peuvent être placées au-dessous, en continuant dans le sens antihoraire.
...
...
Graphiques en courbes
Les graphiques en courbes sont utilisés pour montrer les relations chronologiques avec des données continues. Ils aident à démontrer la tendance, l’accélération, la décélération et la volatilité.
...
Exemples
...
COVID-19 : Québec calcule mieux les décès qu’ailleurs au Canada, selon des experts (2022)
...
La pandémie sur le web : des conspirations contagieuses (2020)
...
Analyse de milliards de données cellulaires : la relâche québécoise a catalysé l'épidémie (2020)
Meilleures pratiques
Inclure une base zéro si possible : Même si une ligne graphique n’a pas à commencer à un niveau de référence zéro, elle doit être incluse si possible. Si des fluctuations relativement faibles dans les données sont significatives (par exemple, dans les données du marché boursier), vous pouvez tronquer l’échelle pour mettre en valeur ces écarts.
Ne pas combiner plus de 4 lignes : Si vous avez besoin d’afficher plus, séparez les dans des graphiques distincts pour une meilleure comparaison.
Utilisez des lignes solides uniquement : Les traits mixtes peuvent être source de distraction.
Libeller directement les lignes : Cela permet aux lecteurs d’identifier rapidement les lignes et les étiquettes correspondantes au lieu de référencer une légende.
Utiliser la hauteur correcte : Tracer tous les points de données de sorte que la ligne graphique occupe environ les deux tiers de la dimension totale de l’axe Y.
...
...
...
...
...
Pour créer des graphiques en lignes, barres, tartes ou encore des tableaux, utilisez Datawrapper. Il suffit de copier/coller vos données, structurer votre graphique et générer le code d’intégration fourni.
Références
Storytelling par les données (Formation, 2020) (Récapitulatif)
Charting new territory : How The Economist designs charts for Instagram (Economist, 2020)
How the BBC Visual and Data Journalism team works with graphics in R (BBC, 2019)
Visualisation de données, Les statistiques : le pouvoir des données! (Stat. Canada)
Annexe
Histogrammes (Bar Chart)
...
Les libéraux de Justin Trudeau en tête dans les intentions de vote (2014)
...
Les crimes, moins graves et moins nombreux au Canada en 2013 (2014)
...
Faut-il s'inquiéter de l'état des finances du Québec ? (2014)
...
Des ados inactifs partout dans le monde (2019)
...
La pandémie sur le web : des conspirations contagieuses (2020)
...
Voici combien d'aînés en résidence ont contracté la COVID-19 et combien en sont morts (2020)
...
En deux semaines, la situation dans les CHSLD et les RPA s'est rapidement détériorée (2020)
...
Pouvez-vous vraiment décoder les émojis? (2020)
...
Suivez la campagne de vaccination en continu (2021)
...
Les effets secondaires de la vaccination sont rares, quasi absents chez les enfants (2022)
...
Plus de 60 nouvelles écoles réclamées au ministère de l'Éducation (2020)
...
Festivals de musique québécois : où sont les femmes? (2019)
Graphique en secteurs (Pie Chart)
...
De l'éventail à la climatisation en 8 infographies (2015)
...
Les effets secondaires de la vaccination sont rares, quasi absents chez les enfants (2022)
...
Un été sans Boeing 737 MAX : les transporteurs canadiens évitent le pire (2019)
Graphiques en courbes (Line Chart)
...
COVID-19 : Québec calcule mieux les décès qu’ailleurs au Canada, selon des experts (2022)
...
La pandémie sur le web : des conspirations contagieuses (2020)
...
Pas plus de suicides en 2020 au Québec malgré la pandémie, selon l’INSPQ (2022)
...
Près de 40 % des Canadiens atteints de la COVID-19 sont rétablis (2020)
...
Analyse de milliards de données cellulaires : la relâche québécoise a catalysé l'épidémie (2020)
...
Évolution de la COVID-19 (2020)
...
Des ados inactifs partout dans le monde (2019)
...
La pandémie sur le web : des conspirations contagieuses
...
Festivals de musique québécois : où sont les femmes? (2019)
...
Où se stationner lors d'une opération de déneigement à Montréal? (2019)
...
(scatter plot)
...
...
L’armée russe continue de pilonner les grandes villes d’Ukraine (2022)
...
Pas plus de suicides en 2020 au Québec malgré la pandémie, selon l’INSPQ (2022)
30 -
https://uxdesign.cc/mixing-and-combining-red-and-blue-in-data-visualization-cd2c8cfd9c8
Tactile charts and sonification, for example, are both really exciting areas which could bring benefits to a wider audience. In 2021, musician and visual data designer Carni Klirs used sonification to represent what 450,000 Covid deaths sounded like. https://reutersinstitute.politics.ox.ac.uk/blind-news-audiences-are-being-left-behind-data-visualisation-revolution-heres-how-we-fix
| Note |
|---|
Est-ce que « Consulter sous forme de texte » est désuet pour tout ce qui est sur Datawrapper ? |
« Cependant, comme DataWrapper est l'outil le plus couramment utilisé pour faire des graphiques, il est à noter qu'il est possible d'ajouter une description dans le champ de texte alternatif pour les lecteurs d'écrans (sous l'onglet visualize) Ça génère la classe "sr-only" »
https://blog.datawrapper.de/better-accessibility-for-datawrapper-visualizations/
Obsolète
Est-ce nécessaire de parler de l'attribut alt si on dit de bannir l'utilisation d'images statiques ?
💬 Remarques
Parfois, l’image véhicule des informations riches qu’il n’est pas possible de retranscrire sous forme de texte brut, via le simple attribut « alt » (schémas, graphiques complexes, etc.).
Dans cette situation, une bonne pratique d’accessibilité consiste à :
Renseigner un court texte de remplacement dans l’attribut « alt » qui décrit globalement la fonction de l’image. Pour cette description, le plus possible, s'en tenir à un texte de 60 caractères maximum. Indiquer entre parenthèses à la fin du texte de remplacement le moyen d’accéder à la description plus détaillée (ex. Description détaillée disponible via le lien ci-dessous).
Prévoir une zone de contenu dans laquelle proposer une description détaillée de l’image directement sous l’image. Dans le cas de graphiques ou schémas complexes, la description détaillée la plus adaptée est souvent un tableau de données ou une liste.
À noter que l’attribut longdesc n’est pas supporté par tous les lecteurs d’écran. Il faut donc jumeler son utilisation à celle d’un accordéon qui masque la description longue (au clic du lien, la description va s’afficher directement en dessous).
Par exemple, dans le cas d’un graphique avec le nombre de forages par année. On affiche l'image, un lien pour voir la description textuelle en HTML (qui est masquée jusqu'à ce que l'usager actionne le lien) :
⚠️ Attention
Il est fortement déconseillé de rédiger le texte de remplacement d’une image en commençant par "Image […]" dans le cas de la balise <img> ou <svg>, ou par "Bouton [...]" ou "Lien vers […]" dans le cas de la balise <input type="image" /> ou d'une image cliquable. Cette information est implicite et pourra être restituée aux utilisateurs de lecteurs d’écran.
5.3 Visuel informatif (tableau, illustration de données, infographie)
5.3.1 Bannir les illustrations de données sous forme d’image statique
Les illustrations de données interactives ou les infographies doivent pouvoir être lues par un lecteur d’écran. Les données présentées sous forme d’images sont à proscrire : elles ne sont pas lisibles par un lecteur d’écran et ne sont pas prises en compte dans le référencement. S’il est impossible de ne pas utiliser une image statique, s’assurer que les données sont copiées dans le champ long dans le HTML.
💬 Remarques
Avant de concevoir une telle illustration, privilégiez des outils de création d'illustrations qui répondent aux normes d'accessibilité, en vérifiant dans la liste des outils de publication approuvés.
💡 Astuces
Un lien « Consulter sous forme de texte » sous forme d’accordéon doit figurer sous le tableau, comprenant une description détaillée du tableau. La description se situe sous l’image, alignée à gauche, et le style devra être conforme au style appliqué au corps du texte. (re interfaces riches) (fonctionnalité en développement)
L’exemple de gauche présente de l’information pertinente qui est inaccessible aux lecteurs d’écran car elle est imbriquée uniquement dans l’image. Il est préférable d’écrire toute information pertinente en HTML, comme l’exemple de droite.
Un autre exemple où l’extrait d’un document n’a pas fait l’objet d’une saisie dans l’éditeur Scoop!, ni retranscrit dans le alt. L’information est impossible à lire pour un lecteur d’écran. Sans contrôle sur l’interlignage puisque c’est une image, le document peut être difficile à lire.
Un exemple de retranscription de données dans un lien «Consulter sous forme de texte » présenté en accordéon (maquette en développement).
📝 Ressources
5.3.2 Prévoir un titre pour chaque visuel informatif
Lorsque des tableaux de données sont utilisés, ils doivent être immédiatement précédés d’un titre clair et concis qui décrit explicitement le contenu.
...
| Child pages (Children Display) | ||
|---|---|---|
|