Séance 2 — Voir et faire voir

Comment parcourir cette séance

Cette leçon n’est pas un catalogue de règles esthétiques. C’est un laboratoire de décisions. À chaque étape, la même démarche revient :

1. prédire ce que vous allez voir;
2. manipuler un exemple;
3. nommer le mécanisme;
4. transférer le mécanisme à un cas professionnel;
5. conserver une limite ou une objection.

En direct, l’enseignant peut partager l’expérience visuelle, recueillir les observations avant d’afficher les explications, puis laisser les personnes participantes comparer leurs interprétations en petits groupes. En lecture autonome, prenez le temps de répondre mentalement aux questions : les explications deviennent beaucoup plus mémorables lorsqu’elles arrivent après une prédiction.

1. Percevoir n’est pas enregistrer

Une caméra reçoit de la lumière. Une personne, elle, cherche quelque chose dans une situation. Elle filtre, regroupe, compare, complète, interprète et s’appuie sur ce qu’elle sait déjà. Cette différence paraît philosophique; elle est très concrète lorsque vous concevez un graphique.

Imaginez un tableau de bord de transport. Une responsable des opérations cherche un retard inhabituel. Un analyste cherche une tendance saisonnière. Une personne usagère cherche l’heure du prochain départ. Les pixels peuvent être identiques, mais la tâche dirige le regard. Une visualisation n’est donc jamais « claire en soi » : elle est plus ou moins claire pour une personne, dans un contexte, afin d’accomplir une tâche.

Cette idée nous protège d’une habitude fréquente : commencer par arranger les éléments jusqu’à ce que « ça ait l’air beau ». Une composition utile commence plutôt par trois questions :

• Qu’est-ce que la personne doit repérer en premier ?
• Quelles comparaisons doit-elle pouvoir faire sans calcul mental inutile ?
• Que peut-elle laisser en arrière-plan sans perdre le sens ?

1.1 Une première expérience de recherche visuelle

Trouvez le 5. Faites d’abord l’essai sans variation, puis avec la couleur, la taille et l’orientation. Ne cherchez pas à obtenir un temps impressionnant : observez plutôt comment votre regard se déplace.

Dans la condition sans variation, chaque caractère ressemble suffisamment aux autres pour que le regard doive explorer plusieurs emplacements. Lorsqu’un seul trait distingue la cible, la recherche peut devenir beaucoup plus efficace. On parle souvent de pop-out : l’élément semble émerger du champ visuel.

Le mot « préattentif » est utile, mais il est souvent vulgarisé de façon excessive. Il ne signifie pas que le cerveau lit instantanément n’importe quel graphique coloré. L’effet dépend notamment :

• du trait qui varie;
• de l’écart entre la cible et les distracteurs;
• du nombre de traits qu’il faut combiner;
• de la densité du champ;
• de l’entraînement, de l’âge et des capacités visuelles;
• de la question posée.

Une cible rouge parmi des cibles grises peut être facile à repérer. Une cible définie comme « le petit triangle rouge parmi des petits triangles bleus et de grands cercles rouges » exige de lier plusieurs propriétés. La recherche devient généralement plus coûteuse.

1.2 Diriger l’attention sans fabriquer une conclusion

Dans un graphique, une mise en évidence remplit idéalement une fonction précise : signaler la série dont parle le titre, attirer l’œil vers une exception, indiquer une sélection ou montrer un seuil. Si cinq éléments sont « mis en évidence », plus rien ne l’est.

On peut penser la hiérarchie visuelle en trois couches :

1. Le signal : l’élément dont dépend le message principal.
2. Le contexte : les autres valeurs nécessaires pour interpréter ce signal.
3. La structure : axes, repères, grilles et annotations qui rendent la lecture possible.

Le signal doit être perceptible. Le contexte doit rester disponible. La structure doit soutenir les deux sans réclamer l’attention pour elle-même.

