Règles et conseils pour la conception de visualisation de données

Cours 2 - 2025-2026

Matthieu Viry

matthieu.viry@cnrs.fr

CNRS / UAR 2414 RIATE

September 9, 2025

Plan

• Perception visuelle
• Théorie de la Gestalt
• La sémiologie graphique de Jacques Bertin (et ses successeurs)
• Conseils pour la conception de visualisation de données

Source : Four color theorem, Carlos ZGZ, public domain licence.

Perception visuelle

• On ne peut se rappeler que de 4 à 7 éléments d’information à la fois dans notre mémoire à court terme.

• On peut utiliser différents mécanismes de la perception visuelle, lors de la réalisation de visualisation de données, pour aider nos cerveaux à interpréter l’information avant que notre cerveau n’engage sa mémoire à court terme.

Traitement visuel pré-attentif

• Le traitement visuel pré-attentif est un traitement visuel qui se produit avant l’attention consciente.

• Il permet de détecter des caractéristiques visuelles telles que la couleur, la forme, la taille, etc.

Traitement visuel pré-attentif

Par exemple dans le cadre d’un rapport présentant les données d’exportation de la France, par rapport à ses voisins, en 2019 :

dataset = [{name: 'Allemagne', value: 65},{name: 'Albanie', value :59}, {name: 'Italie', value: 80}, {name: 'France', value: 81}, { name: 'Gabon', value: 56}, {name: 'Maroc', value: 55},{name: 'Égypte', value: 40}]

Plot.plot({
  height: 300,
  marks: [
    Plot.barY(dataset, {x: 'name', y: 'value', fill: 'blue'}),
  ]
})

vs.

Plot.plot({
  height: 300,
  marks: [
    Plot.barY(dataset, {x: 'name', y: 'value', fill: (d) => d.name === 'France' ? 'red' : 'blue'}),
  ]
})

Traitement visuel pré-attentif

pré-attentif

dd = [[12, 30], [20, 10], [1, 4], [3, 12], [12, 4], [10, 20], [5, 1], [2, 9], [9, 4], [6, 20], [14, 10],[16, 20]];
Plot.plot({
  height: 300,
  marks: [
    Plot.dot(dd, { fill: (d, i) => i === 4 ? 'red' : 'blue', r: 5 }),
  ]
})

attentif

Plot.plot({
  height: 300,
  marks: [
    Plot.dot(dd, { fill: 'red', symbol: (d, i) => i === 4 ? 'square' : 'circle' }),
  ]
})

Traitement visuel pré-attentif

• Combien y a-t-il de 6 sur cette image ?

2869408609876

9348586748676

2967303986739

3967496749674

Traitement visuel pré-attentif

• Combien y a-t-il de 6 sur cette image ?

2869408609876

9348586748676

2967303986739

3967496749674

Traitement visuel pré-attentif

• Combien y a-t-il de 6 sur cette image ?

2869408609876

9348586748676

2967303986739

3967496749674

Traitement visuel pré-attentif

• Combien y a-t-il de 6 sur cette image ?

2869408609876

9348586748676

2967303986739

3967496749674

Traitement visuel pré-attentif

• Combien y a-t-il de 6 sur cette image ?

2869408609876

9348586748676

2967303986739

3967496749674

La combinaison de plusieurs propriété pré-attentive, ou l’utilisation abusive d’une propriété pré-attentive, peut rendre la lecture difficile (voir plus difficile)

Propriétés pré-attentives

• Les propriétés pré-attentives sont les caractéristiques des éléments visuels qui peuvent être détectées pré-attentivement.

• On peut les classer en 4 catégories :

  • couleur (teinte, saturation, luminosité).
  • forme (taille, orientation, forme)
  • mouvement (scintillement, vitesse, direction)
  • position (x, y, concavité / convexité)

• Ces attributs pré-attentifs illustrent comment les éléments peuvent être mis en évidence dans une visualisation de données.

Théorie de la Gestalt

• Une théorie de la perception qui s’intéresse à la manière dont les êtres humains perçoivent les objets.

• Développée par des psychologues allemands au début du XXe siècle.

• La théorie de la Gestalt est utilisée en design, en psychologie, en ergonomie, en informatique, etc. … et en visualisation de données.

Les principales lois de la Gestalt

