2a:null 2b:["$","title",null,{"children":"TP 5 — Interagir, raconter, exporter | Pierre Mouilleseaux Lhuillier | 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: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.`; }39:[{"id":"e9f8729d53d923bba64adbd38824e96f84eaa9d4717993069544ae22c2d19cf3a597779d0ba930404df9c832a86247cd0c38f1879cac366cc3ad99e01e9da9df","href":"https://static.observableusercontent.com/files/e9f8729d53d923bba64adbd38824e96f84eaa9d4717993069544ae22c2d19cf3a597779d0ba930404df9c832a86247cd0c38f1879cac366cc3ad99e01e9da9df","name":"image.png","type":"image/png","lastModified":1790692260925,"size":191168}] 2e:{"id":"c5c401171e82d4ce","slug":"tp-5-interagir-raconter-exporter","title":"TP 5 — Interagir, raconter, exporter","thumbnail":"8da006d74252ef88e32efcec5d7e3488b65451be6cc1c12f27aec02ca90ffd72","access_level":"public","create_time":"$D2026-09-29T13:34:22.617Z","update_time":"$D2026-09-29T14:36:35.902Z","view_time":null,"first_public_time":"$D2026-09-29T13:34:35.741Z","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":"9ca570f2a0228367","login":"pierre-ml","name":"Pierre Mouilleseaux Lhuillier","avatar_url":"https://avatars-next.observableusercontent.com/025f79e5435c7196d27c46f4503d0ff4cef4fcc762f72824087ed0937c4cc9d9","tier":"starter_2024"},"version":320,"publish_version":320,"role":null,"authored":false,"authors":[{"type":"individual","id":"bdfbab5b2d128fe2","login":"pierre-ml","name":"Pierre Mouilleseaux Lhuillier","avatar_url":"https://avatars-next.observableusercontent.com/025f79e5435c7196d27c46f4503d0ff4cef4fcc762f72824087ed0937c4cc9d9","tier":null}],"members":[{"type":"team","id":"9ca570f2a0228367","login":"pierre-ml","name":"Pierre Mouilleseaux Lhuillier","avatar_url":"https://avatars-next.observableusercontent.com/025f79e5435c7196d27c46f4503d0ff4cef4fcc762f72824087ed0937c4cc9d9","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 projection: { type: \"mercator\",\n domain: { type: \"FeatureCollection\", features: contours } },\n color: { type: \"quantize\", n: 5, scheme: \"blues\", domain: [0, 12], legend: true,\n label: `Pour 100 000 hab. — au moins ${seuil}` },\n marks: [\n Plot.geo(contours, { fill: \"#eee\", stroke: \"white\", strokeWidth: 0.3 }),\n Plot.geo(contours, {\n fill: f => {\n const v = f.properties.pour100k;\n return v != null && v >= seuil ? v : null;\n },\n stroke: \"white\", 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((a, b) => (b.pour100k ?? -1) - (a.pour100k ?? -1))","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 = `\nUne valeur par département : zoomer agrandit un aplat sans rien ajouter. Les petits départements se lisent dans le classement.\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 tel taux pour 100 000 hab. ? »\n je garde, parce que — la carte en 5 classes ne montre pas un seuil choisi.\n\nLe filtre — question du lecteur : « quels départements portent tel nom ou tel code ? »\n je supprime, parce que — le curseur filtre déjà, et la recherche ne fait que retrouver une ligne.\n\nLes détails à la demande — question du lecteur : « ce département-là, il est où dans le classement ? »\n je garde, parce que — la carte ne donne ni le nom ni le rang d'un département.\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: \"Paris compte 252 implantations, l'Ardèche aucune\",\n exploration: \"En brut, Paris devance le Nord : la carte suit la population\",\n revelation: \"Rapportés à la population, de petits départements (Lozère, Haute-Corse) rivalisent avec Paris\",\n conclusion: \"Le brut suit la population ; le taux permet de comparer les départements\"\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(({ code, nom, n, pop, pour100k }) => ({\n code, nom, n, pop,\n pour100k: pour100k == null ? null : +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