Cela ne donne pas le droit de rendre une valeur spectaculaire artificiellement. La taille, la couleur et l’annotation orientent la lecture; elles ont donc une responsabilité rhétorique. Un point rouge immense ne se contente pas d’être visible : il suggère de l’urgence et de l’importance. Le design argumente, même lorsqu’aucune phrase n’est écrite.

2. Gestalt : comment les éléments deviennent une structure

Le terme allemand Gestalt désigne une forme organisée, une configuration. Les psychologues de la Gestalt ont montré qu’une scène visuelle n’est pas vécue comme une somme de points indépendants : notre système perceptif tend à les organiser en contours, régions, objets et groupes.

En design, on parle souvent des « lois de la Gestalt ». Le mot loi peut donner l’impression de règles absolues. Il est plus prudent de parler de principes ou d’indices de groupement. Plusieurs indices peuvent agir en même temps, se renforcer ou se contredire.

2.1 Proximité

Des éléments proches sont plus susceptibles d’être perçus comme appartenant au même groupe. C’est souvent l’outil le moins coûteux : il ne demande ni légende ni nouvelle couleur.

Applications immédiates :

• rapprocher un label de la ligne qu’il décrit;
• séparer légèrement deux groupes de barres;
• créer plus d’espace entre les sections d’un tableau de bord qu’entre les éléments d’une même section;
• placer une annotation près de la donnée concernée plutôt que dans une légende lointaine.

Une petite différence d’espacement doit cependant rester perceptible sur mobile. Si deux groupes ne sont séparés que par deux pixels sur un grand écran, ils fusionneront probablement lorsque la page sera réduite.

2.2 Similarité

Des éléments qui partagent une apparence — couleur, forme, orientation, texture — semblent liés. Dans une série de graphiques, conserver la même couleur pour « membres BIXI » crée une continuité. La changer entre les panneaux oblige la personne à réapprendre le code visuel.

La similarité peut aussi tromper. Si toutes les lignes pointillées représentent des prévisions dans un graphique et une moyenne dans le suivant, le style identique suggère une relation qui n’existe pas. Une grammaire visuelle est un contrat : même apparence, même rôle.

2.3 Connexion et région commune

Une ligne entre deux nœuds rend la relation explicite. Un fond commun ou une enceinte place plusieurs éléments dans une même région. Ces indices sont puissants; ils peuvent dominer une simple proximité.

Dans un dashboard, une région commune peut indiquer que trois indicateurs répondent à la même question. Mais encadrer chaque chiffre, chaque filtre et chaque graphique produit une mosaïque de boîtes concurrentes. L’espace blanc suffit souvent à structurer la page.

Dans un graphe de réseau, une connexion n’est pas un embellissement : c’est une donnée. Ajouter une ligne décorative entre deux éléments affirme implicitement un lien. Il faut pouvoir nommer ce lien.

2.4 Bonne continuation et clôture

Le regard tend à suivre une trajectoire continue et à compléter certains contours incomplets. Une courbe relie des observations en une trajectoire plausible; cette continuité est utile, mais elle peut aussi masquer un problème : relier deux points éloignés dans le temps peut suggérer que l’on connaît les valeurs intermédiaires.

La clôture permet d’identifier une forme malgré une interruption. Elle explique pourquoi une grille complète n’est pas nécessaire autour de chaque cellule. Mais elle ne justifie pas de supprimer les repères indispensables : la personne doit encore comprendre l’échelle et les unités.

2.5 Figure et fond

Une composition établit ce qui est figure et ce qui recule à l’arrière-plan. Des grilles trop sombres peuvent rivaliser avec les données. Une carte de fond trop détaillée peut noyer les points que l’on voulait montrer. Inversement, un contexte trop faible rend la donnée flottante et difficile à situer.

La question pratique n’est pas « puis-je enlever cette grille ? », mais « que perd-on si elle disparaît ? ». Pour lire une tendance générale, quelques repères légers suffisent. Pour vérifier un seuil réglementaire, l’axe et la ligne de référence deviennent essentiels.

2.6 Destin commun