• La loi de la proximité - L’esprit imagine naturellement une relation entre 2 objet proche l’un de l’autre
• La loi de la similarité - Lorsque 2 objets se ressemblent, l’esprit tend à les percevoir comme un groupe
• La loi de la continuité - L’oeil suit naturellement une ligne ou une courbe
• La loi de la cloture (ou de la fermeture) - L’esprit clôt une forme incomplète ou un espace non fermé
• La loi de la symétrie - L’oeil associe 2 objets symétriques comme un même groupe unifié
• La loi de la destination commune - L’oeil associe des objets qui se dirigent vers un même point
• La loi de la figure et du fond - L’esprit sépare naturellement un objet de son fond

Les principales lois de la Gestalt

Pour résumer…

• La loi de la proximité - L’esprit imagine naturellement une relation entre 2 objet proche l’un de l’autre
• La loi de la similarité - Lorsque 2 objets se ressemblent, l’esprit tend à les percevoir comme un groupe
• La loi de la continuité - L’oeil suit naturellement une ligne ou une courbe
• La loi de la cloture (ou de la fermeture) - L’esprit clôt une forme incomplète ou un espace non fermé
• La loi de la symétrie - L’oeil associe 2 objets symétriques comme un même groupe unifié
• La loi de la destination commune - L’oeil associe des objets qui se dirigent vers un même point
• La loi de la figure et du fond - L’esprit sépare naturellement un objet de son fond

La sémiologie graphique de Jacques Bertin

• Jacques Bertin (1918-2010) est un cartographe et théoricien de la sémiologie graphique.

• Il a développé une théorie de la visualisation de données dans son ouvrage “Sémiologie graphique” (1967).

• Il a notamment défini les variables rétiniennes (ou variables visuelles) et leurs propriétés.

Les variables visuelles

• Les variables visuelles sont les propriétés des objets visuels qui peuvent être utilisées pour encoder les données.

• Les variables visuelles sont au nombre de 7 :

  • position
  • taille
  • couleur
  • forme
  • orientation
  • texture
  • valeur

Les propriétés des variables visuelles

• Les propriétés des variables visuelles sont les caractéristiques des variables visuelles qui permettent de les distinguer les unes des autres.

• Les propriétés des variables visuelles sont au nombre de 4 :

  • association - les signaux sont perçus comme appartenant à un même groupe
  • sélection - les signaux sont perçus comme différents et forment des familles
  • ordre - les signaux sont perçus comme étant ordonnés
  • proportion (ou différence quantitative) - les signaux sont perçus comme étant proportionnels entre eux / à la valeur qu’ils représentent

Les variables visuelles et leurs propriétés

Les variables visuelles et leurs propriétés

Les variables visuelles et leurs propriétés

Les successeurs de Jacques Bertin : Cleveland & McGill, Mackinlay, etc.

• Depuis les travaux de Jacques Bertin, d’autres chercheurs ont proposé des typologies de variables visuelles et de leurs propriétés.

 

Conseils pratiques pour parvenir à une visualisation de données pertinente

Choisir une forme de graphique adapté

Cf. le cours d’introduction et les exercices en TP

Différentes ressources peuvent aider à choisir le bon type de graphique :

• From Data to Viz
• The Data Visualisation Catalogue
• Chart Chooser
• The Data Viz Project
• The R Graph Gallery

Expressivité, efficacité et pertinence

• Une visualisation est considérée comme expressive si les informations pertinentes d’un ensemble de données (et uniquement celles-ci) sont exprimées par la visualisation. Le terme “pertinent” implique que l’expressivité d’une visualisation ne peut être évaluée qu’en fonction d’un utilisateur particulier travaillant avec la représentation visuelle pour atteindre certains objectifs.

“Une visualisation est dite expressive si et seulement si elle encode toutes les relations de données prévues et aucune autre relation de données” - Stuart Card, 2008

• Une visualisation est efficace si elle tient compte des capacités du système visuel humain. Étant donné que la perception, et donc l’image mentale d’une représentation visuelle, varie d’un utilisateur à l’autre, l’efficacité dépend de l’utilisateur. Néanmoins, certaines règles générales pour une visualisation efficace ont été établies dans la communauté de la visualisation.

