3e:null 3f:["$","title",null,{"children":"TP 3 — Encoder : de la donnée au dessin | Leila Tebrouri | Observable"}] 45: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**.46: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.*47:Tbbe,rEncodages = ` 1 · Position — Le classement des régions est facile grâce à la longueur des barres : on voit directement que l’Île-de-France est la plus fournie et Mayotte la moins fournie. On peut estimer que l’Île-de-France a presque deux fois plus d’implantations que l’Auvergne-Rhône-Alpes, mais sans valeurs exactes on ne peut pas l’affirmer précisément. Enfin, chaque région est facilement repérable grâce à sa propre barre, bien distincte des autres. 2 · Taille — Le classement peut se deviner intuitivement si on sait déjà que la taille des cercles représente le nombre d’implantations. On a bien une légende pour identifier les régions sur l’axe Y, mais aucune indication sur ce que représente la taille des cercles, donc sans contexte le graphique est difficile à comprendre. Il est aussi très difficile de savoir si l’Île-de-France possède deux fois plus d’implantations que l’Auvergne-Rhône-Alpes, car la différence de taille entre les cercles est difficile à estimer précisément. Enfin, certaines régions sont difficiles à repérer car plusieurs cercles se mélangent, surtout en haut du graphique, même si l’Île-de-France et les régions du bas restent plus faciles à distinguer. 3 · Valeur (clarté) — Le classement est assez facile à comprendre grâce au dégradé : plus la couleur est foncée, plus il y a d’implantations. Cependant, les régions avec peu d’implantations deviennent très claires, presque blanches, ce qui rend leur rectangle difficile à voir, comme Mayotte. On peut estimer que l’Île-de-France possède environ deux fois plus d’implantations que l’Auvergne-Rhône-Alpes, mais comme pour le graphique de position, on ne peut pas l’affirmer avec certitude sans les valeurs exactes. Enfin, les différentes régions sont clairement séparées et faciles à repérer. 4 · Teinte — La lecture du graphique est difficile car les couleurs ne permettent pas de comprendre intuitivement les quantités. Les couleurs correspondant au minimum et au maximum sont presque identiques, donc sans regarder l’ordre des régions, on pourrait difficilement savoir que l’Île-de-France possède beaucoup plus d’implantations que Mayotte. Il est également impossible d’estimer si l’Île-de-France en possède environ deux fois plus que l’Auvergne-Rhône-Alpes. En revanche, chaque rectangle est bien séparé et associé à une région, donc il est facile de repérer une région précise. Ma conclusion — La position est l’encodage le plus efficace pour comparer rapidement et clairement les quantités. La valeur (clarté) fonctionne également assez bien, mais devient moins lisible pour les petites valeurs. La taille permet de comprendre les différences mais rend les comparaisons précises plus difficiles. Enfin, la teinte est la moins adaptée pour représenter une quantité, car les couleurs ne permettent pas de percevoir clairement l’ordre ou les écarts entre les valeurs. `48: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.49: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.*4a:[{"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}] 43:{"id":"6334dd5eb1463b5d","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-15T11:56:18.063Z","update_time":"$D2026-09-15T13:48:45.125Z","view_time":null,"first_public_time":"$D2026-09-15T11:56:28.581Z","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":"469c7ce2b0787224","login":"leilatebrouri","name":"Leila Tebrouri","avatar_url":"https://avatars-next.observableusercontent.com/cd55937d4537c22e8db4dfa429488bcff16b18931ed36686b12c767d9cf04dd3","tier":"starter_2024","bio":""},"version":227,"publish_version":227,"role":null,"authored":false,"authors":[{"type":"individual","id":"52025c975f7526ff","login":"leilatebrouri","name":"Leila Tebrouri","avatar_url":"https://avatars-next.observableusercontent.com/cd55937d4537c22e8db4dfa429488bcff16b18931ed36686b12c767d9cf04dd3","tier":null,"bio":""}],"members":[{"type":"team","id":"469c7ce2b0787224","login":"leilatebrouri","name":"Leila Tebrouri","avatar_url":"https://avatars-next.observableusercontent.com/cd55937d4537c22e8db4dfa429488bcff16b18931ed36686b12c767d9cf04dd3","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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"Inputs.table(esr)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"## code · nettoyage minimal","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"aide(\"partieC\", \"Plot, en une page\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"## code · premiers pas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"aide(\"agreger\", \"rollups et déstructurage\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"aide(\"objetLitteral\", \"Pourquoi ({ … }) et pas { … }\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"// Le nombre d'implantations par type d'établissement\n ex1 = Plot.plot({\n marginLeft: 240,\n marks: [\n Plot.barX(\n implantations,\n Plot.groupY(\n {x: \"count\"},\n {y: \"type_d_etablissement\", sort: {y: \"-x\"}}\n )\n ),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// Le même graphique à barres, limité aux cinq premiers types\nex2 = Plot.plot({\n marginLeft: 240,\n marks: [\n Plot.barX(\n implantations,\n Plot.groupY(\n {x: \"count\"},\n {\n y: \"type_d_etablissement\",\n sort: {y: \"-x\", limit: 5}\n }\n )\n ),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"// Le nombre d'implantations par décennie d'ouverture\nex3 = Plot.plot({\n marks: [\n Plot.barY(\n implantations,\n Plot.groupX(\n {y: \"count\"},\n {x: d => Math.floor(d.annee / 10) * 10}\n )\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Le même fait, quatre encodages","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"$47","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"$48","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":165,"value":"parType = 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"// G1 — une grandeur par catégorie\ng1 = 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})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"// G2 — deux variables à la fois\ng2 =Plot.plot({\n height: 400,\n marginLeft: 240,\n color: {\n legend: true\n },\n marks: [\n Plot.barX(\n implantations.filter(d =>\n parType.slice(0, 5).some(t => t.type === d.type_d_etablissement)\n ),\n Plot.groupY(\n {x: \"count\"},\n {\n y: \"reg_nom\",\n fill: \"type_d_etablissement\",\n sort: {y: \"-x\"}\n }\n )\n ),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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 != null),\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":138,"value":"rG1 = `\nLe graphique — Il montre le nombre d’implantations pour chaque type d’établissement. Les types sont triés par ordre décroissant afin de faciliter la comparaison et de repérer rapidement les plus représentés.\n\nL’encodage — Le type d’établissement est représenté par la position sur l’axe Y, tandis que le nombre d’implantations est représenté par la longueur des barres sur l’axe X. La position et la longueur permettent une comparaison quantitative précise.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"rG2 = `\nLe graphique — Il permet de visualiser les effectifs des établissements en fonction de leur année d’ouverture et d’observer leur évolution dans le temps.\n\nL’encodage — L’année d’ouverture est représentée par la position sur l’axe X, tandis que l’effectif est représenté par la valeur (clarté) de la couleur. La position permet une lecture précise de l’année, alors que la valeur permet d’ordonner visuellement les effectifs du plus faible au plus élevé.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"rG3 = `\nLe graphique — Il montre la distribution des effectifs des implantations. La majorité des implantations ayant un effectif renseigné ont de faibles effectifs, tandis que les effectifs élevés sont beaucoup plus rares. La distribution est donc très concentrée vers les petites valeurs.\n\nL'encodage — L'effectif est représenté par la position sur l'axe X, regroupée en intervalles, et la fréquence par la hauteur des barres sur l'axe Y. La longueur/hauteur des barres est une variable visuelle quantitative qui permet de comparer le nombre d'implantations dans chaque intervalle. Attention, seulement 55 % des implantations ont un effectif renseigné : cette distribution ne représente donc que les données disponibles.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"## Le piège de l'effectif","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"aide(\"lesTrous\", \"Valeurs manquantes et NaN\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"rManquant = `\n1. Les COMUE sont les plus désavantagées, car seulement 24 % de leurs effectifs sont renseignés. Si on additionne les effectifs par type, elles vont donc forcément paraître moins importantes qu'elles ne le sont réellement.\n\n2. Les données manquantes ne sont pas réparties au hasard, puisque certains types d'établissements sont beaucoup moins renseignés que d'autres. Il y a donc un biais dans les données. Sous G3, je préciserais que le graphique représente uniquement les implantations dont l'effectif est renseigné.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"synthese = `\nJ'utiliserais surtout la position, car c'est celle que j'ai trouvée la plus claire pour comparer, classer et repérer rapidement les données.\nJe pourrais utiliser la valeur si je veux montrer des différences de quantité de manière plus visuelle, mais en faisant attention aux petites valeurs qui peuvent devenir difficiles à voir.\nJ'utiliserais plutôt la taille pour donner une idée générale des écarts et la teinte pour différencier des catégories, mais pas pour faire des comparaisons précises.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"journalIA = `\n1. Quels outils / quels prompts — J'ai utilisé ChatGPT pour m'aider à comprendre certaines consignes, vérifier mon code Observable Plot et m'aider à formuler certaines réponses.\n\n2. Ce que ça m'a apporté — Ça m'a surtout aidée à comprendre comment choisir les variables visuelles selon les données, à construire certains graphiques et à mieux formuler mes justifications.\n\n3. Ce que j'ai dû corriger — J'ai dû corriger certaines propositions qui ne correspondaient pas exactement à la consigne ou à la structure du notebook, par exemple l'utilisation de deux positions pour G2 et la création d'une cellule en TypeScript au lieu d'Observable JavaScript.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"# Synthèse des réponses","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"2"}} 44:"$43:body"