Des éléments qui se déplacent ou changent ensemble semblent appartenir au même ensemble. Ce principe sera central en séance 6 : une transition peut aider à suivre l’identité d’un point lorsque les valeurs changent. Une animation où tout bouge en même temps, sans relation sémantique, produit l’effet inverse.

Un test simple : retirer avant d’ajouter

Quand une page semble désorganisée, on ajoute souvent une couleur, une bordure ou un fond. Essayez l’ordre inverse :

1. alignez les éléments qui doivent être comparés;
2. rapprochez ce qui appartient au même groupe;
3. augmentez l’espace entre les groupes;
4. placez les labels au plus près de leurs objets;
5. ajoutez une région ou une connexion seulement si la relation reste ambiguë.

Cette séquence réduit le nombre de codes visuels à apprendre. Elle améliore généralement la lisibilité avant même de choisir une palette.

3. Encoder une donnée, c’est choisir une tâche perceptuelle

Une visualisation transforme une propriété abstraite — une quantité, une catégorie, un ordre — en une propriété visible : position, longueur, angle, aire, couleur, forme. On appelle cette opération encodage visuel.

Le choix n’est pas neutre. Si le revenu devient la longueur d’une barre, la personne compare des positions ou des longueurs. S’il devient l’aire d’un cercle, elle compare des surfaces. S’il devient une teinte, elle doit interpréter une échelle de couleur. La bibliothèque JavaScript n’effectue pas ce raisonnement pour vous : elle exécute l’encodage demandé.

3.1 L’expérience de Cleveland et McGill

En 1984, William Cleveland et Robert McGill ont demandé à des personnes d’estimer des rapports entre des valeurs représentées de différentes façons. L’objectif n’était pas de déterminer quel graphique était « le plus beau », mais de mesurer l’exactitude de tâches perceptuelles élémentaires.

Comparez les mêmes données encodées par position, longueur, angle, aire et couleur :

Le résultat général est robuste : pour comparer précisément des quantités, la position le long d’une échelle commune est généralement très efficace; l’aire, le volume et certaines variations de couleur le sont moins. Heer et Bostock ont reproduit une partie de ces expériences en ligne en 2010 et retrouvé l’ordre général avec des nuances.

Cette hiérarchie est un repère, pas un tribunal. Elle ne mesure pas tout :

• repérer un maximum n’est pas la même tâche qu’estimer un rapport;
• mémoriser une forme n’est pas la même tâche que lire une valeur précise;
• une carte répond à une question spatiale qu’un bar chart ne peut pas remplacer;
• la familiarité avec un graphique change son coût de lecture;
• l’engagement, la narration et le contexte ne sont pas réduits à l’erreur perceptuelle.

3.2 Bertin : les variables visuelles comme vocabulaire

Dans Sémiologie graphique (1967), Jacques Bertin propose un système pour penser les marques et leurs variations. Sa terminologie varie légèrement selon les traductions et les adaptations numériques, mais le cadre reste précieux.

Bertin distingue aussi ce qu’une variable visuelle peut exprimer :

• association / identité : reconnaître les éléments d’une même famille;
• sélection : isoler une famille dans l’ensemble;
• ordre : percevoir un avant/après ou un faible/fort;
• quantité : estimer un rapport ou une magnitude.

Une teinte distincte est excellente pour dire « différent », mais elle n’indique pas naturellement « deux fois plus ». Une longueur est excellente pour la quantité, mais peu pratique pour distinguer dix familles nominales. C’est l’idée d’expressivité : l’encodage ne doit pas faire apparaître une relation qui n’existe pas dans les données, ni faire disparaître une relation importante.

3.3 De la question au graphique

Au lieu de mémoriser « tel champ = tel graphique », partez de l’action cognitive attendue.

Ce tableau ne donne que des points de départ. Une série temporelle de deux dates peut être mieux servie par deux points reliés. Une composition avec de nombreuses catégories peut devenir une barre triée. Une carte peut être spectaculaire et pourtant inutile si la question porte seulement sur un classement.