“Les critères d’efficacité permettent de déterminer lequel de ces langages graphiques [qui sont expressifs], dans une situation donnée, est le plus efficace pour exploiter les capacités du support de sortie et du système visuel humain. - Mackinlay, 1986

• La pertinence concerne le compromis entre les efforts requis pour créer la représentation visuelle et les avantages qu’elle procure. Si ce compromis est équilibré, la visualisation est considérée comme appropriée.

• La pertinence concerne le compromis entre les efforts requis pour créer la représentation visuelle et les avantages qu’elle procure. Si ce compromis est équilibré, la visualisation est considérée comme appropriée.

Clareté et simplicité

• Les visualisations de données doivent être simples à comprendre : de manière générale, il faudra essayer de choisir la manière la plus simple de transmettre l’information.

• Éviter les éléments visuels complexes et inutiles qui pourraient distraire de l’objectif principal de la visualisation (3D, effets spéciaux, etc.).

Source: https://visuanalyze.wordpress.com/2013/02/05/bad_piecharts/

Source: https://www.data-to-viz.com/

Transmettre un message précis

• Déterminez les relations entre les données et ce que vous voulez montrer en présence de vos données.

• Concentrez-vous sur ce que vous voulez illustrer et sur le message à transmettre à l’aide de votre visualisation de données.

Désencombrement

• L’ennemi de la clareté est le désordre !

• Chaque élément visuel d’un graphique ajoute une charge cognitive (i.e. un effort mental nécessaire à traiter l’information)

• Identifiez ce qui n’apporte pas de valeur ajoutée à votre visualisation et supprimez-le.

Désencombrement

• Selon Tufte, “plus la part d’encre d’un graphique consacrée aux données est importante, mieux c’est” (maximisation du “data-ink ratio”).

dataset2 = [{name: 'January', value: 65},{name: 'February', value :59}, {name: 'March', value: 80}, {name: 'April', value: 81}, { name: 'May', value: 56}, {name: 'June', value: 55},{name: 'July', value: 40}]

Plot.plot({
  grid: true,
  x: { label: null },
  marks: [
    Plot.barY(dataset2, {x: 'name', y: 'value', fill: 'black', fillOpacity: 0.7, stroke: 'black', sort: {"x": null} }),
  ]
})

Plot = require('@observablehq/plot')

Plot.plot({
  grid: true,
  y: {
    domain: [0, 85]
  },
  x: { label: null },
  style: {
    fontFamily: "Inconsolata,monospace",
    fontSize: "17px"
  },
  marks: [
    Plot.frame({ fill: 'brown', fillOpacity: 0.65, stroke: 'black' }),
    Plot.gridX({ interval: 1, stroke: "black", strokeOpacity: 1, strokeWidth: 2.5 }),
    Plot.gridY({ interval: 5, stroke: "black", strokeOpacity: 1, strokeWidth: 2.5 }),
    Plot.barY(dataset2, { x: 'name', y: d => d.value + 1, fill: 'black', fillOpacity: 1, stroke: 'black', dx: 5, sort: {"x": null} }),
    Plot.barY(dataset2, { x: 'name', y: 'value', fill: 'name', fillOpacity: 1, stroke: 'name' }),
  ]
})

• D’autres auteurs parlent de “maximiser le rapport signal/bruit”, le signal étant l’information que nous voulons communiquer.

Désencombrement

Par ailleurs :

• Utilisez une police, une taille de police, une couleur et un alignement uniformes.

• Utilisez des espaces blancs :

  • présence de marges (libres de tout élément visuel)
  • ne pas étirer les graphiques jusqu’au bord de la page (ou trop près des autres éléments visuels)
  • considérez l’espace blanc comme une bordure autour de votre graphique

Titre, description, source, légende, axes, etc.

Il est nécessaire :

• d’expliquer l’encodage des données (via des légendes ou des annotations) et d’inclure les unités de mesure
• d’étiqueter les axes
• de mettre une légende (le cas échéant)
• d’expliquer le contexte de la visualisation (via un titre, une description, etc.)
• de citer la source des données (pour permettre de reproduire la visualisation, pour permettre aux lecteurs de vérifier les informations, etc.)

Titre, description, source, légende, axes, etc.

Le principe de la proportionnalité et la coupure de l’axe Y

