2a:null 2b:["$","title",null,{"children":"TP 3 — Encoder : de la donnée au dessin | Konstance Kruger | Observable"}] 30: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**.31: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.*32:T5c4,rEncodages = ` 1 · Position — Oui, on peut facilement classer les régions de la plus fournie à la moins fournie grâce à la longueur des barres. Oui, on voit que l’Île-de-France vaut environ le double de l’Auvergne - Rhône-Alpes mais une région précise ne ressort pas spécialement en un coup d’œil. 2 · Taille — On peut classer les régions globalement grâce à la taille des cercles mais les différences proches sont moins faciles à estimer. Non, on ne peut pas dire précisément que l’Île-de-France vaut le double de l’Auvergne - Rhône-Alpes. 3 · Valeur (clarté) — On peut percevoir un ordre du plus foncé au plus clair même si les valeurs proches sont difficiles à distinguer. Non, la clarté ne permet pas de voir qu’une valeur est deux fois plus grande qu’une autre. Une région précise est difficile à repérer car plusieurs teintes sont proches. 4 · Teinte — Non, les couleurs n’ont pas d’ordre naturelw donc elles ne permettent pas de bien classer les régions. Non, elles ne permettent pas non plus de voir un rapport comme « deux fois plus ». En revanche, une couleur différente permet de repérer facilement une région précise. Ma conclusion — La position est la meilleure pour comparer précisément des quantités et des rapports. La taille permet surtout de voir des ordres de grandeur. La valeur (clarté) sert à montrer un ordre. La teinte sert surtout à distinguer et repérer des catégories. `33: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.34: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.*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}] 2e:{"id":"0c553151dbf5b52c","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-15T12:36:55.869Z","update_time":"$D2026-09-15T13:24:09.778Z","view_time":null,"first_public_time":"$D2026-09-29T11:39:30.685Z","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":"4a664873c7e3bf4c","login":"konstance-kruger","name":"Konstance Kruger","avatar_url":"https://avatars-next.observableusercontent.com/80984bef480e4b964fb7f7aa71ab2c9e1dcb95d7e5a65cf548733d455c910ac2","tier":"starter_2024"},"version":219,"publish_version":219,"role":null,"authored":false,"authors":[{"type":"individual","id":"78b33f009f84d954","login":"konstance-kruger","name":"Konstance Kruger","avatar_url":"https://avatars-next.observableusercontent.com/80984bef480e4b964fb7f7aa71ab2c9e1dcb95d7e5a65cf548733d455c910ac2","tier":null}],"members":[{"type":"team","id":"4a664873c7e3bf4c","login":"konstance-kruger","name":"Konstance Kruger","avatar_url":"https://avatars-next.observableusercontent.com/80984bef480e4b964fb7f7aa71ab2c9e1dcb95d7e5a65cf548733d455c910ac2","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","providerMetadata":"$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","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"Inputs.table(esr)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$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","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"## code · nettoyage minimal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$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","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"aide(\"partieC\", \"Plot, en une page\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"## code · premiers pas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"aide(\"agreger\", \"rollups et déstructurage\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"aide(\"objetLitteral\", \"Pourquoi ({ … }) et pas { … }\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$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","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"// Le nombre d'implantations par type d'établissement\nex1 = {\n const parType = d3.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))\n\n return Plot.plot({\n marginLeft: 240,\n marks: [\n Plot.barX(parType, {\n x: \"n\",\n y: \"type\",\n sort: { y: \"-x\" }\n }),\n Plot.ruleX([0])\n ]\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// Le même graphique à barres, limité aux cinq premiers types\nex2 = {\n const parType = d3.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))\n .slice(0, 5)\n\n return Plot.plot({\n marginLeft: 240,\n marks: [\n Plot.barX(parType, {\n x: \"n\",\n y: \"type\",\n sort: { y: \"-x\" }\n }),\n Plot.ruleX([0])\n ]\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"// Le nombre d'implantations par décennie d'ouverture\nex3 = {\n const parDecennie = d3.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))\n\n return Plot.plot({\n marks: [\n Plot.barY(parDecennie, {\n x: \"decennie\",\n y: \"n\"\n }),\n Plot.ruleY([0])\n ]\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Le même fait, quatre encodages","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$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","providerMetadata":"$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","providerMetadata":"$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","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"// G1 — une grandeur par catégorie\ng1 = Plot.plot({\n marginLeft: 240,\n marks: [\n Plot.barX(parRegion, {\n x: \"n\",\n y: \"region\",\n sort: { y: \"-x\" }\n }),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"// G2 — deux variables à la fois\ng2 = Plot.plot({\n marks: [\n Plot.dot(\n implantations.filter((d) => d.annee && d.effectif),\n {\n x: \"annee\",\n y: \"effectif\"\n }\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"// G3 — une distribution\ng3 = Plot.plot({\n marks: [\n Plot.rectY(\n implantations.filter((d) => d.effectif),\n Plot.binX(\n { y: \"count\" },\n { x: \"effectif\" }\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"rG1 = `\nLe graphique — Le nombre d’implantations par région, classé de la région la plus fournie à la moins fournie.\n\nL’encodage — La position sur l’axe horizontal porte le nombre d’implantations : c’est un niveau quantitatif. La position verticale porte les régions, qui sont des catégories. Le tri décroissant facilite la comparaison entre les régions.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"rG2 = `\nLe graphique — Chaque point représente une implantation. Il met en relation son année d’ouverture et son effectif.\n\nL'encodage — La position horizontale porte l’année d’ouverture, une donnée quantitative. La position verticale porte l’effectif, également quantitatif. Les deux positions permettent donc de comparer les deux variables.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"rG3 = `\nLe graphique — Un histogramme représentant la distribution des effectifs des implantations.\n\nL'encodage — La position horizontale porte les classes d’effectif, une donnée quantitative. La hauteur des barres porte le nombre d’implantations dans chaque classe, également quantitatif.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"## Le piège de l'effectif","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"aide(\"lesTrous\", \"Valeurs manquantes et NaN\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"rManquant = `\n1. Les COMUE sont les plus désavantagées parmi les types indiqués : seulement environ 24 % de leurs implantations ont un effectif renseigné. Additionner les effectifs par type les sous-représenterait donc fortement.\n\n2. Les valeurs manquantes ne sont pas réparties au hasard : le taux de remplissage dépend du type d’établissement. Cela crée un biais. Sous G3, il faut préciser que l’effectif n’est renseigné que pour 1 374 implantations sur 2 507, soit 55 %, et que cette proportion varie selon le type d’établissement. Le graphique ne représente donc que les implantations dont l’effectif est renseigné.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"synthese = `\nPar défaut, j’utiliserai la position, car c’est le canal le plus précis pour comparer des valeurs quantitatives.\nJ’utiliserai la taille seulement pour montrer des ordres de grandeur, et la valeur (clarté) pour montrer un ordre.\nJe choisirai la teinte surtout quand je veux distinguer ou repérer des catégories, sans chercher à montrer une quantité ou un ordre.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"journalIA = `\n1. Quels outils / quels prompts — J’ai utilisé ChatGPT pour m’aider à comprendre les consignes, écrire certaines cellules de code Observable/Plot et formuler les réponses demandées sur les encodages visuels.\n\n2. Ce que ça m’a apporté — L’IA m’a aidé à reprendre la logique des exemples du TP, notamment pour les regroupements avec d3.rollups, les graphiques avec Plot et pour distinguer les usages de la position, de la taille, de la valeur et de la teinte.\n\n3. Ce que j’ai dû corriger — J’ai dû préciser plusieurs fois les consignes et fournir les captures du TP pour que les réponses correspondent exactement au cours. J’ai aussi vérifié et adapté les propositions de code et les formulations aux données et aux graphiques demandés.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$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","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"# Synthèse des réponses","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$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","providerMetadata":"$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","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"2"}} 2f:"$2e:body"