4. La couleur : une variable de données, pas une couche de peinture

La couleur peut séparer des catégories, représenter un ordre, signaler un écart, attirer l’attention et porter une convention culturelle. Elle peut aussi masquer des différences, créer des frontières fictives, exclure une partie du public et transformer une valeur neutre en alarme.

La bonne première question n’est donc pas « quelles couleurs aimez-vous ? », mais « quelle relation la couleur doit-elle rendre visible ? »

4.1 Trois dimensions à distinguer

Dans un vocabulaire pratique, une couleur possède au moins trois dimensions :

• teinte : la famille chromatique — bleu, orange, vert;
• clarté : l’impression de clair ou de foncé;
• chroma : l’intensité colorée, du gris vers une couleur plus vive.

Pour des catégories sans ordre, on varie surtout la teinte tout en gardant une clarté assez comparable. Pour une quantité ordonnée, une progression de clarté fournit généralement un ordre plus fiable. Pour attirer l’attention, on peut augmenter le contraste de teinte ou de chroma par rapport à un contexte atténué.

RGB et HSL sont commodes pour écrire du CSS, mais leurs pas numériques ne correspondent pas directement à des pas perceptuels égaux. Des espaces comme CIE Lab, Oklab et OkLCh cherchent à mieux séparer clarté et composantes chromatiques. CSS Color Level 4 permet maintenant d’écrire directement oklab() et oklch(). Cela ne rend pas automatiquement une palette juste, mais facilite une construction plus raisonnée.

:root {
  /* Même teinte, clarté croissante : point de départ d'une rampe */
  --faible: oklch(92% 0.04 220);
  --moyen:  oklch(68% 0.09 220);
  --fort:   oklch(42% 0.12 220);
}

4.2 Quatre structures, quatre logiques de palette

Manipulez les quatre cas. Observez en particulier ce que la « mauvaise » palette ajoute ou retire à la structure des valeurs.

Séquentiel

Une palette séquentielle représente une progression : faible → fort, ancien → récent, peu dense → très dense. La clarté doit généralement progresser de façon perceptible et régulière. Une rampe peut rester dans une teinte ou traverser plusieurs teintes si l’ordre demeure clair.

Divergent

Une palette divergente s’organise autour d’une référence qui a un sens : zéro, cible, moyenne, valeur historique. Deux branches montrent les directions opposées et un centre visuellement neutre matérialise la référence. Si aucune valeur centrale n’est importante, une palette divergente invente une opposition.

Catégoriel

Une palette catégorielle distingue des familles sans les classer. Toutes les couleurs doivent rester identifiables sur le fond et entre elles. Il n’existe pas de nombre magique de catégories, mais la lecture se dégrade rapidement lorsque la légende devient un dictionnaire chromatique. Regrouper, filtrer, étiqueter directement ou employer de petits multiples est souvent préférable à ajouter une onzième teinte.

Cyclique

Une palette cyclique convient à une variable dont les extrémités se rejoignent : heure de la journée, direction, phase, jour de l’année. La couleur du début et de la fin doit rendre cette proximité visible.

4.3 Pourquoi l’arc-en-ciel est dangereux pour une quantité

Une palette arc-en-ciel change fortement de teinte et de clarté à des endroits qui ne correspondent pas nécessairement à des ruptures dans les données. Le regard peut y percevoir des bandes ou des frontières qui n’existent pas. L’ordre n’est pas évident, surtout si la légende est éloignée. Certaines zones deviennent difficiles à distinguer pour des personnes ayant une déficience de vision des couleurs.

Ce n’est pas une interdiction morale de toutes les couleurs vives. C’est une exigence de correspondance : si les données sont continues, la progression perceptuelle doit respecter cette continuité. Des palettes comme Viridis ont été conçues pour offrir une variation de clarté plus régulière et rester interprétables dans davantage de conditions.

4.4 Couleur, accessibilité et double encodage

