Introduction à la visualisation de données

Cours 1 - 2025-2026

Matthieu Viry

matthieu.viry@cnrs.fr

CNRS / UAR 2414 RIATE

September 8, 2025

Plan

• Définition
• Pourquoi visualiser ?
• Histoire de la visualisation de données
• Principaux types de graphiques
• Solutions techniques existantes

Qu’est-ce que la visualisation de données ?

Une définition générale…

“La représentation visuelle et la présentation des données pour en faciliter la compréhension” (Kirk, 2019)

Qu’est-ce que la visualisation de données ?

“La représentation visuelle et la présentation des données pour en faciliter la compréhension”

Qu’est-ce que la visualisation de données ?

“La représentation visuelle et la présentation des données pour en faciliter la compréhension”

données : les données sont des noms, des quantités, des descriptions, des catégories, des mesures, des dates, des lieux, etc. qui sont collectés, enregistrés et stockés dans un format qui peut être traité par un ordinateur.

Qu’est-ce que la visualisation de données ?

“La représentation visuelle et la présentation des données pour en faciliter la compréhension”

représentation visuelle : les décisions sur la manière dont vous allez représenter vos données visuellement afin que la compréhension du sujet qu’elles offrent puisse être rendue accessible à votre public (il s’agit de graphiques et de la sélection du bon graphique pour montrer les caractéristiques de vos données que vous jugez les plus pertinentes. Les éléments constitutifs de tout graphique sont les marques et les attributs - les marques peuvent être des points, des lignes ou des formes et sont utilisées pour représenter des éléments de données)

Qu’est-ce que la visualisation de données ?

“La représentation visuelle et la présentation des données pour en faciliter la compréhension”

présentation : les autres décisions de conception qui constituent l’anatomie complète de toute visualisation de données ( la manière dont nous choisissons d’“emballer” un travail de visualisation pour le transmettre à un public, quel que soit le support ou la méthode de diffusion).

Qu’est-ce que la visualisation de données ?

“La représentation visuelle et la présentation des données pour en faciliter la compréhension”

faciliter la compréhension : qu’est-ce qu’on voit ? que cela signifie-t-il, au regard du sujet traité ?

Qu’est-ce que la visualisation de données ?

Les trois phases de la compréhension (Kirk, 2019, figure 1.4)

L’image de Kirk montre ces trois phases sous forme d’un continuum, illustrant comment le processus de compréhension des données progresse, de la simple observation à la compréhension complète.

Ce modèle est utile pour concevoir des visualisations de données efficaces, car il montre qu’une bonne visualisation ne doit pas seulement faciliter la perception, mais aussi guider l’utilisateur vers une interprétation correcte et une compréhension profonde des données.

1. Perceiving (Perception) :

Définition : Il s’agit de la première phase, où les individus prennent simplement connaissance de la visualisation des données. C’est un processus sensoriel : on observe les graphismes, les couleurs, les formes, les axes, les courbes, etc. On reconnaît les éléments présents, mais on ne fait pas encore d’interprétation significative.

Objectif : L’objectif ici est simplement de capter les informations visuelles de base sans forcément comprendre ce qu’elles signifient.

2. Interpreting (Interprétation) :

Définition : Une fois les données perçues, la phase suivante consiste à interpréter ce que l’on voit. On tente de donner un sens aux éléments observés, en les plaçant dans un contexte. Cela implique de comprendre la relation entre les différents composants de la visualisation, comme les axes, les valeurs et les tendances.

Objectif : C’est l’étape où l’on commence à faire des connexions et à extraire des significations potentielles des données. Cela pourrait inclure des comparaisons entre des groupes, l’identification de tendances ou d’anomalies.

3. Comprehending (Compréhension) :

Définition : La phase finale, celle de la compréhension, est lorsque l’on atteint une compréhension plus profonde des données. Cela va au-delà de l’interprétation et inclut la capacité à tirer des conclusions basées sur les informations visualisées, de manière claire et réfléchie.

Objectif : À ce stade, on est capable d’expliquer ce que les données signifient dans un contexte plus large, d’en tirer des insights utiles et de prendre des décisions éclairées. C’est aussi à ce moment que l’on peut communiquer les résultats de manière concise et précise.

Qu’est-ce que la visualisation de données ?

En d’autres termes…

• une pratique qui consiste à concevoir et à créer des représentations graphiques faciles à communiquer et à comprendre à partir de données statistiques,

• un ensemble de méthodes permettant de résumer de manière graphique ces données statistiques (quantitatives ou qualitatives), à l’aide d’élément visuels statiques, dynamiques ou interactifs.

En d’autres termes, la visualisation de données est un moyen de communiquer l’information clairement et efficacement à travers des représentations graphiques, des diagrammes et des graphiques. La visualisation de données est importante car elle permet aux décideurs d’analyser les données visuellement et de tirer des conclusions rapides et efficaces. Grâce à la visualisation de données, les décideurs peuvent saisir les concepts difficiles ou identifier de nouveaux modèles. La visualisation de données peut également : identifier les zones qui nécessitent une attention ou une amélioration, expliquer les raisons d’un résultat ou d’un événement, prévoir les résultats futurs, établir des relations entre les mesures et les indicateurs, comprendre les facteurs qui influencent les les résultats, établir des liens entre les différentes zones de l’entreprise, etc.

Qu’est-ce que la visualisation de données ?

En réalité, plusieurs types d’usages…

Des différences dans le but à atteindre et même dans le choix des graphiques à mettre en oeuvre :

• Explorer et analyser : explorer un jeu de données, avoir une vue d’ensemble, découvrir des tendances, des corrélations, des anomalies, etc.