• The principle of proportional ink (Bergstrom and West, 2016)

Le principe de la proportionnalité et la coupure de l’axe Y (ou X !)

Source : https://twitter.com/Motorsport/status/1432668101905195013/photo/1

Source : https://observablehq.com/@kenklin/shortest-f1-races-by-distance

While we see the rounded right end of the bars, the left end is left to our imagination. However, when our brains then try to rationalize where the bars start (i.e., KM = 0), we discover an inconsistency in the bars, as annotated in red and green above. The linear distances of the differences between 2021 Belgium / 1991 Australia (approx 46 KM) and 1991 Australia / 1984 Monaco (approx 50 KM) is clearly incorrect.

Le principe de la proportionnalité et la coupure de l’axe Y

• Ça reste un débat ouvert : E. Tufte pense que la coupure de l’axe Y (origine à une autre valeur que 0) peut être pertinente pour des séries temporelles…

“In general, in a time-series, use a baseline that shows the data not the zero point” - Edward Tufte

Le principe de la proportionnalité et la coupure de l’axe Y

• D’autres auteurs (Wilke, 2019) le déconseillent fortement, même pour des séries temporelles, et conseillent l’utilisation éventuelle d’autres représentation (différence par rapport à une valeur de référence, etc.)

Alternative :

Le principe de la proportionnalité

• L’oeil humain est très sensible aux différences de longueur, mais moins aux différences de surface.

• Le diagramme en secteurs (camembert) comporte un double problème : ce sont les angles qui sont comparés, et non les surfaces, et il est d’autant plus difficile de comparer les angles entre eux.

https://www.data-to-viz.com/caveat/pie.html

Vérifier les données

• Valeurs aberrantes
• Pics
• Anomalies

… et les corriger si nécessaire (suppression de valeurs aberrantes, etc.).

Tri des données

• Trier les données à afficher sur les axes pour faciliter la lecture.

Tri des données

Plot.plot({
  marks: [
    Plot.barY(alphabet, {x: "letter", y: "frequency", fill: "darkblue"}), // Sans trier sur l'axe X, même couleur pour tous les individus
    Plot.ruleY([0]) // On ajoute manuelle une ligne horizontale, à la valeur 0
  ]
})

Plot.plot({
  marks: [
    Plot.barY(alphabet, {x: "letter", y: "frequency", fill: "darkblue", sort: {x: "y", reverse: true}}), // On trie sur l'axe X
    Plot.ruleY([0])
  ]
})

Tri des données

Hiérarchiser l’information

• Utiliser la taille, la couleur et la position pour indiquer l’importance et la relation entre les éléments.

• Les éléments plus importants doivent être plus visibles.

Choix des couleurs

• Attention à la signification des couleurs dans différentes cultures.

• Attention à la signification des couleurs dans différents contextes.

Palettes de couleurs

dicopal = import("https://cdn.skypack.dev/dicopal@0.8.1")

function makePalette(colors) {
  return `<div style="display: grid; height: 4rem; padding: 0.5rem; gap: 1px;  
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));">${colors
      .map((t) => `<span style="background:${t};">&nbsp;</span>`)
      .join("")}</div>`;
}

• Catégorielle (categorical)

html`${makePalette(dicopal.getPaletteById('Okabe_Ito_Categorigal_8').colors)}`

• Séquentielle (sequential)

html`${makePalette(dicopal.getPaletteById('Amp_6').colors)}`

html`${makePalette(dicopal.getPaletteById('YlOrRd_6').colors)}`

• Divergente (diverging)

html`${makePalette(dicopal.getPaletteById('PRGn_7').colors)}`

html`${makePalette(dicopal.getPaletteById('RdBu_7').colors)}`

Palettes de couleurs

- Attention aux personnes présentant des difficultés visuelles (daltonisme, etc.) : utilisez des palettes de couleurs adaptées.

Source : https://towardsdatascience.com/is-your-color-palette-stopping-you-from-reaching-your-goals-bf3b32d2ac49

Palettes de couleurs

• Évitez les palettes de couleurs qui pourraient être confuses…
  (+ évitez les différents autres problèmes de la carte de droite !)

Palettes de couleurs

• Utilisez de manière préférentielle des palettes existantes (celles fournis par D3.js, etc.) pour éviter les erreurs.

