2a:null 2b:["$","title",null,{"children":"TP 5 — Interagir, raconter, exporter | Noah Litzler | Observable"}] 30:T5dd, **À toi** #### Écris la carte au seuil Le curseur existe déjà — c'est la cellule du dessous. Ce qui manque, c'est la carte qui le suit. Ce n'est pas une carte de plus : c'est **ta carte du TP 4 avec deux marques `Plot.geo` au lieu d'une**. | | | |---|---| | couche 1 | **tous** les départements, en gris uni — `fill: "#eee"` | | couche 2 | par-dessus, **seulement ceux qui passent le seuil** | Pour la couche 2, `fill` ne peut pas être un nom de champ : la valeur dépend du curseur. C'est la forme **fonction** du TP 4 — `fill: f => …` — et elle doit renvoyer `null` pour les départements sous le seuil. ⚠️ **`null`, et surtout pas `0`.** Une valeur `null` n'est pas dessinée, donc la couche grise reste visible dessous : le département est **présent et éteint**. Un `0` le peindrait dans la classe la plus basse, et tu perdrais la distinction — c'est la leçon du TP 4, une fois de plus. 💡 Pense au `label` de l'échelle de couleur : s'il contient `${seuil}`, la légende se réécrit à chaque mouvement du curseur. Une légende qui affiche son réglage est une légende honnête.31:T486, **À toi** #### Écris le classement La fiche que tu verras plus bas a besoin d'un **classement** : les 96 départements triés du mieux doté au moins bien doté, sur `pour100k`. Une cellule, une ligne. Deux pièges, et ils sont tous les deux dans la donnée : 1. **`sort` modifie le tableau qu'il reçoit.** `parDep` arrive du TP 4 par `import` : on n'y touche pas. Copie-le d'abord — `[...parDep]` — ou utilise `toSorted`, qui ne modifie rien. 2. **un taux peut être inconnu** (`null`). Il ne vaut pas zéro, mais il faut bien le ranger quelque part : en fin de classement, avec `?? -1`. **Ton auto-contrôle** : si ta cellule est juste, la fiche ci-dessous affiche pour la Lozère « Rang 3 sur 96 ». Si elle affiche autre chose, ton tri est à revoir.32:T492,## Quatre temps, quatre titres Le CM 5 les a posés : **contexte → exploration → révélation → conclusion.** La plupart des rendus commencent à l'étape 2 et s'arrêtent avant la 3. Or l'étape 3 est **la seule qui exige d'avoir compris quelque chose** — et c'est elle qui donne son sous-titre au graphique. **À toi** — Écris les **quatre titres**. Pas des étiquettes (« Contexte »), des **phrases qui affirment** — la règle du sous-titre porteur du CM 4, appliquée quatre fois. *Ta réponse, dans la cellule ci-dessous.*33:T667,### Où se refabrique le graphique — trois endroits, et tu en as déjà écrit deux Plot tourne aux trois étages d'un site. Tu as fait les deux premiers en R312 ; le troisième arrive dans quelques semaines. | | Où le graphique se fabrique | Ce que tu livres | Quand | R312 | |---|---|---|---|---| | **A** | **au build**, sur le serveur — `PlotFigure.astro` | un JSON + les textes | le graphique ne bouge pas → **le défaut** | semaine 1 — **déjà fait** | | **B** | **chez le lecteur**, dans son navigateur | un JSON + une fonction | le lecteur doit agir sur le graphique | semaine 4 — **déjà fait** | | **C** | **une page par valeur** — routes paramétriques | un JSON + une route | plusieurs vues, chacune figée | semaine 6 — **à venir** | Autrement dit : **aucune technique nouvelle aujourd'hui.** Le composant des manchots de la semaine 1, le `select` qui redessine de la semaine 4 : c'est la même mécanique, avec tes départements dedans. **La question qui tranche, et il n'y en a qu'une :** > **Est-ce que ce graphique doit bouger CHEZ LE LECTEUR ?** Si non — et c'est le cas le plus fréquent — c'est **A**. Une page qui contient déjà son dessin : rien à télécharger, rien à exécuter, lisible par un moteur de recherche comme par un lecteur d'écran. 💡 **Et tout ça atterrit dans un dépôt que tu connais** : `github.com/ppierre/base-astro-tw-plot`, la base de tes TP de R312 — **et celle de la SAÉ**. Les fichiers que tu vas produire ici ont donc déjà leur place : `src/assets/` pour les données, `src/components/PlotFigure.astro` pour le composant, `src/pages/` pour les pages.34:Tc49,### La route A, celle que tu utiliseras Le composant du TD de R312, celui qui fait tout le travail : ```js --- // src/components/PlotFigure.astro import * as Plot from "@observablehq/plot"; import { JSDOM } from "jsdom"; const { options } = Astro.props; const plot = Plot.plot({ ...options, document: new JSDOM("").window.document }); ---