• Expliquer : aider les autres à comprendre les données et les relations entre les variables ou les individus, etc.

• Présenter : accompagner votre public dans une argumentation, l’aider à prendre une décision, etc.

Qu’est-ce que la visualisation de données ?

En réalité, plusieurs types d’usages…

• Explorer et analyser : au début, il y a beaucoup de choses à explorer, beaucoup de graphiques réalisable, ne pas passer beaucoup de temps sur chacun d’entre eux, utiliser des graphiques génériques, ne pas les personnaliser ni se préoccuper des couleurs, etc.

• Expliquer : en utiliser le moins possible, en les choisissant avec soin, les ordonner de façon à ce qu’ils soient faciles à comprendre, ajouter de l’interaction pour aider les gens à mieux comprendre

• Présenter : se concentrer sur l’amélioration des graphiques : couleurs, légendes, titres, etc., mise en évidence des éléments clés (ce qui peut être considéré comme un biais dans l’exploration), utilisation éventuelle de graphiques inhabituels pour faciliter la mémorisation

Qu’est-ce que la visualisation de données ?

Distinctions et disciplines associées - Visualisation de données vs. …

Infographie (exemple)

Visualisation d’informations (exemple)

Visualisation scientifique (exemple)

Data journalisme (exemple)

Science des données

Data art (exemple)

Dashboarding (exemple, exemple)

Storytelling (exemple)

Infographies : La distinction classique entre les infographies et la visualisation de données concerne le format et le contenu. Les infographies sont traditionnellement créées pour être imprimées, dans des journaux ou des magazines, par exemple. Les meilleures infographies expliquent les choses graphiquement - systèmes, événements, histoires - et peuvent souvent être généralisées en tant que graphiques d’explication. Les infographies contiennent des graphiques (éléments de visualisation), mais aussi des illustrations, des images photographiques, des diagrammes et du texte. De nos jours, l’art de l’infographie continue d’être produit pour une sortie statique - par opposition à une sortie interactive - indépendamment de la manière et de l’endroit où le travail est publié. Au début de cette décennie, on a assisté à une explosion des différentes formes d’infographies. D’un point de vue puriste, cette vague de travaux était généralement considérée comme une forme inférieure de conception infographique. Ces travaux étaient principalement motivés par le désir marketing d’obtenir des “clics”, plutôt que par une réelle volonté de faciliter la compréhension. Si votre objectif est d’attirer les foules, je pense qu’il s’agit d’une entreprise différente de l’infographie pure et je remettrais en question la légitimité d’associer le terme “infographie” à ces créations ; peut-être pourrait-on plutôt parler d’info-affiches ou de graphiques de tour (ils existent généralement avec une largeur fixe et une longueur importante afin d’être intégrés dans des sites web et sur des plateformes de médias sociaux).

Visualisation de l’information : Des personnes utilisent les termes de visualisation de données et de visualisation d’informations de manière interchangeable, sans se préoccuper outre mesure des différences pertinentes. La distinction générale tend à être façonnée par l’accent mis sur le matériel d’entrée (données) ou la nature de la forme de sortie (information). Il est courant que la visualisation de l’information soit utilisée comme terme pour définir le travail qui consiste principalement à visualiser des structures de données abstraites telles que des arbres ou des graphiques (réseaux) ainsi que d’autres données qualitatives (en se concentrant donc davantage sur les relations que sur les quantités).

Visualisation scientifique : Il s’agit d’une autre forme d’un terme utilisé par de nombreuses personnes pour différentes applications. Certains qualifient l’analyse exploratoire des données de visualisation scientifique (en s’inspirant des méthodes scientifiques d’analyse et de raisonnement sur les données). D’autres l’associent à l’utilisation de la visualisation pour concevoir des ensembles de données très complexes et multivariés concernant spécifiquement des questions à caractère scientifique (telles que la modélisation des fonctions du cerveau ou des structures moléculaires).

Journalisme de données : Également connu sous le nom de journalisme axé sur les données (JAD), il s’agit de l’importance de plus en plus reconnue des compétences numériques, informatiques et en matière de données dans le domaine du journalisme. Dans un sens, il s’agit d’une adaptation de la visualisation des données, mais avec des racines incontestablement plus profondes dans les responsabilités du reporter/journaliste.

La science des données : En tant que domaine, la science des données est difficile à définir. Il est donc plus facile de l’examiner sous l’angle des fonctions d’un scientifique des données. Les scientifiques des données sont quelque peu semblables à des licornes en ce sens qu’ils possèdent - ou sont censés posséder - un répertoire presque grotesque de capacités couvrant l’ensemble des exigences liées à la collecte, au traitement, à l’analyse et à la présentation des données. En règle générale, le scientifique des données travaille avec des données de grande taille et d’une grande complexité. Les scientifiques des données possèdent de solides compétences en mathématiques, en statistiques et en informatique, ainsi qu’une expérience commerciale approfondie. On attend également d’eux qu’ils possèdent des aptitudes dites “plus douces”, telles que la résolution de problèmes, la communication et la présentation.

L’art des données : Hormis les disputes sur les mérites de certains travaux infographiques, le data art est sans doute l’autre discipline liée à la visualisation qui a historiquement suscité le plus de débats. Encore une fois, il est peut-être raisonnable de suggérer que le bruit s’est calmé ces jours-ci, mais sa simple existence parvient encore à agiter certaines sections de l’illuminati de la visualisation de données. Les artistes des données travaillent avec une matière première similaire sous la forme de données, mais leur objectif n’est pas de faciliter le type de compréhension qu’une visualisation de données chercherait à obtenir. L’art des données consiste plutôt à rechercher une forme d’expression personnelle ou d’exposition esthétique en utilisant les données comme peinture et les algorithmes comme pinceau. En tant que spectateur, le sens que vous tirez des expositions de data art dépend entièrement de l’interprétation personnelle qu’elles invitent à faire.

