A3 data viz
Du design génératif à la visualisation de données.
L'an passé, vous avez construit des formes en écrivant des programmes. À l'aide d'outils logiques (for, if...) et mathématiques (addition, soustraction, trigonométrie...) vous avez utilisé des données (nombres, chaîne de caractère, identifiant de couleurs..) pour dessiner avec des outils géométriques (points, lignes, formes géométriques, courbes, volumes en 3D...).
Ces données étaient choisies à la main (100px à gauche, 218px de hauteur, 1px d'épaisseur), par interaction (souris, clavier) ou aléatoirement (random()) et toutes les variations et combinaisons possibles (par exemple la moitié de la largeur de l'écran, une valeur de gris proportionnelle à la position de la souris, une épaisseur égale à la distance entre deux points...).
Il existe une autre sources de données, proches de celles de l'interaction, des données captées ou pré-enregistrées.
Comment leur donner forme ? Comment modeler et sculpter avec ?
Ce processus qui consiste à passer du réel à une série de valeurs numériques, on l'appel «discrétisation» : passer de quelque-chose de continu à quelque chose de «discret», de composé de petites unités calculables. Par exemple pour calculer le temps qui passe on peut utiliser un sablier dont on peut compter chaque grain de sable. Ou il faut "pixeliser" un cercle pour le dessiner sur un écran ou dans Minecraft. C'est ce qui se passe, quand on numérise (littéralement "transformer en nombre") n'importe quel objet du réel
Capturer le réel
L'enjeu est de proposer des visualisations graphiques à partir de capteur(s).
Le but est d'enregistrer/capturer un phénomène ou un processus qui a lieu autours de vous, comme un observateur extérieur, un enquêteur qui cherche le moins possible à perturber son terrain de recherche.
L'idée n'est pas de provoquer une interaction avec des spectateurs/joueurs.
Attention, on est pas là pour faire une bête séparation entre le «virtuel» et le «réel». Les données existent dans mon ordinateur, dans de la matière (extraites de mines de terre rare) et consomment de l'énergie pour être stockées et manipulées.
En visualisation de données on parle «données réelles» ou «données de terrain», pour les différencier des hypothèses ou des simulations qu'on peut faire pour écrire nos programmes avec de fausses données (comme on utiliserais du lorem lipsum pour concevoir une mise en page).
Data design
On peut faire une séparation entre données et informations.
Une donnée est juste un nombre. Une information c'est quelque chose de signifiant pour l'esprit humain.
Une visualisation de donnée à pour but de fabriquer de l'information à partir de données.
Parallèlement l'«information design» ou la «didactique visuelle» propose des formes pour accompagner les informations pour les rendre plus compréhensibles ou les reconfigurer pour en proposer une nouvelle lecture.
On cherchera à créer une relation directe entre donnée et forme, pour en ressortir de l'information.
Mathieu Lehanneur, L’Âge du Monde, sculpture en céramique basées sur les pyramides des ages (données démographiques), qui n'apportent pas plus d'informations qu'en 2D.
Bureau d'étude The world Government : un travail de design d'information basé sur de l'enquête, certaines données et une certaine vision du monde.
Timo Arnall, Jørn Knutsen and Einar Sneve Martinussen, Immaterials: light painting WiFi : le designer comme concepteur d'outil pour révéler l'invisible. Création de dispositif d'enquête et d’ethnographie.
Qu'est-ce qu'une visualisation ?
Tim Rodenbröker. Code crafted: notion d'entrée et sortie.
Une Chaîne de transformation du visible
Penser, classer, représenter édito de BackOffice n°2 (écrit par Kevin Donnot, Élise Gay et Anthony Masure) :
«Le design graphique n'est plus seulement la conception de formes pour des supports stables, mais de prendre en charge des chaînes de transformation du visible. Les interfaces, ces modes d'accès aux données, constituent autant de couches programmatiques permettant de rendre intelligible le bruit des machines.»
/!\ Numérique !== Électronique
on peut faire de la visualisation de données sans ordinateur, mais toujours à l'aide de codes, de programmes et de machines (analogiques, physiques, sensibles...)
Le principe générale de la visualisation de données est d'associer des données à des grandeurs au sein d'un système graphique. Par exemple une quantité avec une longueur ou une qualité avec une couleur.
L'enjeu est de savoir quelles données je relie à quelles variation de forme.
Il existe déjà des typologies de formes, les graphiques (charts en anglais), qui codifient des relation mathématiques directes entre données et éléments visuels.
Jacques Bertin, dans La Sémiologie graphique, 1967
visualcomplexity.com, Les 15 façons de représenter des relations
Comment représenter quelque-chose d'aussi complexe qu'Internet ? Louis Drule, Atlas critique d'internet, 2015
Les visualisations de données ont toutes le rôle de rendre visible l'invisible par deux processus qui ne s'excluent pas :
- le développement : mettre en lumière quelque-chose de peut connu, amplifier quelque-chose d'imperceptible, montrer qu'une situation n'est pas aussi simple que notre intuition nous laisse croire
- la factorisation : la simplification d'une situation trop complexe pour notre cerveau dans un modèle plus simple mais efficace (qui permet de faire des prédictions).
Pour une histoire critique de ces formes : la thèse de Fabrice Sabatier : Saisir l’économie par le(s) sens : Une approche critique et sorcière de la visualisation de données économiques par le design
Les formes que vous allez développer sont à évaluer par rapport aux enjeux de votre sujet et au public auprès du quel elles sont pensées.
Est-ce que les visualisations que vous proposez sont :
- des outils d'analyses, des interfaces qu'il faut utiliser/manipuler, des formes qu'il faut accompagner d'une médiation ?
- des objets autonomes d'information / de prévention ?
Notions clés, en vrac
- Collecter, inscrire, indexer, stocker
- Trier, filtrer, nettoyer
- discrétiser, ordonner, abstraire, cartographier, hiérarchiser
- traduire, transmettre, guider
- réduire la complexité par la généralisation
- rendre intelligible, rendre sensible
- métaphore visuelle, model
Bibliographie
- Back Office No 2 : Penser, classer, représenter [en ligne] : http://www.revue-backoffice.com/numeros/02-penser-classer-representer
- SABATIER, Fabrice. Saisir l’économie par le(s) sens. Une approche critique et sorcière de la visualisation de données économiques par le design, 2021 [en ligne] [consulté le 28 septembre 2024]: https://www.fabricesabatier.com/
- Fabrice Sabatier. Vi(c)e Organique [en ligne] : http://viceorganique.com/
- DRUCKER, Johanna. Visualisation: L’interprétation modélisante. 1st edition. Trad. par Marie-Mathilde BORTOLOTTI. Paris : B42 (Esthétique des données), 2020. [à la bibliothèque]
- BERTIN, Jacques. Le Graphique et le traitement graphique de l’information. Bruxelles : Zones Sensibles, 2017. [à la bibliothèque]
- NEURATH, Otto. Des hiéroglyphiques à l’Isotype: Une autobiographie visuelle. Paris : B42, 2018. [à la bibliothèque]
Demandes
-
une présentation du terrain que vous avez choisi (texte, photos, schémas, croquis d'observations, documentation) pour qu'on comprenne quels sont les enjeux.
-
une note d'intention : quelle est votre proposition. Qu'est-ce qui existe, qu'est-ce qui manque, qu'est-ce que vous proposer. Quel est la chaîne de transformation du visible que vous mettez en place. Décortiquez votre système visuel pour qu'on puisse voir toutes les variations possibles.
-
1 visualisation « 2D », numérique, à l'écran. Fonctionnelle et réactive, en temps réel, à un jeu de donnée (en temps réel ou pré-enregistré).
-
1 visualisation « 3D », physique, tangible. Dispositif, installation, performance... peut-être un prototype, une maquette.
La première visualisation peut-être une «simulation» de la seconde.
C'est la demande minimum, mais vous allez devoir multiplier les visualisations, selon votre sujet, pour montrer des évolutions dans le temps ou dans l'espace (carte), qui elles ne seront pas «réactives en temps réels» mais tout aussi pertinentes.
Rétro planning :
1 séance de restitution : 16/12/2025
8 séances de travail :
- maquettes / plans avant fabrication / impression 2/12/2025
- présentation de l'écorché de votre(vos) système(s) visuel(s) 18/11/2025 ou 4/11/2025
- présentation du terrain (enquête, photos, recherches) & intentions de projet 28/10/2025
Critères d'évaluation
Quel est mon terrain ?
le morceau de réel que j'ai choisi d'explorer
définition du terrain, de ses contours, de sa nature (physique, numérique, fait social/culturel...)
exemples de terrains : « la bibliothèque de l'ESAD de Pau » ou « la base de donnée de la bibliothèque de l'ESAD de Pau » ou « l'interface web de la base de donnée de la bibliothèque de l'ESAD de Pau » ou « l'usage que font les étudiant·es de la bibliothèque de l'ESAD de Pau »
La manière de définir le terrain va en changer les enjeux.
Comment en discrétiser de l'information ?
rendre "discret", c'est dégager des valeurs individuelles à partir de quelque-chose de continu. Le réel est continu, la donnée est discrète.
Si mon terrain est physique, comment j'y récolte des données ?
Si mon terrain est abstrait ( pratique culturelle, secteur économique), quelles données existes ? quelles données sont pertinentes ?
Si mon terrain est déjà numérique, comment je peux extraire et traiter ses données ?
Mes données sont-elles qualitatives et/ou quantitatives, objectives et/ou subjectives ?
Quelle est ma problématique ?
qu'est-ce que je veux poser comme question(s) à mon terrain au travers des données ?
quelles sont/étaient mes hypothèses a priori ? Quel résultat me ferais revoir mon avis sur la question ?
Quelle chaîne de transformation je met en place ?
Est-ce que j'ai filtré mes données ? les ai triées ?
Quels choix formels sont dictés par mes données ? quels principes d'équivalence j'ai mis en place (un nombre = une longueur, une info = une couleur...) ? quels autres choix sont arbitraires/subjectifs ?
Est-ce que les visualisation que vous proposez sont :
- des outils ou des formes qu'il faut utiliser, performer, accompagner d'une médiation ? Un outil pour naviguer dans les données, un outil pour récolter des données ?
- des objets autonomes ? Des illustrations/figures de votre écrit de DNA ?
Modéliser : un exemple avec le CO2
La quantité de CO2 dans l'air, exprimé en ppm (parts par million : 1000ppm = 1%) est calculé à l'aide d'un capteur spécifique.
à notre échelle :
À partir d'un Aranet4 pro, un captueur de CO2, température, humidité relative et pression atmosphérique.
Pour surveiller la quantité de CO2 : à partir de 1000ppm on voit des effets sur la concentration et les performance psycho-moteur. 10 000 ppm (10%) c'est la mort.
Mais c'est le principal indicateur de la qualité d'aération d'un espace clos. En plein air le taux de CO2 varie entre 400 et 600 ppm le matin, selon la pollution de l'air. En partant de 400ppm comme référence :
- < 800 ppm : bonne qualité d'aération
-
800 ; < 1000 ppm: qualité moyenne
-
1000ppm : modérée
-
1500ppm : basse
C'est donc un très bon indicateur de la présence d'autres polluants dans l'air (peintures, microparticules) et de charges virales (Covid, grippes...).
On est confronté à ce genre de visualisation :
Le chiffre en gros et 3 seuils : vert, jaune, rouge.
et l'appli avec les mêmes seuils mais représenté sur une échelle de temps.
Autre visualisation : Canairi Indoor Air Quality Monitor by Hans Augustenborg, inspiré par Les canaris dans les mines de charbon
- niveau de CO2 ok
- niveau de CO2 trop haut
À l'échelle de la planète
Le CO2 est aussi un gaz à effet de serre, corrélé à l'activité humaine, surtout depuis l'ère industrielle.
C'est l'un des nombreux facteur et marqueur du climatique climatique, processus imperceptible à très courte échelle et localement.
Les graphiques utilisés dans 1er rapport du GIEC en 1995, s'intéresse au passé, pour convaincre la communauté scientifique de l’existence du changement climatique.
En 2021, dans le 6e rapport du GIEC, le passé prend peu de place et les enjeux sont de montrer les différents modèles prédictifs pour anticiper le future et convaincre les décideurs politiques d'agir.
les données du Aranet Pro 4
le fichier .csv ressemble à ça :
Time(DD/MM/YYYY H:mm:ss),Dioxyde de carbone,Température(°C),Humidité relative(%),Pression atmosphérique(hPa)
06/09/2024 12:14:06,1319,"19,7",67,"949,1"
qui donne ça une fois importé dans un logiciel de tableur (exel, calc...)
| Time(DD/MM/YYYY H:mm:ss) | Dioxyde de carbone | Température(°C) | Humidité relative(%) | Pression atmosphérique(hPa) |
|---|---|---|---|---|
| 06/09/2024 12:14:06 | 1319 | 19,7 | 67 | 949,1 |
Pour l'utiliser dans P5, il faut suivre cette référence
let table;
let i =0;
let values;
function preload() {
table = loadTable('/Aranet4.csv', 'csv', 'header');
}
function setup() {
createCanvas(100,1000);
values = table.getColumn('Dioxyde de carbone');
print(table.getColumn('Dioxyde de carbone'));
}
function draw(){
background(255,10);
fill("red");
circle(50,values[i],10);
console.log(values[i]);
i++;
}
L'exemple complet ici