29:null 2a:["$","title",null,{"children":"TP 3 — Encoder : de la donnée au dessin | Thomas Perruchot | Observable"}] 2f:T48d,## Plot, canal par canal Un graphique Plot, c'est **des données + des marques + des canaux**. Un **canal**, c'est une variable visuelle. Voilà la table de correspondance — c'est le tableau du CM3, avec les noms de l'outil : | Canal Plot | Variable visuelle | Niveau perceptif | Ce qu'elle sait porter | |---|---|---|---| | `x`, `y` | **Position** | quantitative | tout — c'est la meilleure | | `r` | **Taille** | quantitative, mais mal estimée | des ordres de grandeur | | `fill` en dégradé | **Valeur** (clarté) | ordinale | un ordre, pas un rapport | | `fill` en teintes | **Couleur** (teinte) | sélective | des catégories, aucun ordre | | `symbol` | **Forme** | sélective | des catégories | | `opacity` | **Grain** | ordinale | un ordre grossier | **La règle du CM3, en une ligne :** on ne peut pas percevoir un ordre si la variable visuelle n'est pas ordonnée, ni un rapport si elle n'est pas quantitative. Le squelette d'un graphique : Plot.plot({ marks: [ Plot.barY(donnees, { x: "categorie", y: "valeur" }) ] }) `barY`, `dot`, `line`, `cell`, `rectY` : ce sont les **marques**. Ce qui est entre accolades : les **canaux**.30:T476, **À toi** **L'épreuve.** Pour chacun des quatre graphiques, réponds à trois questions — **sans regarder les chiffres**, en te fiant à ce que tu vois : 1. Peux-tu **classer** les régions de la plus fournie à la moins fournie ? 2. Peux-tu dire que **l'Île-de-France vaut le double** de l'Auvergne - Rhône-Alpes ? (C'est vrai : 521 contre 251.) 3. Peux-tu repérer **une** région précise en un coup d'œil ? Puis conclus : **quel encodage pour quel usage ?** *Ta réponse, dans la cellule ci-dessous.*31:T9d9,rEncodages = ` 1 · Position — question 1 : Oui, du premier coup d'œil, j'arrive à classer les différentes régions de la plus à la moins fournie, notamment parce que la longueur des barres permet de comparer cela très efficacement. question 2 : Oui, je peux le voir assez facilement. question 3 : Non, pas immédiatement. Comme les régions sont triées par valeur (longueur de la barre) et non par ordre alphabétique, il faut lire les étiquettes textuelles une par une pour trouver une région précise. 2 · Taille — question 1 : Oui, car l'ordre de tri aide beaucoup, mais la différence entre des cercles de taille proche est bien moins évidente à distinguer qu'avec des barres. question 2 : Non, l'œil humain évalue très mal les surfaces. Il est quasiment impossible de dire à l'œil nu qu'un cercle fait exactement le double d'un autre. question 3 : Non, le problème reste le même : le tri par valeur oblige à scanner visuellement toute la liste de noms sur l'axe de gauche. 3 · Valeur (clarté) — question 1 : Globalement oui, car les données sont déjà triées, mais sans ce tri, il serait presque impossible de classer précisément des nuances de bleu aussi proches. question 2 : Absolument pas. On ne peut pas évaluer visuellement qu'une couleur est "deux fois plus foncée" qu'une autre de façon précise. question 3 : Toujours pas, la recherche d'une région précise nécessite de lire chaque ligne. 4 · Teinte — question 1 : Non, les couleurs n'ont pas d'ordre quantitatif naturel. Même si les barres sont triées, la succession des teintes (violet, vert, orange...) empêche de percevoir une progression logique. question 2 : Non, aucune couleur ne peut être perçue mathématiquement comme le "double" d'une autre. question 3 : Toujours pas, le texte reste le seul moyen de repérer une région. Ma conclusion — La position (barres) : C'est l'encodage le plus efficace et précis. Il permet de comparer facilement des quantités et d'évaluer des proportions du premier coup d'œil. La taille (cercles) : Elle donne une bonne impression générale des proportions, mais reste trop imprécise pour une lecture analytique. La valeur (clarté) : Elle est intéressante pour montrer des densités (comme sur une carte thermique), mais inadaptée pour comparer des valeurs numériques précises. La teinte (couleurs) : Elle est à éviter absolument pour représenter des quantités. Elle doit être réservée à la distinction de catégories (données qualitatives). `32:T414,## Tes trois graphiques **À toi** Pour chacun : le graphique, puis **deux lignes** disant quelle variable visuelle porte quelle donnée, et à quel niveau perceptif. **G1 — une grandeur par catégorie.** Au choix : par région, par type d'établissement, ou par département. Contrainte : justifie ton encodage **et** ton tri. **G2 — deux variables à la fois.** Par exemple l'année d'ouverture et l'effectif, ou l'effectif selon le type. Contrainte : **deux canaux au moins**, et dis lequel porte quoi. **G3 — une distribution.** Celle des effectifs (`effectif`). Un histogramme suffit. Contrainte : avant de la tracer, va voir la cellule suivante.33:T4cb,`effectif` n'est rempli que pour **1 374 implantations sur 2 507** — 55 %. Mais regarde le tableau ci-dessus : **le taux de remplissage n'est pas le même selon le type**. Environ 58 % pour les universités, 36 % pour les grands établissements, 24 % pour les COMUE. **À toi** Deux questions : 1. Si tu additionnes la colonne `effectif` par type, **quel type est le plus désavantagé** par ce trou ? 2. Ce n'est donc pas du manquant « au hasard ». Comment appelles-tu ça, et qu'est-ce que tu écris sous ton graphique G3 pour être honnête ? *Ta réponse, dans la cellule ci-dessous.*34:T458,rManquant = ` 1. Le type le plus désavantagé — En proportion, ce sont les "Écoles françaises à l'étranger", les "Établissements supérieurs d'architecture" et les "Pôles de recherche" avec 0 % de taux de remplissage (totalement invisibles si on somme les effectifs). Parmi les groupes plus importants, les COMUE (23,7 % de remplissage) et les Grands établissements (35,8 %) voient leur poids totalement écrasé. En revanche, si l'on parle en volume absolu, ce sont les Universités qui perdent de loin le plus grand nombre de sites dans l'addition (855 implantations sans effectif). 2. Le nom du problème et l'avertissement — C'est ce qu'on appelle des "données manquantes non aléatoires" (ou un biais structurel / biais de sélection). L'absence de l'information est directement corrélée à la catégorie de la donnée. Sous le graphique G3, il faut donc écrire une note de lecture explicite : "Attention : graphique basé sur les 55 % d'implantations dont l'effectif est connu. Ce manque n'étant pas homogène , la comparaison des volumes totaux par type d'établissement est biaisée." `35:[{"id":"0bc602383222f347c78dc2515ab79cf1d8058db3e9d1d918bbfb4e563db25ceefe086bbd947937e21ea0f732f2d965c10d2efe126186a7eb599cedefcb7e4a46","href":"https://static.observableusercontent.com/files/0bc602383222f347c78dc2515ab79cf1d8058db3e9d1d918bbfb4e563db25ceefe086bbd947937e21ea0f732f2d965c10d2efe126186a7eb599cedefcb7e4a46","name":"fr-esr-implantations_etablissements_d_enseignement_superieur_publics.json","type":"application/json","lastModified":1786309754302.429,"size":3727925}] 2d:{"id":"3a672a069297404f","slug":"tp-3-encoder-de-la-donnee-au-dessin","title":"TP 3 — Encoder : de la donnée au dessin","thumbnail":"a284768217a85af7db48e9f58cb12007313b0409cf698678919d42a8835de45f","access_level":"public","create_time":"$D2026-09-14T14:04:07.290Z","update_time":"$D2026-09-15T14:57:19.174Z","view_time":null,"first_public_time":"$D2026-09-14T14:04:14.436Z","has_unpublished_edits":null,"fork":{"id":"3c46a6326b55c60a","slug":"tp-3-encoder-de-la-donnee-au-dessin","title":"TP 3 — Encoder : de la donnée au dessin","owner":{"id":"29853dc62ffa3714","login":"mmi-montbeliard","name":"MMI Montbéliard"}},"stars":0,"starred":false,"owner":{"type":"team","id":"43aaa9e47d0e5503","login":"thomasp","name":"Thomas Perruchot","avatar_url":"https://avatars-next.observableusercontent.com/8a59dea58df93662ef16f10a3b6ac5bfd4c436e4d80a228d6a1cf8b972dbc2a0","tier":"starter_2024"},"version":240,"publish_version":240,"role":null,"authored":false,"authors":[{"type":"individual","id":"066661850ac018e5","login":"thomasp","name":"Thomas Perruchot","avatar_url":"https://avatars-next.observableusercontent.com/8a59dea58df93662ef16f10a3b6ac5bfd4c436e4d80a228d6a1cf8b972dbc2a0","tier":null}],"members":[{"type":"team","id":"43aaa9e47d0e5503","login":"thomasp","name":"Thomas Perruchot","avatar_url":"https://avatars-next.observableusercontent.com/8a59dea58df93662ef16f10a3b6ac5bfd4c436e4d80a228d6a1cf8b972dbc2a0","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"TP 3 — Encoder : de la donnée au dessin","cells":[{"id":0,"value":"# TP 3 — Encoder : de la donnée au dessin\n\nNouveau jeu de données, et tu vas le garder jusqu'au TP 5 : **les 2 561\nimplantations de l'enseignement supérieur public en France**. Ton IUT est\ndedans.\n\nAujourd'hui tu dessines pour la première fois. Une seule question te guide, et\nce n'est pas « quel type de graphique je fais » :\n\n> **Quelle variable visuelle porte quoi — et en est-elle capable ?**\n\nC'est la question du CM3. Plot est fait pour y répondre : ses **canaux**\n(`x`, `y`, `fill`, `r`, `opacity`) sont exactement les **variables visuelles**\nde Bertin.\n\n---\n\n## ⚠️ Avant toute chose : **forke ce notebook**\n\nBouton **Fork**, en haut à droite. Sinon rien n'est enregistré.\n**Ce notebook est ton rendu**, tu en déposeras le lien sur Moodle.\n\n⚠️ Dans les cellules de réponse, écris entre les **guillemets obliques** — pas\nentre ` ' ` ni ` \" `.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"esr = FileAttachment(\n \"fr-esr-implantations_etablissements_d_enseignement_superieur_publics.json\"\n).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"Inputs.table(esr)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"**Regarde d'abord.** 2 561 lignes. Fais défiler, trie sur `reg_nom`, sur\n`effectif`, sur `type_d_etablissement`.\n\nTrois choses à repérer tout de suite — tu les as apprises au TP 2 :\n\n1. Certaines lignes sont **entièrement vides** sauf deux champs. Combien ?\n2. La colonne `effectif` est **loin d'être remplie**. Combien manque-t-il ?\n3. Regarde `reg_nom`. « Aquitaine - Limousin - Poitou-Charentes »… ces régions\n existent-elles encore ? Qu'est-ce que ça te dit sur la **date** du fichier ?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"## D'où viennent ces données\n\n| | |\n|---|---|\n| **Jeu** | *Implantations des établissements d'enseignement supérieur publics* |\n| **Producteur** | Ministère de l'Enseignement supérieur et de la Recherche |\n| **Licence** | Licence Ouverte / Etalab — réutilisation libre, **attribution obligatoire** |\n| **Page** | |\n| **Dernière mise à jour** | **25 octobre 2017** — le jeu est signalé « archivé » |\n\n⚠️ **Ces données ont neuf ans.** C'est pour ça que tu verras des régions qui\nn'existent plus. Ce n'est pas un défaut du fichier : c'est son âge, et c'est une\ninformation que **tu dois transmettre** à qui lira tes graphiques.\n\nLa ligne à écrire sous chacun d'eux :\n\n> Source : MESR, *Implantations des établissements d'enseignement supérieur\n> publics* (données arrêtées en 2017) · France métropolitaine.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"## code · nettoyage minimal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"// Les 54 lignes fantômes n'ont ni département, ni type, ni coordonnées.\n// On les écarte — et on l'écrira dans le rendu.\nimplantations = esr\n .filter((d) => d.dep_id)\n .map((d) => ({\n ...d,\n dep: d.dep_id.replace(/^D0?/, \"\"), // \"D059\" → \"59\"\n annee: d.date_ouverture ? +d.date_ouverture.slice(0, 4) : null\n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"({\n total: esr.length,\n exploitables: implantations.length,\n ecartees: esr.length - implantations.length,\n avecEffectif: implantations.filter((d) => d.effectif).length\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$2f","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"aide(\"partieC\", \"Plot, en une page\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"aide(\"lesCanaux\", \"Les canaux = les variables visuelles\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"## code · premiers pas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"// Combien d'implantations par région ?\nparRegion = d3\n .rollups(\n implantations,\n (v) => v.length,\n (d) => d.reg_nom\n )\n .map(([region, n]) => ({ region, n }))\n .sort((a, b) => d3.descending(a.n, b.n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"aide(\"agreger\", \"rollups et déstructurage\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"aide(\"objetLitteral\", \"Pourquoi ({ … }) et pas { … }\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"Plot.plot({\n marginLeft: 240,\n marks: [\n Plot.barX(parRegion, { x: \"n\", y: \"region\", sort: { y: \"-x\" } }),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":" **À toi** — Trois cellules :\n1. le nombre d'implantations par `type_d_etablissement` ;\n2. le même graphique, mais limité aux **cinq** premiers types ;\n3. le nombre d'implantations par **décennie d'ouverture** (`annee`).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"// Le nombre d'implantations par type d'établissement\nex1 = d3\n .rollups(\n implantations,\n (v) => v.length,\n (d) => d.type_d_etablissement\n )\n .map(([type, n]) => ({ type, n }))\n .sort((a, b) => d3.descending(a.n, b.n))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// Le même graphique à barres, limité aux cinq premiers types\nex2 = Plot.plot({\n marginLeft: 300,\n marks: [\n Plot.barX(ex1.slice(0, 5), { x: \"n\", y: \"type\", sort: { y: \"-x\" } }),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"// Le nombre d'implantations par décennie d'ouverture\nex3 = d3\n .rollups(\n implantations.filter((d) => d.annee),\n (v) => v.length,\n (d) => Math.floor(d.annee / 10) * 10\n )\n .map(([decennie, n]) => ({ decennie, n }))\n .sort((a, b) => d3.ascending(a.decennie, b.decennie))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Le même fait, quatre encodages","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"// 1 · POSITION — la longueur d'une barre\nPlot.plot({\n height: 300,\n marginLeft: 240,\n marks: [\n Plot.barX(parRegion, { x: \"n\", y: \"region\", sort: { y: \"-x\" } }),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"// 2 · TAILLE — le rayon d'un cercle\nPlot.plot({\n height: 300,\n marginLeft: 240,\n width: 460,\n x: { axis: null },\n r: { range: [0, 22] },\n marks: [\n Plot.dot(parRegion, { x: () => 0, y: \"region\", r: \"n\", sort: { y: \"-r\" } })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"// 3 · VALEUR — la clarté d'un aplat\nPlot.plot({\n height: 300,\n marginLeft: 240,\n width: 460,\n x: { axis: null },\n color: { scheme: \"blues\", legend: true },\n marks: [\n Plot.cell(parRegion, {\n x: () => 0,\n y: \"region\",\n fill: \"n\",\n sort: { y: \"-fill\" }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"// 4 · TEINTE — la couleur d'un aplat\nPlot.plot({\n height: 300,\n marginLeft: 240,\n width: 460,\n x: { axis: null },\n color: { scheme: \"rainbow\", legend: true },\n marks: [\n Plot.cell(parRegion, {\n x: () => 0,\n y: \"region\",\n fill: \"n\",\n sort: { y: \"-fill\" }\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"// G1 — une grandeur par catégorie\ng1 = Plot.plot({\n marginLeft: 200,\n marks: [\n Plot.barX(implantations, Plot.groupY({ x: \"count\" }, { y: \"type_d_etablissement\", sort: { y: \"-x\" } })),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"// G2 — deux variables à la fois\ng2 = Plot.plot({\n color: { legend: true },\n x: { tickFormat: \"d\" },\n marks: [\n Plot.dot(implantations, { x: \"annee\", y: \"effectif\", fill: \"type_d_etablissement\", opacity: 0.6 })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"// G3 — une distribution\ng3 = Plot.plot({\n marginLeft: 50,\n x: { label: \"Effectif étudiant (regroupé par tranches) →\" },\n y: { label: \"↑ Nombre d'établissements\" },\n marks: [\n Plot.rectY(implantations, Plot.binX({ y: \"count\" }, {\n x: \"effectif\",\n fill: \"#4e79a7\",\n tip: true\n })),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":" *Ta justification, dans la cellule ci-dessous.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"rG1 = `\nLe graphique — Un graphique en barres horizontales représentant le nombre d'implantations par type d'établissement.\n\nL'encodage — J'utilise la position. L'axe Y porte la variable de catégorie (type d'établissement) et l'axe X porte la grandeur (le nombre, encodé par la longueur). J'ai choisi un tri décroissant car cela hiérarchise l'information et permet de repérer immédiatement les types les plus fréquents au premier coup d'œil.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":" *Ta réponse, dans la cellule ci-dessous.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"rG2 = `\nLe graphique — Un nuage de points croisant l'année d'ouverture et l'effectif des établissements.\n\nL'encodage — J'utilise deux canaux : l'axe horizontal (X) porte l'année d'ouverture et l'axe vertical (Y) porte l'effectif. J'utilise aussi un troisième canal, la couleur, pour différencier les types d'établissements.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":" *Ta réponse, dans la cellule ci-dessous.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"rG3 = `\nLe graphique — Un histogramme affichant la distribution des effectifs des différents établissements.\n\nL'encodage — L'axe horizontal (X) encode la variable des effectifs découpée en intervalles réguliers. L'axe vertical (Y) encode la fréquence (le nombre d'établissements dans chaque intervalle) par la position et la hauteur de la barre.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"## Le piège de l'effectif","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":64,"value":"// Combien d'implantations ont un effectif renseigné, par type ?\nd3\n .rollups(\n implantations,\n (v) => ({\n total: v.length,\n avecEffectif: v.filter((d) => d.effectif).length\n }),\n (d) => d.type_d_etablissement\n )\n .map(([type, o]) => ({ type, ...o, taux: o.avecEffectif / o.total }))\n .sort((a, b) => d3.descending(a.total, b.total))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"aide(\"lesTrous\", \"Valeurs manquantes et NaN\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"## Synthèse\n\nEn trois lignes : **quel canal tu utiliseras par défaut** dans tes prochains\ngraphiques, et **dans quel cas tu accepteras d'en changer.**\n\n *Ta réponse, dans la cellule ci-dessous.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"synthese = `\nDans mes prochains graphiques, j'utiliserai par défaut l'encodage par la position (les graphiques à barres), car il permet de comparer des volumes entre eux de manière claire, rapide et visuelle.\nJe n'accepterai d'en changer que si j'y suis contraint par la nature de mes données.\nJ'en changerai également si ce format ne permet pas de mettre en avant l'information ou les proportions efficacement.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"## Journal IA\n\nÀ remplir même si tu n'as rien utilisé.\nSans ce bloc, le rendu n'est pas évalué.\n\n *Ta réponse, dans la cellule ci-dessous.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"journalIA = `\n1. Quels outils / quels prompts — Utilisation de l'IA Gemini de Google avec des prompts précis comme \"corriger les fautes d'orthographe et reformuler en reprenant mes mots\", \"répondre à cela à partir des graphiques\", ou encore \"écris le code Observable Plot pour...\" et \"fais un code qui permet de savoir exactement...\".\n\n2. Ce que ça m'a apporté — Cela m'a permis d'avoir une aide suplementaire pour comprendre la syntaxe d'Observable Plot, structurer le code JavaScript des graphiques et reformuler proprement mes ecrits.\n\n3. Ce que j'ai dû corriger — L'IA a parfois tendance à en faire un peu trop ou à ajouter des informations superflues. J'ai dû trier ses propositions pour rester centré sur l'essentiel, éviter le hors-sujet et répondre exactement aux attentes du TP.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"QUESTIONS = [\n [\"Les quatre encodages\", rEncodages],\n [\"G1 · une grandeur\", rG1],\n [\"G2 · deux variables\", rG2],\n [\"G3 · une distribution\", rG3],\n [\"Le piège de l'effectif\", rManquant],\n [\"Synthèse\", synthese],\n [\"Journal IA\", journalIA]\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"manques = {\n const rempli = (s) =>\n (s ?? \"\").split(\"\\n\").some((l) => l.trim() && !/[—:]\\s*$/.test(l.trim()));\n\n const trous = [\n ...QUESTIONS.filter(([, texte]) => !rempli(texte)).map(([nom]) => nom),\n ...[\n [\"ex1\", ex1],\n [\"ex2\", ex2],\n [\"ex3\", ex3]\n ]\n .filter(([, v]) => v == null)\n .map(([n]) => `l'exercice ${n}`),\n ...[\n [\"G1\", g1],\n [\"G2\", g2],\n [\"G3\", g3]\n ]\n .filter(([, v]) => v == null)\n .map(([n]) => `le graphique ${n}`)\n ];\n\n return trous.length\n ? md`⚠️ **${trous.length} élément(s) à compléter** : ${trous.join(\" · \")}`\n : md`✅ **Ton rendu est complet.** Dépose le lien de ce notebook.`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"# Synthèse des réponses","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"// Ton rendu, tel qu'il sera lu\nrendu = md`${[\n ...QUESTIONS.map(\n ([nom, texte]) => `### ${nom}\\n\\n${(texte ?? \"\").trim() || \"_(à remplir)_\"}`\n ),\n `---`,\n `### Le code`,\n `| | Résultat |\\n|---|---|\\n` +\n [\n [\"ex1\", ex1],\n [\"ex2\", ex2],\n [\"ex3\", ex3],\n [\"g1\", g1],\n [\"g2\", g2],\n [\"g3\", g3]\n ]\n .map(([n, v]) => `| \\`${n}\\` | ${apercu(v)} |`)\n .join(\"\\n\")\n].join(\"\\n\\n\")}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"// De quoi rendre un résultat de code lisible dans le résumé\napercu = (v) => {\n if (v == null) return \"_(à faire)_\";\n if (v instanceof Element)\n return `graphique (\\`<${v.tagName.toLowerCase()}>\\`)`;\n if (v instanceof Map) return `Map de ${v.size} entrées`;\n if (Array.isArray(v))\n return v.length <= 3\n ? \"`\" + JSON.stringify(v) + \"`\"\n : `tableau de ${v.length} éléments`;\n return \"`\" + String(v).slice(0, 70) + \"`\";\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"import { aide } from \"@mmi-montbeliard/antiseche-observable-javascript-et-plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"2","titling":"auto"}} 2e:"$2d:body"