Le daltonisme n’est pas une simulation unique où tout devient gris. Il existe plusieurs formes de déficience de vision des couleurs, avec des intensités variables. La recommandation robuste est simple : ne jamais faire dépendre une information essentielle de la teinte seule.

On peut doubler la couleur par :

• un label direct;
• une forme ou un symbole;
• un motif de trait;
• une position séparée;
• un texte d’état;
• une annotation.

Le contraste est une question distincte. WCAG 2.2 demande notamment un contraste minimal de 4,5:1 pour le texte normal et de 3:1 pour le grand texte. Le critère de contraste non textuel concerne les parties graphiques nécessaires à la compréhension; le guide du W3C explique aussi les exceptions lorsque la même information est disponible sous forme de texte ou de description.

Il faut donc éviter la règle simpliste « toutes les couleurs d’un graphique doivent être à 3:1 les unes des autres ». Ce qui compte est que les marques indispensables restent perceptibles contre leur fond et que l’information ne disparaisse pas si certaines teintes sont confondues. Testez le graphique entier : fond, labels, états de survol, sélection et mode sombre.

4.5 La couleur porte aussi une culture

Rouge peut signifier danger, perte financière, chaleur, interdiction ou appartenance politique. Vert peut signifier réussite, environnement ou croissance. Ces associations varient selon le domaine et la culture. Une convention connue peut accélérer la lecture, mais elle peut également charger une mesure neutre d’un jugement moral.

Si vous colorez en rouge toutes les demandes au service 311 d’un quartier, vous ne montrez pas seulement une quantité : vous pouvez produire l’impression d’un territoire « problématique ». Une carte a besoin d’un dénominateur, d’un contexte et d’un langage prudent, pas seulement d’une palette.

5. Trois traditions à mettre en tension

Le domaine de la visualisation n’a pas une théorie unique. Plusieurs traditions se répondent, parfois en désaccord. Les connaître évite de transformer le nom d’un auteur en règle d’autorité.

5.1 Tufte : densité, intégrité et comparaison

Edward Tufte a popularisé le data-ink ratio, le chartjunk, le lie factor, les petits multiples et l’intégration étroite entre texte et graphique. Sa question centrale pourrait se formuler ainsi : quelle part de la représentation aide réellement à comprendre les données ?

L’idée est puissante lorsqu’elle conduit à alléger une grille, enlever une ombre 3D ou rapprocher une annotation. Elle devient caricaturale si elle mène à supprimer un titre, une unité ou un repère nécessaire sous prétexte que ce n’est pas « de la donnée ». L’encre non consacrée aux marques peut être indispensable à la compréhension.

5.2 Bertin et Cleveland : expressivité et efficacité

Bertin fournit une grammaire : quelles variables visuelles sont disponibles et quelles relations peuvent-elles exprimer ? Cleveland et McGill ajoutent une approche expérimentale : avec quelle précision certaines tâches sont-elles réalisées ? Leur rencontre donne deux questions :

• L’encodage dit-il la bonne chose ?
• Permet-il de la lire avec l’exactitude nécessaire ?

5.3 Cairo, Few et Knaflic : contexte, usage et récit

Alberto Cairo insiste sur une visualisation véridique, fonctionnelle et éclairante. Stephen Few se concentre sur le suivi et la décision dans les tableaux de bord. Cole Nussbaumer Knaflic propose une méthode de communication professionnelle : connaître son audience, réduire l’encombrement, focaliser l’attention et construire une progression narrative.

Ces approches ne s’annulent pas. Elles répondent à des situations différentes. Un tableau de surveillance ouvert huit heures par jour ne se conçoit pas comme une présentation de cinq minutes. Une exploration analytique n’a pas le même degré de guidage qu’une explication publique. Une visualisation peut être rigoureuse sans être froide, narrative sans être trompeuse et belle sans être décorative.

Exemple travaillé : trois étapes de redesign

Supposons un graphique montrant les dix stations BIXI ayant le plus de départs. La première version possède des barres verticales non triées, des noms inclinés, une couleur différente par station, une légende redondante, des quadrillages très sombres et un titre « Nombre de trajets ».

