2e:null 2f:["$","title",null,{"children":"TP 3 — Encoder : de la donnée au dessin | Lola Brouart | Observable"}] 34: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**.35: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.*36: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.37: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.*38:[{"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}] 32:{"id":"3d89113f3ad0b6cf","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-14T11:41:04.869Z","update_time":"$D2026-09-14T18:35:36.385Z","view_time":null,"first_public_time":"$D2026-09-14T18:36:04.850Z","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":"9438ec4e621668e9","login":"lolabrt","name":"Lola Brouart","avatar_url":"https://avatars-next.observableusercontent.com/e89feec449e909fc2dc5259001320af230a1002b94be665ed48fcff49f1ada93","tier":"starter_2024"},"version":335,"publish_version":335,"role":null,"authored":false,"authors":[{"type":"individual","id":"04b64770b6035c6a","login":"lolabrt","name":"Lola Brouart","avatar_url":"https://avatars-next.observableusercontent.com/e89feec449e909fc2dc5259001320af230a1002b94be665ed48fcff49f1ada93","tier":null}],"members":[{"type":"team","id":"9438ec4e621668e9","login":"lolabrt","name":"Lola Brouart","avatar_url":"https://avatars-next.observableusercontent.com/e89feec449e909fc2dc5259001320af230a1002b94be665ed48fcff49f1ada93","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":163,"value":"","pinned":true,"hidden":false,"mode":"ts","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":"$34","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":"// EX1 Le nombre d'implantations par type d'établissement\nparTypeEtablissement = d3\n .rollups(\n implantations,\n (v) => v.length,\n (d) => d.type_d_etablissement\n )\n .map(([type_etablissement, n]) => ({ type_etablissement, 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":166,"value":"Plot.plot({\n marginLeft: 240,\n marks: [\n Plot.barX(parTypeEtablissement, { x: \"n\", y: \"type_etablissement\", sort: { y: \"-x\" } }),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// EX2 Le même graphique à barres, limité aux cinq premiers types\nparCinqTypes = d3\n .rollups(\n implantations,\n (v) => v.length,\n (d) => d.type_d_etablissement\n )\n .map(([type_etablissement, n]) => ({ type_etablissement, n }))\n .sort((a, b) => d3.descending(a.n, b.n))\n.slice(0,5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"Plot.plot({\n marginLeft: 240,\n marks: [\n Plot.barX(parCinqTypes, { x: \"n\", y: \"type_etablissement\", sort: { y: \"-x\" } }),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"//EX3 Le nombre d'implantations par décennie d'ouverture\n(d) => Math.floor(new Date(d.date_ouverture).getFullYear() / 10) * 10","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"parDecenie = d3\n .rollups(\n implantations,\n (v) => v.length,\n (d) => Math.floor(new Date(d.date_ouverture).getFullYear() / 10) * 10\n )\n .map(([decenie, n]) => ({ decenie, n }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"Plot.plot({\n marginLeft: 240,\n marks: [\n Plot.barX(parDecenie, { x: \"n\", y: \"decenie\" }),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ts","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":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"rEncodages = `\n1 · Position —\n 1) Oui. 2) Oui. 3) Oui.\n\n2 · Taille —\n 1) Oui. 2) Non. 3) Non.\n\n3 · Valeur (clarté) —\n 1) Oui. 2) Non. 3) Non.\n\n4 · Teinte —\n 1) Non. 2) Non. 3) Non.\n\nMa conclusion —\n La location permet d'établir une hiérarchie au premier coup d'oeil, on distingue individuellement les régions, même sans les nombres, on a une idée du rapport de grandeur d'une région à l'autre.\n Avec la taille, on peut avoir une idée de la hiérarchie mais l'identification des données est difficile au premier regard, il faut une légende. Ce n'est autrement pas précis.\n Les valeurs sont très efficaces pour établir une hiérarchie, tant qu'elles ne sont pas trop rapprochées. Il est difficile de faire une différenciation nette et de comparer les régions.\n La teinte n'apport aucune information sans légende. On peut faire des groupes mais sans savoir ce qui les lie.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":56,"value":"// G1 — une grandeur par catégorie\nparCommune = d3\n .rollups(\n implantations,\n (v) => v.length,\n (d) => d.com_nom.startsWith(\"Paris\") ? \"Paris\" : d.com_nom\n\n )\n .map(([commune, n]) => ({ commune, n }))\n .sort((a, b) => d3.descending(a.n, b.n))\n.slice(0,10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"Plot.plot({\n marginLeft: 240,\n marks: [\n Plot.barX(parCommune, { x: \"n\", y: \"commune\", sort: { y: \"-x\" } }),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"typeParCommune = {\n const complet = d3\n .rollups(\n implantations,\n (v) => v.length,\n (d) => (d.com_nom.startsWith(\"Paris\") ? \"Paris\" : d.com_nom),\n (d) => d.type_d_etablissement\n )\n .flatMap(([commune, types]) =>\n types.map(([type_etablissement, n]) => ({ commune, type_etablissement, n }))\n );\n\n const totalParCommune = d3.rollup(\n complet,\n (v) => d3.sum(v, (d) => d.n),\n (d) => d.commune\n );\n\n const top10Communes = [...totalParCommune]\n .sort((a, b) => d3.descending(a[1], b[1]))\n .slice(0, 10)\n .map(([commune]) => commune);\n\n return complet.filter((d) => top10Communes.includes(d.commune));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"Plot.plot({\n marginLeft: 120,\n color: { legend: true },\n marks: [\n Plot.barX(typeParCommune, {\n x: \"n\",\n y: \"commune\",\n fill: \"type_etablissement\",\n sort: { y: \"-x\" }\n }),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"// G3 — une distribution\neffectifsConnus = implantations.filter((d) => d.effectif != null && !isNaN(d.effectif))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"Plot.plot({\n marks: [\n Plot.rectY(\n effectifsConnus,\n Plot.binX({ y: \"count\" }, { x: \"effectif\" })\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 barre permet de démontrer une hiérarchie rapidement et de faciliter la comparaison des données à travers les principes de positions et de taille. On est donc sur une perspective quantitative.\n\nL'encodage — Le tri décroissant fait ressortir le classement des communes les plus représentées, plutôt que de les laisser dans un ordre alphabétique arbitraire.\n`","pinned":true,"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 diagramme en barres permet d'apporter au premier regard une hiérarchie claire. Même si la couleur vient complexifier l'information, la comparaison reste possible.\n\nL'encodage — La position en 'y' encode la commune, la longueur totale des barres encode le nombre d'implantations, et la couleur des segments encode le type d'établissement, de cette façon on lit trois informations combinées sur un seul graphique grâce à la position et la couleur.\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 — C'est un histogramme de l'effectif en filtrant les implantations sans valeur connue, car seules 55 % des implantations déclarent leur effectif, avec un taux très inégal selon le type d'établissement.\n\nL'encodage — La position en x encode les tranches de valeurs d'effectif et la hauteur des barres encode le nombre d'implantations.\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":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"rManquant = `\n 1. Si on soustrait avecEffectif au nombre du total, on remarque que pour les universités, il y a bien plus d'établissements dont on ne connaît pas les effectifs. Au contraire, pour les universités à l'étranger, le nombre est bien plus petit. Le nombres sont donc bien plus faussés pour les universités.\n\n 2. On appelle cela \"le trou\". On peut indiquer sous le graphique que la liste utilisée est non exhaustive concernant les données relevées pour les effectifs.\n\n`","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 = `\nLa position est le canal le plus complet en termes d'information qu'il est en capacité de porter. S'il faut mettre en avant plus de deux données en même temps, j'utiliserai alors différents canaux en superposition ou sous forme de graphiques secondaires pour etoffer l'information.\n\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 — J'ai utilisé Claude pour m'aider à comprendre le fonctionnement des fonctions : \"j'apprend à faire des graphiques avec les librairies plot et d3 via observables, peux-tu m'expliquer le fonctionnement de cette fonction\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)\"\n\n Je l'ai aussi utilisé pour m'aider à élaborer les fonctions pour les trois graphiques : je ne savais pas comment faire articuler une fonction pour regrouper les informations, une autre pour les limiter, et une autre pour trier en fonction du nom... Je lui ai demandé de m'expliquer à chaque fois le fonctionnement des lignes.\n\n2. Ce que ça m'a apporté — J'ai pu comprendre quel élément correspondait à quoi, avait quel effet.... pour m'approprier ces fonctions.\n\n3. Ce que j'ai dû corriger — Rien.\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":"$W38","stdlib":"2","titling":"auto"}} 33:"$32:body"