Tableau de bord : Il s’agit de méthodes populaires pour afficher des visualisations multiples et des informations statistiques. Les tableaux de bord prennent souvent la forme d’un instrument organisationnel qui offre à la fois des vues d’ensemble et des vues détaillées de nombreuses dimensions analytiques et d’information différentes. Les tableaux de bord ne constituent pas un type de graphique unique en soi, mais doivent plutôt être considérés comme des compositions comprenant plusieurs types de graphiques.

Storytelling : Il s’agit d’un terme de plus en plus courant qui est souvent mal utilisé et mal compris, ce qui est tout à fait compréhensible. Les histoires sont généralement construites sur une certaine notion de mouvement, de mouvement, de changement ou de narration. Les graphiques montrant des tendances ou des activités sur un plan temporel ou les cartes décrivant des relations spatiales offrent des affichages qui correspondent le mieux à l’idée d’une histoire. relations spatiales offrent des représentations qui sont les plus cohérentes avec l’idée d’une histoire. Un diagramme à barres ne représente pas à lui seul une histoire, au sens où la plupart des gens l’entendent, mais si vous montrez une paire de diagrammes en bâtons pour représenter une situation avant-après, vous pouvez utiliser un diagramme en bâtons pour représenter une situation après-après. pour représenter une comparaison avant-après, vous avez créé une dynamique de changement.

Pourquoi visualiser ?

Proportion de ventes par type au cours du temps (Kirk, 2019, figure 1.2)

S’il est possible, à la lecture du tableau, de répondre à des questions simples comme “quel est le pourcentage de ventes réalisées online par le vendeur en Avril 2016 ?” (c’est 84),

…il est difficile de mener des réflexions plus générale comme “quelle est l’évolution de chaque canal de vente au cours du temps ?”.

Pourquoi visualiser ?

Proportion de ventes par type au cours du temps (Kirk, 2019, figure 1.3)

Pourquoi visualiser ?

Dans un article de 1973, Francis Anscombe a publié quatre petits ensembles de données, aujourd’hui connus sous le nom de “quartet d’Anscombe”, afin de montrer les limites des statistiques sommaires.

Les quatre ensembles de données du quartet partagent plusieurs propriétés statistiques : leurs valeurs moyennes, leurs variances et leurs coefficients de corrélation.

	Mean X	Mean Y	Variance X	Variance Y	Correlation
I	9.0	7.5	11.0	4.125	0.816
II	9.0	7.5	11.0	4.125	0.816
III	9.0	7.5	11.0	4.125	0.816
IV	9.0	7.5	11.0	4.125	0.816

Sur le papier, ils semblent donc assez semblables les uns aux autres, mais lorsque nous les visualisons, ils sont clairement différents.

Pourquoi visualiser ?

	Mean X	Mean Y	Variance X	Variance Y	Correlation
I	9.0	7.5	11.0	4.125	0.816
II	9.0	7.5	11.0	4.125	0.816
III	9.0	7.5	11.0	4.125	0.816
IV	9.0	7.5	11.0	4.125	0.816

anscombe = [{"group":"I","x":10,"y":8.04},{"group":"I","x":8,"y":6.95},{"group":"I","x":13,"y":7.58},{"group":"I","x":9,"y":8.81},{"group":"I","x":11,"y":8.33},{"group":"I","x":14,"y":9.96},{"group":"I","x":6,"y":7.24},{"group":"I","x":4,"y":4.26},{"group":"I","x":12,"y":10.84},{"group":"I","x":7,"y":4.82},{"group":"I","x":5,"y":5.68},{"group":"II","x":10,"y":9.14},{"group":"II","x":8,"y":8.14},{"group":"II","x":13,"y":8.74},{"group":"II","x":9,"y":8.77},{"group":"II","x":11,"y":9.26},{"group":"II","x":14,"y":8.1},{"group":"II","x":6,"y":6.13},{"group":"II","x":4,"y":3.1},{"group":"II","x":12,"y":9.13},{"group":"II","x":7,"y":7.26},{"group":"II","x":5,"y":4.74},{"group":"III","x":10,"y":7.46},{"group":"III","x":8,"y":6.77},{"group":"III","x":13,"y":12.74},{"group":"III","x":9,"y":7.11},{"group":"III","x":11,"y":7.81},{"group":"III","x":14,"y":8.84},{"group":"III","x":6,"y":6.08},{"group":"III","x":4,"y":5.39},{"group":"III","x":12,"y":8.15},{"group":"III","x":7,"y":6.42},{"group":"III","x":5,"y":5.73},{"group":"IV","x":8,"y":6.58},{"group":"IV","x":8,"y":5.76},{"group":"IV","x":8,"y":7.71},{"group":"IV","x":8,"y":8.84},{"group":"IV","x":8,"y":8.47},{"group":"IV","x":8,"y":7.04},{"group":"IV","x":8,"y":5.25},{"group":"IV","x":19,"y":12.5},{"group":"IV","x":8,"y":5.56},{"group":"IV","x":8,"y":7.91},{"group":"IV","x":8,"y":6.89}]
Plot.plot({
  grid: true,
  inset: 10,
  width: 928,
  height: 240,
  facet: {
    data: anscombe,
    x: "group"
  },
  marks: [
    Plot.frame(),
    Plot.dot(anscombe, {x: "x", y: "y"}),
    Plot.linearRegressionY(anscombe, {x: "x", y: "y", stroke: "steelblue", ci: 0})
  ],
})