``` **Lis-le une fois lentement, parce qu'il dit exactement ce qu'on fait ici.** Plot a besoin d'un `document` pour dessiner ; dans un navigateur il y en a un, sur un serveur non — `JSDOM` en fabrique un faux, le temps du build. Le graphique est donc dessiné **une fois, chez toi, au moment de publier**, et ce qui part chez le lecteur est du HTML déjà peint. Ta carte du TP 4, transposée, ne change presque pas : ```js --- // src/pages/dataviz.astro import PlotFigure from "../components/PlotFigure.astro"; import * as Plot from "@observablehq/plot"; import departements from "../assets/departements-simplifie.json"; import densite from "../assets/densite.json"; // La jointure du TP 4, refaite ici : les valeurs vont dans properties, // là où Plot.geo va chercher ses canaux. const parCode = new Map(densite.map(d => [d.code, d])); const contours = departements.features.map(f => ({ ...f, properties: { ...f.properties, ...(parCode.get(f.properties.code) ?? {}) } })); ---

TON TITRE — descriptif, de quoi parle le graphique

TON SOUS-TITRE — porteur : c'est ici, et nulle part ailleurs, que tu affirmes

Source : MESR (2017) · INSEE (2021) · France métropolitaine.

``` Quatre remarques, et les deux dernières sont celles qu'on oublie : - **`options` est ta cellule Plot, telle quelle.** Tu ne réécris rien. C'est pour ça qu'on a passé quatre séances à écrire des `Plot.plot({…})` propres. - **La jointure voyage, pas son résultat.** Tes deux fichiers arrivent séparés : les contours d'un côté, les valeurs de l'autre. Les quatre lignes du haut sont **exactement** la cellule `contours` du TP 4 — et c'est pour ça que `fill: "pour100k"` marche ici comme là-bas. La recette est la même parce que la **forme des données** est la même. - **Le titre, le sous-titre et la source sont du HTML**, autour du composant. Ils seront lus par un lecteur d'écran, trouvés par une recherche, stylés par la feuille du site. Un texte enfermé dans une image ne l'est pas. - **Ton alternative textuelle du TP 4 a enfin une case** : `ariaLabel`, que Plot pose sur le SVG lui-même. Tu as déjà l'outillage pour la vérifier — `

`, `

`, Lighthouse et l'arbre d'accessibilité de Chrome, c'était ta **semaine 1** de R312.35:T526, **À toi** ## Écris le fichier de données Une cellule : le tableau que le composant recevra. Trois décisions, et aucune n'est technique. 1. **Les colonnes.** `code`, `nom`, `n`, `pop` et le taux. Rien d'autre — tout ce qui ne sert **ni au dessin ni à la vérification** dégage. 2. **Le dénominateur reste.** `pop` ne sert pas au dessin ; il sert à ce qu'on puisse refaire ton calcul. Publier un taux sans ce qui l'a produit, c'est publier une conclusion, pas une donnée. Le CM 5 demande de publier ses données : les voilà. 3. **Deux décimales.** `11.822530864197532` annonce une précision que tu n'as pas — sur une carte à cinq classes — et gonfle le fichier pour rien. `+valeur.toFixed(2)` arrondit ; le `+` remet un nombre, parce que `toFixed` renvoie une **chaîne**. ⚠️ Et attention à l'inconnu : `null.toFixed(2)` plante. Un taux inconnu doit rester `null` — il traverse tel quel.36:Ta03,## Les routes B et C, en deux mots chacune **B · chez le lecteur.** Tu gardes une interaction. Le graphique doit alors être **reconstruit** dans le navigateur — et c'est mot pour mot la démarche de ta **semaine 4** de R312 : *lire l'entrée → calculer → réécrire dans la page*, le tout dans une fonction appelée au chargement **et** à chaque `change`. ```js --- // src/pages/densite-interactive.astro ---

