1. Accueil  
  2. Design  
  3. Modèles  
  4. Visualisation de données  
  5. Réalisation

Réalisation de la visualisation de données

Une fois que le message, la fonction et le public cible sont cernés au moment de la conceptualisation, il est maintenant le temps de réaliser le graphique.

Avant d’aborder les différentes recommandations qui entourent la création d’un graphique, il faut d’abord comprendre les différents éléments qui le composent.

A - Titre principal

B - Ordonnée (Axe Y)

C - Abscisse (Axe X)

D - Libellés de l’axe

E - Grille de fond

F - Série de données

G - Source

Mise en forme

Privilégier le texte horizontal

Puisque le texte vertical est difficile à lire, on place les libellés des axes à l’horizontale.

Diviser en plusieurs petits graphiques

Un graphique qui comporte plus de 4 catégories crée de la confusion. Cependant, il existe bien des cas où le nombre d’éléments à comparer dépasse la limite conseillée. Il est possible de répéter le même graphique, à taille réduite, en n’incluant qu’une catégorie par graphique. De cette façon, la tendance au sein de chaque catégorie est clairement lisible. L’important est d’utiliser la même échelle pour tous les graphiques.

À faire



Éviter les graphiques 3D

La troisième dimension déforme les graphiques en gonflant la valeur visuelle d’une donnée par rapport à sa valeur numérique.

Éviter la double ordonnée

Quand un graphique présente deux variables avec des unités différentes, il est tentant de vouloir utiliser deux axes Y. Cette méthode amène une interprétation trompeuse des données en raison de l'effet visuel créé par la double échelle des Y.

À ne pas faire



Contenu

Donner un titre directif

On choisit un titre qui guide la lecture du graphique pour le public, de manière à ce qu’il n’ait plus qu’à « confirmer » sa compréhension de l’analyse en lisant votre visuel.

Différencier les projections des données réelles

Les projections sont des données hypothétiques. L’utilisation d’un pointillé pour illustrer les projections évite de les confondre avec les données réelles qui, elles, sont basées sur des observations concrètes.

Mettre l’accent sur les données importantes

Dans un graphique, il peut exister plusieurs niveaux de hiérarchie. Certaines données servent à apporter du contexte, alors que d’autres sont au cœur même du message. Pour différencier visuellement les niveaux de hiérarchie, on doit faire ressortir les données les plus importantes.

Voici quelques stratégies pour y arriver :

  • réduire le poids visuel des données de contexte en les grisant ou en diminuant leur visibilité
  • augmenter le poids visuel des données importantes en utilisant une zone de couleurs ou en épaississant le trait
  • ajouter, si nécessaire, des annotations qui guident l’œil

Utiliser un ordre qui amène du sens

Pour augmenter la compréhension du message du graphique, il faut choisir le bon ordre des données, soit ordinal ou nominal.

Les données ordinales sont des données qui possèdent un ordre inhérent. Par exemple, des groupes d’âges, des dates ou une échelle d’évaluation de « très mauvais » à « très bon ». Pour ce type de données, il est recommandé de suivre l’ordre inhérent de manière à ne pas compliquer la lecture pour le public.

Les données nominales ne possèdent pas d’ordre inhérent. Par exemple, les destinations touristiques au Québec ou des types de sports d’hiver pratiqués par la population. Pour ce type de données, il est recommandé d’utiliser un ordre qui facilite la lecture du graphique, c’est-à-dire la comparaison des données entre elles. Par exemple, l’ordre de performance du pire au meilleur score.

Rendre visibles les données manquantes

Les données manquantes révèlent souvent quelque chose d'important : problèmes de collecte de données, changement de méthodologie, etc. Les montrer évite de tromper le public, même par inadvertance.

Il existe quelques manières de présenter l’information manquante :

  • Montrer les écarts : rendre l’information manquante explicite, soit par le biais de vide dans la page, soit avec un texte.
  • Ajouter une catégorie : ajouter, par exemple, une catégorie « non-répondants ». Cette nouvelle catégorie doit être atténuée visuellement comparé aux autres.
  • Interpoler : combler les lacunes par une moyenne pondérée, un modèle de régression ou un lisseur pour les séries chronologiques.
  • Se concentrer sur ce qui est disponible : changer l’orientation du visuel et se concentrer uniquement sur les sous-sections pour lesquelles des données sont disponibles.
  • Continuer de chercher des données : si les données ont déjà été collectées, les agréger et/ou les consolider.