• En JavaScript :

  • Module d3-scale-chromatic de D3.js
  • Bibliothèque dicopal

• Pour manipuler les couleurs en JavaScript :

  • Bibliothèque chroma-js
  • Bibliothèque mixbox

Contraste et lisibilité

• Assurez-vous que les couleurs utilisées offrent un contraste suffisant pour permettre une lecture facile, même pour les personnes ayant des difficultés visuelles.

function corr(x, y) {
  const n = x.length;
  if (y.length !== n)
    throw new Error("The two columns must have the same length.");
  const x_ = d3.mean(x);
  const y_ = d3.mean(y);
  const XY = d3.sum(x, (_, i) => (x[i] - x_) * (y[i] - y_));
  const XX = d3.sum(x, (d) => (d - x_) ** 2);
  const YY = d3.sum(y, (d) => (d - y_) ** 2);
  return XY / Math.sqrt(XX * YY);
}

fields = ["economy (mpg)", "cylinders", "displacement (cc)", "power (hp)", "weight (lb)", "0-60 mph (s)", "year"]

correlations = d3.cross(fields, fields).map(([a, b]) => ({
  a,
  b,
  correlation: corr(Plot.valueof(cars, a), Plot.valueof(cars, b))
}))

Difficile de lire les valeurs…

Plot.plot({
  marginLeft: 100,
  label: null,
  height: 370,  
  color: { scheme: "rdylbu", pivot: 0, legend: true, label: "correlation" },
  marks: [
    Plot.cell(correlations, { x: "a", y: "b", fill: "correlation" }),

    Plot.text(correlations, {
      x: "a",
      y: "b",
      text: (d) => d.correlation.toFixed(2),
      fill: (d) => 'black'
    })
  ]
})

Meilleure lisibilité :

Plot.plot({
  marginLeft: 90,
  label: null,
  height: 370,
  color: { scheme: "rdylbu", pivot: 0, legend: true, label: "correlation" },
  marks: [
    Plot.cell(correlations, { x: "a", y: "b", fill: "correlation" }),

    Plot.text(correlations, {
      x: "a",
      y: "b",
      text: (d) => d.correlation.toFixed(2),
      fill: (d) => (Math.abs(d.correlation) > 0.6 ? "white" : "black")
    })
  ]
})

Contraste et lisibilité

• Assurez-vous que les couleurs utilisées offrent un contraste suffisant pour permettre une lecture facile, même pour les personnes ayant des difficultés visuelles.

❌

Plot.plot({
  height: 300,
  inset: 10,
  marks: [
    Plot.dot(dd, { fill: 'yellow', r: 5 }),
    Plot.frame()
  ]
})

✅

Plot.plot({
  height: 300,
  inset: 10,
  marks: [
    Plot.dot(dd, { fill: 'steelblue', r: 5 }),
    Plot.frame()
  ]
})

Processus itératif

• Prenez le temps nécessaire à configurer, modifier, tester, corriger, etc. votre visualisation de données : il s’agit d’un processus itératif.

• Demandez des retours à vos collègues, à vos amis, etc.

Source : https://www.e-education.psu.edu/geog586/node/808 - Credit: Blanford, © Penn State University, licensed under CC BY-NC-SA 4.0

Processus itératif

• Pensez à utiliser un gestionnaire de versions de code (Git, etc.) pour pouvoir revenir en arrière et travailler en équipe si nécessaire (sur la plateforme Observable il est possible de travailler à plusieurs sur un notebook et le code des notebooks est automatiquement versionné et il est ainsi possible de revenir à une version précédente).

Trouver des modèles inspirants

• Pour réaliser des visualisations de données efficaces, il est important de s’inspirer de modèles existants.

• Cf. les différentes ressources sur la page d’acceuil de ce cours.

… et éviter les erreurs classiques

Une partie des erreurs classiques sont résumées dans ce cours. D’autres peuvent être consultées sur la page suivante :

• Dataviz caveats

Une autre tentative de résumer des règles de base (et de quand il est OK de passer outre) est disponible sur la page suivante :

• 99 rules project

Si vous voulez vous faire peur, vous pouvez aussi consulter la page suivante dédiée aux visualisation de données ratées :

• WTF Visualizations

 

À vous de jouer !