``` Tu reconnais tout, sauf une ligne : `carteDensite`. C'est **ta recette**, sortie du notebook — et c'est ce que tu vas écrire dans deux minutes. ⚠️ Note le prix, au passage : cette page charge Plot **chez le lecteur**. Là où la route A envoie du HTML déjà peint, celle-ci envoie une bibliothèque, tes données, et du travail à faire. Pour un `select` à deux entrées, c'est à justifier. **C · une page par valeur.** Tes deux cartes ne sont pas deux états d'un même graphique : ce sont deux pages. Chacune a son URL, son titre, sa place dans un menu — et se partage. Aucune ligne de JavaScript chez le lecteur. C'est la **semaine 6** qui arrive : une route paramétrique `[champ].astro`, et la liste des valeurs obtenue par le motif que tu connais déjà, `[...new Set(…)]`. → **Une navigation n'est pas une interaction.** Beaucoup de « filtres » sont en réalité des pages qui s'ignorent, et elles seraient meilleures en pages : on les met en favori, on les envoie par message, un moteur de recherche les trouve.37:T6d6, **À toi** ## Écris la recette exportable Une fonction qui dessine ta carte et qui **ne lit aucune cellule du notebook** : tout entre par les arguments. ```js carteDensite(contours, { champ, width, label }) → un graphique ``` C'est la seule cellule du semestre qui n'est pas faite pour Observable. Elle est faite pour être **copiée dans `src/scripts/carte.js`**, et appelée par la page ci-dessus. D'où la règle, sans appel : | Dans ton notebook | Dans la fonction | |---|---| | `contours` | un **paramètre** | | `departements`, pour le `domain` | **reconstruit** depuis le paramètre | | `"pour100k"` écrit en dur | un paramètre `champ` | Pour le `domain` de la projection, une collection se refabrique en une ligne : `{ type: "FeatureCollection", features: contours }`. **La seule chose que la fonction a le droit d'aller chercher dehors, c'est `Plot`** — et c'est légitime : le module l'importera, `import * as Plot from "@observablehq/plot"`, comme la page de la semaine 4. **Ton auto-contrôle est dans les deux cellules qui suivent** : la même fonction, appelée une fois sur les 96 départements, une fois sur huit. Si la seconde dessine la Bourgogne-Franche-Comté **recadrée**, ta fonction est pure. Si elle redessine la France entière, c'est qu'elle va chercher une cellule du notebook — et elle ne marchera nulle part ailleurs.38:T4ab,journalIA = ` 1. Quels outils / quels prompts — J'ai utilisé ChatGPT. Je lui ai demandé : "Comment faire une carte avec un seuil qui change avec un curseur ?", "Pourquoi faut-il mettre null et pas 0 pour les départements sous le seuil ?", "Comment trier les départements pour obtenir leur classement ?", "Comment préparer les données pour les exporter vers Astro ?" et "Pourquoi ma carteDensite n'affiche pas les départements ?". 2. Ce que ça m'a apporté — Ça m'a permis de mieux comprendre comment fonctionnent les interactions et surtout comment séparer les données, les textes et la recette du graphique pour les exporter vers Astro. J'ai aussi mieux compris la différence entre une carte qui est construite au moment du build et une carte qui doit être reconstruite chez le lecteur. 3. Ce que j'ai dû corriger — J'ai dû vérifier les propositions dans Observable et modifier certains codes pour respecter les méthodes demandées dans le TP. Par exemple, la première version de carteDensite n'affichait pas la carte car le champ n'était pas défini dans le test. J'ai donc dû corriger la fonction pour qu'elle fonctionne avec les appels prévus dans le notebook. `39:T47a,manques = { const rempli = (s) => (s ?? "") .split("\n") .some(l => l.trim() && !/[—:]\s*$/.test(l.trim())); // les quatre titres du récit comptent aussi const titresVides = Object.entries(TITRES) .filter(([, t]) => !(t ?? "").trim()) .map(([k]) => k); // le classement est-il vraiment trié, inconnus en fin de liste ? const trie = Array.isArray(classement) && classement.length > 1 && classement.every((d, i) => i === 0 || (classement[i - 1].pour100k ?? -1) >= (d.pour100k ?? -1)); const trous = [ ...QUESTIONS.filter(([, texte]) => !rempli(texte)).map(([nom]) => nom), ...(titresVides.length ? [`les titres du récit (${titresVides.join(", ")})`] : []), ...[["carteSeuil", carteSeuil], ["donneesAstro", donneesAstro], ["carteDensite", carteDensite]] .filter(([, v]) => v == null).map(([n]) => `la cellule ${n}`), ...(trie ? [] : ["le classement (il n'est pas encore trié)"]) ]; return trous.length ? md`⚠️ **${trous.length} élément(s) à compléter** : ${trous.join(" · ")}` : md`✅ **Ton rendu est complet.** Dépose le lien de ce notebook.`; }3a:[] 2e:{"id":"c7c22713622b98e8","slug":"tp-5-interagir-raconter-exporter","title":"TP 5 — Interagir, raconter, exporter","thumbnail":"8da006d74252ef88e32efcec5d7e3488b65451be6cc1c12f27aec02ca90ffd72","access_level":"public","create_time":"$D2026-09-29T13:35:47.181Z","update_time":"$D2026-09-29T13:46:42.280Z","view_time":null,"first_public_time":"$D2026-09-29T13:35:51.838Z","has_unpublished_edits":null,"fork":{"id":"0f4ceb8946eac6d6","slug":"tp-5-interagir-raconter-exporter","title":"TP 5 — Interagir, raconter, exporter","owner":{"id":"29853dc62ffa3714","login":"mmi-montbeliard","name":"MMI Montbéliard"}},"stars":0,"starred":false,"owner":{"type":"team","id":"fc800f9bf313c537","login":"noah-litzler","name":"Noah Litzler","avatar_url":null,"tier":"starter_2024"},"version":313,"publish_version":313,"role":null,"authored":false,"authors":[{"type":"individual","id":"68c049d5d4ff13b7","login":"noah-litzler","name":"Noah Litzler","avatar_url":null,"tier":null}],"members":[{"type":"team","id":"fc800f9bf313c537","login":"noah-litzler","name":"Noah Litzler","avatar_url":null,"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 5 — Interagir, raconter, exporter","cells":[{"id":0,"value":"# TP 5 — Interagir, raconter, exporter\n\nDernière séance. Tes cartes du TP 4 sont justes — c'est acquis, on n'y revient\npas. Aujourd'hui, trois gestes :\n\n1. **Interagir** — trois interactions, et pour chacune la question de lecteur\n qu'elle sert. Sinon on la supprime.\n2. **Raconter** — assembler tes viz en un récit en quatre temps.\n3. **Exporter** — faire passer une visualisation de ce notebook au site\n Astro de R312. Tu sais déjà monter les pages ; ce qui manque, c'est de savoir\n **ce qu'on y fait passer**, et pourquoi.\n\nUn raccourci pour tout le TP : **on n'exporte pas une image, on exporte une\nrecette et des données.**\n\n---\n\n## ⚠️ Avant toute chose : **forke ce notebook**\n\nBouton **Fork**. Le notebook est ton rendu, tu en déposeras le lien sur Moodle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"## Ton TP 4 est une bibliothèque\n\nTu ne recopies rien. Une cellule suffit pour récupérer les données et les cartes\nde la semaine dernière.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"import { departements, contours, parDep, carte } from \"@mmi-montbeliard/tp-4-cartographier-et-finir\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"Si ton TP 4 est incomplet, prends le **notebook de reprise** publié après la\nséance : `import { … } from \"@mmi-montbeliard/tp-4-corrige\"`. Tu ne perds pas la\nséance d'aujourd'hui pour un fichier de la semaine dernière.\n\n **À toi** — vérifie que ça a marché : la cellule ci-dessous doit\nafficher 96 lignes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"Inputs.table(parDep)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"## Cinq interactions — trois à construire, une déjà jugée, une refusée\n\nLe CM 5 en a listé cinq. Voici ce qu'on en fait aujourd'hui, et pourquoi.\n\n| L'interaction | La question du lecteur | Aujourd'hui |\n|---|---|---|\n| Vue d'ensemble puis zoom | « je veux voir le détail de cette zone » | **refusée** — tu diras pourquoi |\n| Survol et infobulle | « combien exactement, ici ? » | vue au TP 4 — et **écartée** de la publication |\n| Curseur et plage | « où est-ce au-dessus de tel niveau ? » | **à construire** |\n| Filtre | « et si je ne regarde que ceux-là ? » | **à construire** |\n| Détails à la demande | « ce département-là, il est où dans le classement ? » | **à construire** |\n\nRappelle-toi la conclusion du TP 4 : l'infobulle ne t'a **pas** permis de trouver\nle département n° 1. Une interaction donne un détail ; elle ne répare pas un\nencodage. Garde ça en tête pour les trois qui suivent.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"## Les trois interactions\n### 1. Le curseur — « où est-ce au-dessus de tel niveau ? »","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":127,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"viewof seuil = Inputs.range([0, 12], {\n step: 0.5, value: 0, label: \"Au moins … pour 100 000 hab.\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"// À toi — la carte qui suit le curseur, en deux couches\ncarteSeuil = Plot.plot({\n width: 500,\n projection: {\n type: \"mercator\",\n domain: departements\n },\n color: {\n type: \"quantize\",\n n: 5,\n scheme: \"blues\",\n legend: true,\n label: `Pour 100 000 habitants — seuil : ${seuil}`\n },\n marks: [\n Plot.geo(departements, {\n fill: \"#eee\",\n stroke: \"white\",\n strokeWidth: 0.3\n }),\n Plot.geo(departements, {\n fill: (f) => {\n const valeur = new Map(\n parDep.map((d) => [d.code, d.pour100k])\n ).get(f.properties.code);\n\n return valeur >= seuil ? valeur : null;\n },\n stroke: \"white\",\n strokeWidth: 0.3\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"aide(\"lesTrous\", \"pourquoi null et pas 0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"### 2. Le filtre — « et si je ne regarde que ceux-là ? »","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"viewof recherche = Inputs.search(parDep, {\n placeholder: \"Filtrer : un nom, un code…\",\n columns: [\"code\", \"nom\", \"n\", \"pour100k\"]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"Inputs.table(recherche, {\n columns: [\"code\", \"nom\", \"n\", \"pour100k\"],\n header: { n: \"Implantations\", pour100k: \"Pour 100 000 hab.\" },\n format: { pour100k: v => v == null ? \"inconnu\" : v.toFixed(1) },\n sort: \"pour100k\", reverse: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"`Inputs.search` **filtre un tableau** et renvoie les lignes qui restent.\n`Inputs.table` les affiche. Deux cellules, aucune ligne de code d'écoute — c'est\nla réactivité du CM… et de l'antisèche.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"aide(\"partieA\", \"la réactivité\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"### 3. Les détails à la demande — « il est où, celui-là ? »","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"// À toi — le même tableau, trié du mieux doté au moins bien doté\nclassement = parDep.toSorted(\n (a, b) => (b.pour100k ?? -1) - (a.pour100k ?? -1)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof choisi = Inputs.select(\n classement.map(d => d.nom),\n { label: \"Un département\", value: \"Lozère\" }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"ficheDep = {\n const d = parDep.find(x => x.nom === choisi);\n const rang = classement.findIndex(x => x.nom === choisi) + 1;\n return html`\n

\n ${d.nom} (${d.code})
\n ${d.n} implantation${d.n > 1 ? \"s\" : \"\"} ·\n ${d.pour100k == null ? \"taux inconnu\" : d.pour100k.toFixed(1) + \" pour 100 000 hab.\"}
\n Rang ${rang} sur ${classement.length}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"### 4. Le zoom — celui qu'on refuse","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":55,"value":" **À toi** — On ne construit pas le zoom, alors qu'il est\npremier dans la liste de Shneiderman. **Pourquoi n'apporte-t-il rien ici ?**\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":62,"value":"rRefus = `\nJe le supprime, parce qu'il ne permet pas d'apporter une information supplémentaire ici. La carte montre déjà les départements à la bonne échelle et le zoom ne répond pas à une question précise du lecteur.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"## La question qui décide\n\n **À toi** — Pour **chacune des trois** interactions ci-dessus,\nécris en une phrase **la question du lecteur** à laquelle elle répond.\n\nLa règle, et elle est sans appel : **si tu n'arrives pas à écrire la question,\nsupprime l'interaction.** Une au moins des trois ne devrait pas survivre.\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":67,"value":"rInteractions = `\nLe curseur — question du lecteur : Quels départements dépassent un certain niveau d'implantations pour 100 000 habitants ? Je le garde, parce qu'il permet de comparer rapidement les départements selon un seuil choisi.\n\nLe filtre — question du lecteur : Quels départements correspondent à certains critères ? Je le supprime, parce qu'il apporte peu d'information supplémentaire par rapport aux autres interactions.\n\nLes détails à la demande — question du lecteur : Quel est le classement d'un département précis ? Je le garde, parce qu'il permet d'obtenir une information précise sur un département sans surcharger la carte.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":74,"value":"TITRES = ({\n contexte: \"Les implantations d'enseignement supérieur sont réparties dans tous les départements, mais de manière très différente.\",\n exploration: \"Les départements les plus peuplés regroupent souvent le plus grand nombre d'implantations.\",\n revelation: \"Rapportées à la population, certaines zones moins peuplées ressortent davantage.\",\n conclusion: \"Le nombre brut et le nombre rapporté à la population donnent deux lectures différentes de la répartition.\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"aide(\"objetLitteral\", \"les parenthèses autour de l'objet\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"recit = html`\n

${TITRES.contexte || \"…\"}

${TITRES.exploration || \"…\"}

\n ${carteAbsolue}\n

${TITRES.revelation || \"…\"}

\n ${carteRelative}\n

${TITRES.conclusion || \"…\"}

\n Source : MESR (implantations, 2017) · INSEE (population, 2021) ·\n France métropolitaine.\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"carteAbsolue = carte(\"n\", { label: \"Implantations\", largeur: 380 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"carteRelative = carte(\"pour100k\", { label: \"Pour 100 000 hab.\", largeur: 380 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"## Sortir du notebook\n\nTon notebook est un bon atelier. Ce n'est pas un site.\n\nEn R312, tu montes un site Astro. La question n'est donc pas « comment je fais\nune belle viz » — tu sais faire — mais **qu'est-ce qui passe d'un cours à\nl'autre**.\n\nLa réponse va te surprendre : **presque jamais une image.**\n\nCe que tu fais traverser, c'est :\n\n1. **des données** — propres, légères, aux seules colonnes utiles ;\n2. **des textes** — titre, sous-titre porteur, source, alternative textuelle ;\n3. **une recette** — tes marques Plot et leurs canaux.\n\nLe graphique, lui, **se refabrique de l'autre côté**. Il n'y a rien à\nphotographier.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":87,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"⚠️ **Et voilà la facture du Temps 1.**\n\n`PlotFigure.astro` **sérialise** ton graphique : il en prend le HTML, c'est-à-dire\ndu **texte**. Or les gestionnaires d'événements, eux, ne se sérialisent pas.\n\nDonc `tip: true` **ne survit pas**. Ni un curseur, ni un filtre, ni ta fiche de\ndépartement.\n\nGarder une interaction, ce n'est pas ajouter une ligne : c'est **changer de\nroute**. Passer en B, charger Plot chez le lecteur, et lui faire exécuter du\nJavaScript pour un service qu'il n'a peut-être pas demandé.\n\n**C'est le vrai prix d'un curseur** — pas le temps de l'écrire.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"## Ce que tu livres · 1 · les données","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":134,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"// À toi — les colonnes utiles, et rien d'autre\ndonneesAstro = parDep.map((d) => ({\n code: d.code,\n nom: d.nom,\n n: d.n,\n pop: d.pop,\n pour100k: d.pour100k == null ? null : +d.pour100k.toFixed(2)\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"DOM.download(\n new Blob([JSON.stringify(donneesAstro)], { type: \"application/json\" }),\n \"densite.json\", \"⬇ densite.json\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"⚠️ **Deux clics.** Le premier prépare le fichier (le bouton affiche\n« Download »), le second le télécharge. C'est le comportement de `DOM.download`,\npas un bug.\n\n💡 **Pas d'indentation dans un fichier de livraison.** `JSON.stringify(x, null, 2)`\nproduit un fichier lisible à l'œil — et **10 ko**. Sans indentation : **6 ko**\npour les mêmes 96 lignes. Un tiers du poids en espaces, dans un fichier que\npersonne ne lira à la main.\n\nPour comparer : le JSON des manchots de R312 porte dix-sept colonnes ; un nuage\nde points en utilise quatre. Le bonus « filtrer et ne garder que les colonnes\nutiles » de ta semaine 1, c'est exactement cette cellule.\n\n## Ce que tu livres · 2 · et le poids, que tu vas mesurer\n\nTa carte n'est pas faite que de données : elle est faite de **contours**. Et\nceux-là traversent, quelle que soit la route — au build comme chez le lecteur.\n\nMesure-les. La cellule ci-dessous sérialise ta carte exactement comme\n`PlotFigure.astro` le fera.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"svgTexte = (fig) => {\n const svgs = fig.tagName.toLowerCase() === \"svg\"\n ? [fig]\n : [...fig.children].filter(e => e.tagName.toLowerCase() === \"svg\");\n // le DERNIER : quand il y a une légende continue, elle est un