“…make both calculations and graphs. Both sorts of output should be studied; each will contribute to understanding.” — Francis John Anscombe

“The greatest value of a picture is when it forces us to notice what we never expected to see.” — John Tukey

Pourquoi visualiser ?

Plus récemment, Alberto Cairo a conçu le DataSaurus pour faire le même constat : il faut visualiser les données pour voir le dino.

datasaurus = [{"A":55.3846,"B":97.1795},{"A":51.5385,"B":96.0256},{"A":46.1538,"B":94.4872},{"A":42.8205,"B":91.4103},{"A":40.7692,"B":88.3333},{"A":38.7179,"B":84.8718},{"A":35.641,"B":79.8718},{"A":33.0769,"B":77.5641},{"A":28.9744,"B":74.4872},{"A":26.1538,"B":71.4103},{"A":23.0769,"B":66.4103},{"A":22.3077,"B":61.7949},{"A":22.3077,"B":57.1795},{"A":23.3333,"B":52.9487},{"A":25.8974,"B":51.0256},{"A":29.4872,"B":51.0256},{"A":32.8205,"B":51.0256},{"A":35.3846,"B":51.4103},{"A":40.2564,"B":51.4103},{"A":44.1026,"B":52.9487},{"A":46.6667,"B":54.1026},{"A":50,"B":55.2564},{"A":53.0769,"B":55.641},{"A":56.6667,"B":56.0256},{"A":59.2308,"B":57.9487},{"A":61.2821,"B":62.1795},{"A":61.5385,"B":66.4103},{"A":61.7949,"B":69.1026},{"A":57.4359,"B":55.2564},{"A":54.8718,"B":49.8718},{"A":52.5641,"B":46.0256},{"A":48.2051,"B":38.3333},{"A":49.4872,"B":42.1795},{"A":51.0256,"B":44.1026},{"A":45.3846,"B":36.4103},{"A":42.8205,"B":32.5641},{"A":38.7179,"B":31.4103},{"A":35.1282,"B":30.2564},{"A":32.5641,"B":32.1795},{"A":30,"B":36.7949},{"A":33.5897,"B":41.4103},{"A":36.6667,"B":45.641},{"A":38.2051,"B":49.1026},{"A":29.7436,"B":36.0256},{"A":29.7436,"B":32.1795},{"A":30,"B":29.1026},{"A":32.0513,"B":26.7949},{"A":35.8974,"B":25.2564},{"A":41.0256,"B":25.2564},{"A":44.1026,"B":25.641},{"A":47.1795,"B":28.718},{"A":49.4872,"B":31.4103},{"A":51.5385,"B":34.8718},{"A":53.5897,"B":37.5641},{"A":55.1282,"B":40.641},{"A":56.6667,"B":42.1795},{"A":59.2308,"B":44.4872},{"A":62.3077,"B":46.0256},{"A":64.8718,"B":46.7949},{"A":67.9487,"B":47.9487},{"A":70.5128,"B":53.718},{"A":71.5385,"B":60.641},{"A":71.5385,"B":64.4872},{"A":69.4872,"B":69.4872},{"A":46.9231,"B":79.8718},{"A":48.2051,"B":84.1026},{"A":50,"B":85.2564},{"A":53.0769,"B":85.2564},{"A":55.3846,"B":86.0256},{"A":56.6667,"B":86.0256},{"A":56.1538,"B":82.9487},{"A":53.8462,"B":80.641},{"A":51.2821,"B":78.718},{"A":50,"B":78.718},{"A":47.9487,"B":77.5641},{"A":29.7436,"B":59.8718},{"A":29.7436,"B":62.1795},{"A":31.2821,"B":62.5641},{"A":57.9487,"B":99.4872},{"A":61.7949,"B":99.1026},{"A":64.8718,"B":97.5641},{"A":68.4615,"B":94.1026},{"A":70.7692,"B":91.0256},{"A":72.0513,"B":86.4103},{"A":73.8462,"B":83.3333},{"A":75.1282,"B":79.1026},{"A":76.6667,"B":75.2564},{"A":77.6923,"B":71.4103},{"A":79.7436,"B":66.7949},{"A":81.7949,"B":60.2564},{"A":83.3333,"B":55.2564},{"A":85.1282,"B":51.4103},{"A":86.4103,"B":47.5641},{"A":87.9487,"B":46.0256},{"A":89.4872,"B":42.5641},{"A":93.3333,"B":39.8718},{"A":95.3846,"B":36.7949},{"A":98.2051,"B":33.718},{"A":56.6667,"B":40.641},{"A":59.2308,"B":38.3333},{"A":60.7692,"B":33.718},{"A":63.0769,"B":29.1026},{"A":64.1026,"B":25.2564},{"A":64.359,"B":24.1026},{"A":74.359,"B":22.9487},{"A":71.2821,"B":22.9487},{"A":67.9487,"B":22.1795},{"A":65.8974,"B":20.2564},{"A":63.0769,"B":19.1026},{"A":61.2821,"B":19.1026},{"A":58.7179,"B":18.3333},{"A":55.1282,"B":18.3333},{"A":52.3077,"B":18.3333},{"A":49.7436,"B":17.5641},{"A":47.4359,"B":16.0256},{"A":44.8718,"B":13.718},{"A":48.7179,"B":14.8718},{"A":51.2821,"B":14.8718},{"A":54.1026,"B":14.8718},{"A":56.1538,"B":14.1026},{"A":52.0513,"B":12.5641},{"A":48.7179,"B":11.0256},{"A":47.1795,"B":9.8718},{"A":46.1538,"B":6.0256},{"A":50.5128,"B":9.4872},{"A":53.8462,"B":10.2564},{"A":57.4359,"B":10.2564},{"A":60,"B":10.641},{"A":64.1026,"B":10.641},{"A":66.9231,"B":10.641},{"A":71.2821,"B":10.641},{"A":74.359,"B":10.641},{"A":78.2051,"B":10.641},{"A":67.9487,"B":8.718},{"A":68.4615,"B":5.2564},{"A":68.2051,"B":2.9487},{"A":37.6923,"B":25.7692},{"A":39.4872,"B":25.3846},{"A":91.2821,"B":41.5385},{"A":50,"B":95.7692},{"A":47.9487,"B":95},{"A":44.1026,"B":92.6923}]