Étape 1 — rétablir la tâche. La question est : « quelles stations concentrent le plus de départs ? » Il faut donc comparer et classer.

Étape 2 — servir la comparaison. On trie les valeurs, passe à des barres horizontales pour lire les noms et affiche directement les valeurs. La position commune devient l’encodage principal.

Étape 3 — orienter sans exagérer. Toutes les barres deviennent neutres sauf la station que le texte discute. Le titre annonce l’observation défendable : « Les départs se concentrent autour de trois stations du centre ». Une note précise la période et le fait qu’il s’agit de départs, pas d’usagers uniques.

Le redesign n’est pas « plus minimaliste » par principe. Il est plus cohérent avec la tâche, le type de donnée et le message.

6. Technique : préparer une vue que Chart.js pourra afficher

La théorie devient utile lorsqu’elle modifie le code. Nous allons préparer une structure de bar chart à partir d’un échantillon BIXI. La question est volontairement simple : quelles stations comptent le plus de départs dans l’échantillon ?

Le pipeline comporte cinq décisions :

1. valider les lignes utiles;
2. choisir la catégorie à regrouper;
3. compter les observations;
4. trier et limiter la vue;
5. produire la forme attendue par Chart.js.

6.1 Partir d’une donnée normalisée

La séance 1 proposait une fonction normalizeTrip. Nous la réutilisons. Une ligne invalide n’est pas silencieusement transformée en zéro : cela créerait une nouvelle donnée.

function normalizeTrip(row) {
  const duration = Number(row.duration_sec);
  const date = new Date(row.start_time ?? row.start_date);

  return {
    station: (row.start_station_name ?? row.start_station)?.trim() || null,
    startedAt: Number.isNaN(date.getTime()) ? null : date,
    durationSec: Number.isFinite(duration) ? duration : null,
    member: row.is_member === "1",
  };
}

const trips = rawRows
  .map(normalizeTrip)
  .filter((trip) => trip.station !== null && trip.startedAt !== null);

Cette étape sépare l’incertitude de stockage du reste de l’analyse. Les fonctions suivantes peuvent travailler sur une structure connue.

6.2 Compter sans perdre le sens du grain

Chaque ligne représente un trajet; compter les lignes par station donne donc un nombre de départs, pas un nombre de personnes ni un niveau de disponibilité.

function countBy(rows, keyFn) {
  const counts = new Map();

  for (const row of rows) {
    const key = keyFn(row);
    counts.set(key, (counts.get(key) ?? 0) + 1);
  }

  return Array.from(counts, ([key, count]) => ({ key, count }));
}

const departuresByStation = countBy(trips, (trip) => trip.station);

Pourquoi utiliser Map plutôt qu’un objet littéral ? Les clés ne risquent pas de rencontrer des propriétés héritées et l’intention de collection clé-valeur est explicite. Object.groupBy est une alternative moderne, mais compter directement évite de conserver en mémoire tous les tableaux de lignes lorsque seul le total est nécessaire.

6.3 Trier, limiter, documenter

const topStations = departuresByStation
  .sort((a, b) => b.count - a.count)
  .slice(0, 10);

Le top 10 améliore la lisibilité, mais il change la portée de la vue. Il faut le dire dans le titre ou le sous-titre. Les stations absentes ne valent pas zéro : elles ont été exclues de l’affichage.

6.4 Construire la structure Chart.js

Chart.js sépare les labels et les valeurs :

export const stationChartData = {
  labels: topStations.map((station) => station.key),
  datasets: [
    {
      label: "Départs observés",
      data: topStations.map((station) => station.count),
    },
  ],
};

La configuration visuelle arrivera en séance 3. Mais les décisions perceptuelles sont déjà prises : un ordre décroissant, une seule mesure, dix catégories, des labels possiblement longs. Cela suggère un bar chart horizontal.