Utiliser une période pertinente

Il faut choisir la période adéquate selon les données et les analyses effectuées. Par exemple, un graphique qui parle des changements climatiques peut présenter ses données sur plusieurs milliers d’années. À l’inverse, un graphique qui parle d’un accident routier peut se concentrer sur quelques minutes.

Axes et grilles de fonds

Inclure les unités au-dessus de l’axe

Pour les axes verticaux, on place le titre précisant les unités au-dessus de l’axe. Cela évite de devoir répéter l’unité sur chaque libellé en plus de ne pas avoir à l'inclure dans le titre. Cependant, pour les pourcentages et les heures, on peut les inclure directement dans les libellés.

Ne pas faire des axes brisés

Les axes verticaux « brisés » sont des axes qui ne sont pas représentés dans leur entièreté, ignorant une section plus ou moins grande, de manière à inclure une donnée « aberrante », qui sinon aurait pour conséquence d’aplatir le reste de la distribution. Cette pratique est déconseillée, car elle donne une représentation erronée des données.

Le temps va de gauche à droite

La société occidentale a une conception du temps linéaire allant de gauche à droite. On suit cette convention lorsque des données temporelles sont présentées.

Utiliser des intervalles logiques

Certaines données peuvent avoir été récoltées à des intervalles irréguliers. Il est important de présenter cette irrégularité de manière visuelle en respectant les écarts qui séparent ces données dans la réalité.

Utiliser des axes similaires

On utilise une même échelle pour les axes de plusieurs graphiques côte à côte qui utilisent les mêmes unités. De cette façon, la comparaison visuelle se fait plus aisément.

Éviter les redondances

Afin d’éviter les redondances entre les axes, les libellés ou la grille de fond, trois approches sont possibles :

  • Libellé sur chaque point de données : à utiliser lorsque la précision est la priorité et que le graphique ne contient pas plus d’une dizaine de points de données.
  • Inclure un axe libellé : méthode qui permet d’alléger les graphiques en soustrayant un élément visuel dans l’espace réservé aux données. Elle offre cependant moins de précisions et ne sert qu’à donner un ordre de grandeur de l’échelle utilisée.
  • Inclure une grille de fond : méthode qui est un compromis entre les libellés et l’axe apparent. Il faut ajouter un libellé à côté de chaque ligne de la grille.

À ne pas faire



À faire



Atténuer les grilles de fond

La grille a moins d’importance que les autres éléments et ne doit pas attirer l’attention. Elle doit cependant respecter les contrastes d’accessibilité et demeurer visible.

Légendes et libellés

Intégrer le texte dans le graphique

Pour qu’un graphique soit plus facile à lire et à comprendre, le texte peut y être directement intégré. Cela évite les allers-retours constants entre le graphique et le texte en périphérie comme cela peut être le cas avec la légende.

À faire



Éviter les acronymes

Même s’ils prennent moins de place, les acronymes sont déconseillés.

Formater des libellés de façon cohérente

Le formatage des libellés doit suivre la hiérarchie visuelle du graphique. Par exemple, si certains éléments doivent être mis en évidence ou atténués, leurs libellés respectifs devront suivre la même logique.

Inclure les sources et les notes

Les sources et les notes doivent être affichées en dessous du graphique, dans un style atténué.

Informations techniques

Chaque graphique est accompagné d’un titre placé au-dessus. Des informations complémentaires peuvent être ajoutées en dessous si nécessaire. Le tout est placé dans un cadre.

Format bureau

La largeur du cadre s’adapte en fonction de celle du graphique.

Un dégagement de 40 px avec le cadre est à prévoir de chaque côté du graphique.

Les dégagements horizontaux à prévoir sont : 48 px au-dessus et en dessous du titre ainsi que 80 px au-dessus et 48 px en dessous des informations complémentaires.

Si le graphique n’a pas d’informations complémentaires, un dégagement de 48 px entre le graphique et la bordure inférieure du cadre est nécessaire.

Un espacement de 72 px précède et suit le cadre.


CSS du cadre
border: 1px solid #c5cad2;