Plot.plot({
  marks: [
    Plot.dot(datasaurus, {x: "A", y: "B", fill: "steelblue"})
  ],
  height: 400,
  width: 400
})

Des chercheurs d’AutoDesk ont mis au point un système astucieux pour créer des ensembles de données de formes différentes qui partagent des statistiques sommaires : https://www.research.autodesk.com/publications/same-stats-different-graphs/.

Pourquoi visualiser ?

• Augmenter les ressources cognitives : utiliser une ressource visuelle permet de réduire la charge cognitive en utilisant la capacité de traitement visuel de notre cerveau.
• Réduire la recherche d’information : par exemple en représentant une grande quantité de données dans un espace réduit.
• Améliorer la reconnaissance de motifs : notre cerveau est très bon pour reconnaître des motifs visuels.
• Faciliter la comparaison ou la déduction de relations qui seraient autrement difficile à voir.
• Fournir un support manipulable : les graphiques interactifs permettent de manipuler les données et de les explorer.

Pourquoi visualiser ?

⇒ Parce que notre perception visuelle est incroyablement puissante pour reconnaître les motifs et identifier les structures dans les données.

Ce n’est pas une coïncidence si, lorsque nous comprenons quelque chose, nous disons “je vois”…

Histoire de la visualisation de données

Les prémices ?

Contrairement à ce que l’on croit généralement, la visualisation des données n’est pas un développement moderne.

Dès la préhistoire, des données stellaires ou des informations telles que l’emplacement des étoiles ont été visualisées sur les parois des grottes (comme celles de la grotte de Lascaux dans le sud de la France) depuis l’ère du Pléistocène.

Des artefacts physiques tels que les jetons d’argile mésopotamiens (5500 av. J.-C.), les quipus incas (2600 av. J.-C.) et les diagrammes à bâtons des Îles Marshall (n.d.) peuvent également être considérés comme visualisant des informations quantitatives.

Histoire de la visualisation de données

Les prémices ?