export const stationChartOptions = {
  indexAxis: "y",
  scales: {
    x: {
      beginAtZero: true,
      title: { display: true, text: "Nombre de départs" },
    },
  },
};

beginAtZero est cohérent ici parce que la longueur de la barre représente une magnitude à partir d’une origine. Cette règle ne se transfère pas automatiquement à une courbe de température : tronquer ou non une échelle dépend du type de graphique et de la question.

6.5 Préparer deux questions, pas seulement deux graphiques

Pour sentir la différence entre données et encodage, préparez une deuxième agrégation : le nombre de départs par heure.

const departuresByHour = countBy(
  trips,
  (trip) => trip.startedAt.getHours()
).sort((a, b) => a.key - b.key);

export const hourlyChartData = {
  labels: departuresByHour.map(({ key }) => `${key} h`),
  datasets: [
    {
      label: "Départs observés",
      data: departuresByHour.map(({ count }) => count),
    },
  ],
};

Les deux structures se ressemblent en JavaScript, mais les variables n’ont pas le même sens. Les stations sont nominales et peuvent être triées par valeur. Les heures sont cycliques et doivent rester dans l’ordre temporel. Trier les heures par nombre de départs détruirait le phénomène que l’on cherche à voir.

Voilà pourquoi la séance 1 et la séance 2 viennent avant Chart.js : une bibliothèque peut tracer les deux tableaux, mais elle ne sait pas lequel doit être trié.

7. Atelier — trois portes d’entrée

Il n’y a pas de niveau « réussi » et de niveau « raté ». Choisissez la porte qui vous permet d’observer réellement les effets d’une décision pendant le temps disponible.

Questions de partage

Le débrief n’est pas une correction unique. Comparez les effets :

• À quel moment l’espace a-t-il remplacé une bordure ou une couleur ?
• Quelle décision a le plus changé l’ordre de lecture ?
• Quel graphique était techniquement correct mais perceptuellement coûteux ?
• Quelle palette semblait jolie mais ajoutait une structure absente des données ?
• Quelle limite avez-vous décidé d’écrire dans le graphique plutôt que de cacher ?

Une fiche de décision réutilisable

Avant de construire un graphique, complétez ces sept lignes :

Public et situation :
Décision ou compréhension attendue :
Tâche perceptuelle principale :
Grain et variables utilisées :
Encodage principal :
Rôle exact de la couleur :
Limite à rendre visible :

Si l’une des lignes reste vague, ne compensez pas tout de suite par davantage de technique. Revenez à la question.

Notes de lecture et ressources

• Treisman & Gelade — A Feature-Integration Theory of Attention : source fondatrice sur la recherche de traits et leur intégration.
• Healey & Enns — Attention and Visual Memory in Visualization and Computer Graphics : synthèse directement orientée visualisation.
• Wagemans et coll. — A Century of Gestalt Psychology in Visual Perception : revue contemporaine des principes de groupement et figure-fond.
• Cleveland & McGill — Graphical Perception et Heer & Bostock — réplication par crowdsourcing : fondement empirique de la comparaison des encodages.
• Bertin, Jacques. Sémiologie graphique (1967) : vocabulaire des marques et variables visuelles.
• Crameri, Shephard & Heron — The Misuse of Colour in Science Communication : guide ouvert sur les classes de palettes et leurs mésusages.
• ColorBrewer : outil de Cynthia Brewer pour choisir des palettes séquentielles, divergentes et qualitatives.
• CSS Color Module Level 4 : référence technique pour Lab, LCH, Oklab et OkLCh dans le navigateur.
• W3C — Comprendre le contraste non textuel : interprétation nuancée du critère 1.4.11 pour les graphiques et interfaces.
• Wilke, Claus O. Fundamentals of Data Visualization : manuel gratuit, accessible et richement illustré.

La prochaine séance fera apparaître ces décisions dans le navigateur avec Chart.js. L’objectif ne sera pas simplement d’obtenir un graphique, mais de pouvoir expliquer pourquoi cette marque, cet axe, cet ordre et cette couleur servent la question posée.