CSS du titre
font-family: Open Sans;
font weight: bold;
font-size: 18px;
color: #223654; 

CSS des informations complémentaires
font-family: Open Sans;
font-style: italic;
font-size: 14px;
color: #6b778a;

Format mobile

Le cadre occupe toute la largeur du contenu.

Un dégagement de 16 px avec le cadre est à prévoir de chaque côté du graphique.

Les dégagements horizontaux à prévoir sont : 40 px au-dessus et en dessous du titre ainsi que 64 px au-dessus et 40 px en dessous des informations complémentaires.

Si le graphique n’a pas d’informations complémentaires, un dégagement de 40 px entre le graphique et la bordure inférieure du cadre est nécessaire.

Un dégagement de 56 px précède et suit le cadre.

Abscisse (axe horizontal)

Deux types de données peuvent être représentés sur l'abscisse : des données séquentielles et des données catégorielles.

Lorsque des données séquentielles sont représentées, l'axe est divisé en intervalles réguliers par des lignes verticales sous lesquelles se trouvent les libellés.

Lorsque des données catégorielles sont représentées, les libellés sont alignés avec l'élément correspondant (généralement une colonne).

Les libellés sont centrés avec l'élément correspondant. Toutefois, si l'espace est restreint et ne permet pas d'afficher les libellés à l'horizontale, ceux-ci peuvent être pivotés à -45°. Dans ce cas, c'est l'extrémité droite du libellé qui est centrée avec l'élément.

Si des intervalles précis ne sont pas nécessaires ou que l'espace est restreint, il est possible d'abstraire les libellés en représentant seulement la plus petite donnée suivie de la plus grande, et de les relier par une flèche pointant vers la droite.

Le titre de l'abscisse est placé sous les libellés. L'unité de mesure peut y être spécifiée afin d'éviter la redondance dans les libellés. Si l'abscisse représente des données catégorielles ou une échelle de temps, il n'est pas nécessaire d'ajouter un titre.

Exemple données séquentielles

Exemple données catégorielles

Exemple données séquentielles abstraites


CSS des libellés et du titre de l'axe
font-family: Open Sans;
font-size: 14px;
color: #6b778a;

CSS de l'abscisse
border: 1px solid #223654;

CSS de la flèche
border: 1px solid #6b778a;

Ordonnée (axe vertical)

Les libellés de l'ordonnée sont placés 4 px au-dessus de chaque ligne horizontale de la grille. L'unité de mesure doit seulement être indiquée pour le premier libellé afin d'éviter de surcharger le graphique.

La grille est placée derrière les données.

Le titre de l'ordonnée peut être placé à la suite du premier libellé, par exemple, « 100 % d’utilisation par navigateur » ou 4 px au-dessus de celle-ci. Cependant, le premier libellé doit toujours rester le premier élément au-dessus de la première ligne. Un titre trop long qui s'affiche sur 2 lignes doit donc être placé au-dessus du libellé.

Exemple titre à la suite du premier libellé

Exemple titre au-dessus du premier libellé


CSS des libellés et du titre de l'axe
font-family: Open Sans;
font-size: 14px;
color: #6b778a;

CSS de la grille de fond
border: 0.5px solid #c5cad2;

Légende

Dans les graphiques plus complexes, une légende s'affiche pour communiquer clairement quelles sont les données représentées. Les graphiques linéaires et les graphiques à aires empilées ou à colonnes empilées sont considérés comme étant complexes.

On affiche la légende lorsqu'il y a deux éléments ou plus.

La légende est placée 32 px sous le graphique en format bureau et 24 px sous le graphique en format mobile. Si l'abscisse a un titre, la légende est placée sous celui-ci.

Les éléments dans la légende peuvent être placés horizontalement ou verticalement en fonction de l'espace disponible.

Exemple légende pour un graphique linéaire au format bureau

Exemple légende pour un graphique à aires empilées au format mobile



Chaque élément de la légende contient un libellé accompagné d'un symbole ayant la même apparence que la série de données concernée (le trait ou le carré). Le symbole est aligné avec la première ligne du libellé.


Dernière mise à jour : 6 novembre 2023

Évaluation de page

L’information sur cette page vous a-t-elle été utile?
Avis général

Des questions ou besoin de renseignements?

Communiquez avec Services Québec