Mouvement des planètes au cours du temps, par Macrobius, 10ème siècle (Source: https://commons.wikimedia.org/wiki/File:Mouvement_des_plan%C3%A8tes_au_cours_du_temps.png)

Histoire de la visualisation de données

Les prémices ?

Des représentations graphiques en forme d’arbres ont été utilisées pour visualiser les relations familiales au moyen-âge (et probablement bien avant)

Arbre de Lulle, 15ème siècle (Source: https://fr.m.wikipedia.org/wiki/Fichier:ArborLulle.jpg)

Histoire de la visualisation de données

Les prémices ?

Arbre généalogique de la famille Magia, 1578 (Source: https://gallica.bnf.fr/ark:/12148/btv1b8496581k/f28.item)

Histoire de la visualisation de données

Les pionniers - Nicolas Oresme (1322-1382)

• Méthode de représentation graphique des variations d’une grandeur (qu’il appelle qualité) en fonction d’une autre grandeur.

(Source: L’œuvre scientifique de Nicole Oresme, Alain Costé, 1997)

Il considère par exemple un corps dont la chaleur n’est pas homogène mais varie suivant l’endroit où on la mesure. Afin de représenter les variations de la chaleur, il imagine une droite tracée dans ce corps. Il appelle longitudino la longueur qui sépare un point courant de la droite à un point origine arbitrairement fixé. En chaque point de cette droite il élève une perpendiculaire dont la hauteur, latitudino, est proportionnelle à l’intensité de la chaleur au point correspondant du corps. Il obtient ainsi une figure géométrique dont l’examen rend plus aisé l’étude des variations de la chaleur.

«Les propriétés de cette qualité, écrit-il, en seront examinées plus clairement et plus facilement dès lors que quelquechose qui lui est semblable est dessiné en une figure plane, et que cette chose, rendue claire par exemple visible, est saisie rapidement et parfaitement par imagination …car l’imagination des figures aide grandement à la connaissance des choses même»

Histoire de la visualisation de données

Les pionniers - Charles-René de Fourcroy (1715-1791)

• Il est le premier à utiliser des diagrammes pour représenter des données statistiques.

Source : https://commons.wikimedia.org/wiki/File:Tableau_Pol%C3%A9ometrique,_1782.jpg

Chaque ville est représentée par un carré dont la superficie est proportionnelle à la zone géographique occupée par la ville (et pour les plus petites villes, par un demi-carré seulement, divisé par la ligne diagonale). Une fois superposés, les carrés sont classés automatiquement. Il en résulte des regroupements visuels, qui amènent l’auteur à proposer une classification urbaine

Histoire de la visualisation de données

Les pionniers - Joseph Priestlet (1733-1804)

• Inventeur de la timeline moderne

Source : https://commons.wikimedia.org/wiki/File:A_New_Chart_of_History_color.jpg

Histoire de la visualisation de données

Les pionniers - William Playfair (1759-1823)

• Il est le premier à représenter des données statistiques en utilisant :
  • diagrammes à barres
  • diagrammes linéaires (série statistique chronologique)
  • diagrammes à secteurs (camemberts / pie charts)

“[…] quand il s’agit de reconnaitre la proportion qui existe entre diverses quantités, ou diverses grandeurs, l’oeil a une supériorité étonnante pour la saisir.”

Ingénieur et économiste écossais..

Playfair a introduit trois grands types de diagramme : en 1786 la série chronologique et l’histogramme de données économiques, puis en 1801 le diagramme circulaire montrant les proportions relatives des parties au tout.

Histoire de la visualisation de données

Les pionniers - William Playfair (1759-1823)

Source : https://commons.wikimedia.org/wiki/File:Playfair_Barchart.gif

Histoire de la visualisation de données

Les pionniers - William Playfair (1759-1823)

Source : https://commons.wikimedia.org/wiki/File:Playfair_piecharts.jpg

Histoire de la visualisation de données

Les pionniers - William Playfair (1759-1823)

Source : https://commons.wikimedia.org/wiki/File:Playfair_interest_national_debt.png

Histoire de la visualisation de données

Les pionniers - William Playfair (1759-1823)

Source : https://commons.wikimedia.org/wiki/File:Playfair_TimeSeries.png

Histoire de la visualisation de données

Les pionniers - William Playfair (1759-1823)

Source : https://commons.wikimedia.org/wiki/File:Chart_Showing_at_One_View_the_Price_of_the_Quarter_of_Wheat,_and_Wages_of_Labour_by_the_Week,_from_1565_to_1821.png

On y retrouve : - le salaire hebdomadaire moyen d’un ouvrier - le prix du blé par quart - les rois / reines d’Angleterre

Histoire de la visualisation de données

Les pionniers - Charles Joseph Minard (1781-1870)

• Pionnier de la visualisation de données géographiques et des représentations de type diagramme de flux.

Source : https://en.wikipedia.org/wiki/File:Minard.png

Pour en savoir plus sur Minard : https://visionscarto.net/charles-joseph-minard-cinquante-cartes

Carte figurative des pertes successives en hommes de l’armée française dans la campagne de Russie 1812-1813, « probablement le meilleur graphique statistique jamais dessiné » d’après le statisticien sémiologue Edward Tufte.

Cette carte associe aux repères géographiques, la taille de l’armée, son itinéraire, et la température ressentie par les soldats.

Charles-Joseph Minard utilise des couleurs sobres qui donnent une lisibilité exceptionnelle aux données.

On y découvre que l’effectif massif de l’armée à son départ (bande beige) se restreint au fil de la route, pour n’en devenir qu’une fraction à son retour (bande noire).

Minard introduit également la température comme causalité partielle de l’érosion des effectifs. En présentant l’évolution des températures au fur et à mesure de la progression de l’armée il met en situation un facteur qui a eu une incidence évidente sur la mortalité des troupes.

Histoire de la visualisation de données

Les pionniers - Charles Dupin (1784-1873)

• Pionnier de la cartographie thématique (cartes statistiques / cartes choroplèthes)

Source : https://commons.wikimedia.org/wiki/
File:Carte_figurative_de_l%27instruction_populaire_de_la_France.jpg

Les variables visuelles de la carte sont constituées d’un nuancier de hachures de couleur noire, sans aplat blanc (même la mer est représentée avec un figuré hachuré concentrique léger), allant d’une saturation faible au noir complet. Les figurés linéaires utilisés sont les contours simplifiés des départements français et les frontières de la France sous leur forme de 1826a. La Corse (à l’époque département unique) n’est pas représentée. Il n’y a pas de légende et les valeurs sont exprimées directement dans les départements. Il s’agit donc à la fois d’une carte à lire et d’une carte à voir.

La légende est la suivante :

« Parallèle statistique relatif à l’enseignement populaire, à l’instruction supérieure, à l’industrie, à la richesse privée, aux revenus publics, entre la France du Nord, la France du Sud et la totalité de la France. Dans notre carte, la noirceur des teintes correspond à la grandeur des nombres placés au-dessous du nom de chaque Département. Cette teinte et ce nombre indiquent combien il faut de personnes pour fournir un enfant mâle aux écoles. Ainsi le département de la Moselle compte un élève par dix habitants, et celui de la Haute-Loire un par 268 habitants. Les Départements les plus éclairés sur la carte, sont par conséquent ceux qui possèdent l’instruction primaire la plus étendue. J’appelle France du Nord les 32 départements séparés par une ligne presque droite, menée de Saint-Malo jusqu’à Genève. Les 54 autres départements forment la France du Sud. »

Histoire de la visualisation de données

Les pionniers - Florence Nightingale (1820-1910)

• Pionnière de la visualisation de données en santé publique et des représentations de type diagramme circulaire.

Source : https://commons.wikimedia.org/wiki/File:Nightingale-mortality.jpg

Histoire de la visualisation de données

Au XXème siècle - John Tukey (1915-2000)

• Contribution majeure au développement de l’analyse exploratoire des données (exploratory data analysis) dans les années 1960

• Met en avant le rôle de la visualisation dans le processus d’analyse des données

• Développe des méthodes de visualisation statistique comme les diagrammes de boîtes (boxplots) et les matrices de nuages de points (scatterplot matrices)

Histoire de la visualisation de données

Au XXème siècle - Jacques Bertin (1918-2010)

• Publie l’ouvrage “Sémiologie graphique. Les diagrammes, les réseaux, les cartes” (1967)
  • explique comment mobiliser le système de signes propre à la visualisation de données statistiques
  • “variables rétiniennes” (variable visuelles : taille, valeur, grain, couleur, orientation, forme)
• Concepts très utilisés en cartographie

Histoire de la visualisation de données

Au XXème siècle - Edward Tufte (1942-*)

• Publie l’ouvrage “The Visual Display of Quantitative Information” (1983), qui devient rapidement une référence dans le domaine de la visualisation de données
  • décrit de nombreux principes de conception de visualisation de données
  • présente de nombreux exemples de visualisation de données
  • “lie factor”, “data-ink ratio”, “chartjunk”, etc.
• Popularise des représentation comme les mini-graphes (sparklines).

Source: https://fr.wikipedia.org/wiki/Visualisation_de_donn%C3%A9es

Histoire de la visualisation de données

Au XXème siècle - Ben Shneiderman (1947-*)

• Plutôt dans ce qu’on pourrait qualifier d’information visualisation que de data visualisation à proprement parler

• Propose le modèle de visualisation overview first, zoom and filter, then details on demand (1996)

• Propose les treemap (1992)

Les principaux types de visualisation (1)

Visualiser des quantités

Source: Fundamentals of Data Visualization,
Claus O. Wilke, 2019 (Licence CC BY-NC-ND 4.0)

• Diagramme à barres
• Digramme à barres groupées
• Diagramme à barres empilées
• Carte de chaleur

L’approche la plus classique pour visualiser des quantités (des valeurs numériques disponibles pour un ensemble d’individus ou de catégories) consiste à utiliser des graphiques à barres ou des graphiques à colonnes. Toutefois, plutôt que d’utiliser des barres ou des colonnes, il est également possible d’utiliser des formes géométriques ponctuelles (comme des cercles ou des carrés).

Les principaux types de visualisation (2)

Visualiser des distributions

Source: Fundamentals of Data Visualization,
Claus O. Wilke, 2019 (Licence CC BY-NC-ND 4.0)

• Histogramme, Diagramme de densité,
  Diagramme de densité cumulée,
  Diagramme quantile-quantile
• Boîte à moustaches, Diagramme en violon, etc.
• Histogramme empilé,
  Diagramme de densité empilé, etc.

S’il y a 2 ou plusieurs ensemble de catégories ou d’individus pour lesquels on veut représenter des quantités, il est possible de grouper ou d’empiler les barres ou les colonnes. Il est aussi possible de faire correspondre les catégories à des coordonnées sur les axes x et y et de représenter les quantités par des couleurs via une heatmap.

Les principaux types de visualisation (3)

Visualiser des proportions

Source: Fundamentals of Data Visualization,
Claus O. Wilke, 2019 (Licence CC BY-NC-ND 4.0)

• Diagramme circulaire (ou à secteurs), diagramme à barre et diagramme à barre empilée
• Carte proportionnelle ou carte à cases (treemap)
• Parallel sets / Diagramme de Sankey / Diagramme alluviaux

Les histogrammes et les graphiques de densité fournissent la visualisation la plus intuitive d’une distribution de valeurs mais elles requièrent un certain nombre de décisions de conception. Des représentation de densités cumulées ou de type “quantile-quantile” représentent la distribution sans avoir à faire ces choix, mais peuvent être plus difficile à interpréter.

Boxplot, violin charts, etc. sont utiles pour visualiser plusieurs distributions à la fois et/ou si on veut comparer des distributions.

Les principaux types de visualisation (4)

Visualiser des proportions et les comparer

Source: Fundamentals of Data Visualization,
Claus O. Wilke, 2019 (Licence CC BY-NC-ND 4.0)

• Notion de facettage (faceting, small multiples)

Les proportions peuvent être visualisées à l’aide de camemberts (pie chart), de diagrammes en barres ou de barres empilées (comme pour visualiser des quantités, c’est à dire dans le sens vertical ou horizontal).

Les principaux types de visualisation (5)

Relations x-y / entre deux variables

Des représentations simples…

Source: Fundamentals of Data Visualization,
Claus O. Wilke, 2019 (Licence CC BY-NC-ND 4.0)

• Nuage de points, graphique à bulles

Les principaux types de visualisation (6)

Relations x-y / entre deux variables

Ou plus complexes…

Source: Fundamentals of Data Visualization,
Claus O. Wilke, 2019 (Licence CC BY-NC-ND 4.0)

• Contour de densité de points, regroupement en cellule ou regroupement hexagonal, corrélogramme
• Diagramme à ligne brisée (diagramme linéaire), diagramme linéaire lissé

Les principaux types de visualisation (7)

Visualiser des données spatiales

Source: Fundamentals of Data Visualization,
Claus O. Wilke, 2019 (Licence CC BY-NC-ND 4.0)

• Carte de localisation
• Carte choroplèthe
• Carte de symboles proportionnels
• Cartogramme (carte à aire égale / anamorphose)

Les outils de visualisation (1)

Outils clés en main et outils type BI

• Flourish
• Datawrapper
• RAWGraphs
• DataVizProject

• Tableau
• Power BI
• Qlik

• Excel / LibreOffice Calc

Les outils de visualisation (2)

Bibliothèques de visualisation

En JavaScript :

• D3.js
• Vega et Vega-Lite
• Chart.js
• Highcharts
• ECharts
• Observable Plot

Les outils de visualisation (3)

Bibliothèques de visualisation

En R :

• Ggplot2
• Plotly
• rbokeh
• Highcharter
• Etc.

Les outils de visualisation (4)

Bibliothèques de visualisation

En Python :

• Matplotlib
• Seaborn
• Plotly
• Bokeh
• Altair
• Etc.

Les outils de visualisation (5)

Que ce soit en JavaScript, en R ou en Python, il existe de nombreuses bibliothèques de visualisation de données.

De manière générale, on rencontre deux types d’approches :

• des bibliothèques proposant des visualisations “prêtes à l’emploi” (comme Chart.js, Highcharts, Plotly, etc.)
• des bibliothèques permettant de créer des visualisations personnalisées, que ce soit en implémentant la grammaire des graphiques (comme ggplot2 ou Observable Plot) ou en utilisant des primitives graphiques et en les liant aux données (comme D3.js).

Exemple avec Chart.js

• Une bibliothèque qui propose des types de graphiques :

Exemple avec Observable Plot

• Une bibliothèque qui implémente la grammaire des graphiques :

dataset = [{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(dataset, {x: 'name', y: 'value', fill: 'name', fillOpacity: 0.5, stroke: 'name', sort: { x: null }}),
  ]
})

Exemple avec D3.js

• Pour décrire comment lier des données à des éléments HTML et comment les transformer :

d3 = require('d3@7')

{
  const svgWidth = 640;
  const svgHeight = 400;

  // On créé l'élément SVG
  const svg = d3.create('svg')
    .attr('width', svgWidth)
    .attr('height', svgHeight);

  const marginBottom = 30;
  const marginLeft = svgWidth / 20;
  const marginTop = marginBottom;
  const w =  svgWidth - marginLeft;
  const h = svgHeight - marginBottom - marginBottom;

  const barWidth = w / dataset.length // Largeur de chaque barre
  const margin = 5; // Espace entre les barres
  
  // Une échelle linéaire permettant de mapper les valeur d'entrée
  // vers une position (hauteur) sur l'axe 'y'
  const yScale = d3.scaleLinear()
    .domain([0, Math.ceil(d3.max(dataset, d => d.value) / 10) * 10])
    .range([h, 0])

  // Création du groupe SVG qui va acceuillir les barres.
  const bars = svg.append('g')
      // La valeur y est calculée depuis le haut, nous avons donc besoin de marginLeft et marginTop
     .attr('transform', `translate(${marginLeft}, ${marginTop})`);
  
  bars.selectAll('rect')
    .data(dataset)
    .join('rect')
    .attr('x', (d, i) =>  i * barWidth)
    .attr('width', barWidth - margin)
    .attr('y', d => yScale(d.value))
    .attr('height', d => h - yScale(d.value))
    .attr('fill', (d, i) => d3.schemePastel1[i])

  // On ajoute les étiquettes de l'axe 'x' :
  const cityNames = svg.append('g')
    .attr('transform', `translate(${marginLeft}, ${marginTop})`);
  
  cityNames.selectAll('text')
    .data(dataset)
    .join('text')
    .attr('x', (d, i) => i * barWidth + barWidth / 2)
    .attr('y', h + 20)
    .attr('text-anchor', 'middle')
    .attr('font-size', '12px')
    .attr('font-family', 'sans-serif')
    .text(d => d.name)

  const axisY = d3.axisLeft()
    .scale(yScale)
    .ticks(8);

  svg.append('g')
    .attr('transform', `translate(${marginLeft - 3}, ${marginTop})`)
    .attr('font-family', 'sans-serif')
    .attr('font-size', '12px')
    .call(axisY);
    
  return svg.node()
}

Données et représentation

• Pour créer les deux dernières visualisations, nous avons fait correspondre des valeurs de données à des symboles visuels.

• Dans de nombreuses visualisations, chaque point de données (ligne d’un tableau) est associé à une marque (un objet visuel, tel qu’un point, une barre, etc.). Les propriétés des données (colonnes) que nous choisissons sont ensuite associées à des variables visuelles telles que la position, la couleur, la taille, etc.

La grammaire des graphiques (Grammar of graphics)

Il s’agit d’un concept introduit par Leland Wilkinson dans son ouvrage The Grammar of Graphics (2005) et rafiné par Hadley Wickham dans son ouvrage A layered grammar of graphics (2010).

L’idée principale est de concevoir un graphique comme une succession de couches. Chaque couche définit une correspondance entre certaines variables ou leur transformation statistique et les attributs esthétiques (position dans l’espace, couleur, épaisseur, etc) de formes géométriques définies (points, barres, lignes, tuiles, etc).

Cette approche permet de définir des graphiques très variés et de les combiner facilement (outrepassant les limites offertes par les bibliothèques de visualisation “prêtes à l’emploi” qui disposeraient d’une recette pour faire un “bar chart”, pour faire un “scatter plot”, etc.).

Dans le cadre de ce cours…

Observable Plot

• Observable Plot est une bibliothèque open source de visualisation développée notamment par Mike Bostock (le créateur de D3.js) et Philippe Rivière (un des principaux contributeurs de D3.js).

• Elle permet de créer rapidement des visualisations en utilisant la grammaire des graphiques, en utilisant la puissance de D3.js mais sans nécessiter d’être un développeur JavaScript confirmé.

Dans le cadre de ce cours…

D3.js

• Data-Driven Documents (lier sélectivement les données d’entrée à des éléments de HTML, en appliquant des transformations dynamiques pour générer et modifier le contenu)

• Il s’agit d’une puissante bibliothèque open source de visualisation de données développée également Mike Bostock (et d’autres contributeurs).

• Plutôt low-level (permettant un contrôle très fin des visualisations créées, aux dépens de la complexité du code)

Dans le cadre de ce cours…

La plateforme Observable

• Observable est une plateforme de création et de partage de visualisations interactives (sous forme de notebooks JavaScript).

• Elle est également développée par Mike Bostock et son équipe.

• Comme d’autres systèmes de notebooks Observable permet de combiner du code, des visualisations et du texte.

 

À vous de jouer !