2a:null 2b:["$","title",null,{"children":"TP 4 — Cartographier, et finir | Pierre Mouilleseaux Lhuillier | Observable"}] 30:T483,## D'où viennent ces trois fichiers | Fichier | Source | Licence | |---|---|---| | implantations | MESR — *Implantations des établissements d'enseignement supérieur publics*, [data.gouv.fr](https://www.data.gouv.fr/datasets/implantations-des-etablissements-denseignement-superieur-publics), **arrêté en 2017** | Licence Ouverte | | population | INSEE — recensement de la population, millésime **2021** | — | | contours | contours des départements de France métropolitaine | — | ⚠️ **Trois fichiers, trois millésimes** : 2017 pour les implantations, 2021 pour la population. Tu vas les diviser l'un par l'autre — donc calculer un taux **entre deux dates différentes**. Ça ne rend pas le calcul faux, mais ça se déclare : c'est exactement ce que la `caption` de ta carte doit dire. Le modèle : > Source : [MESR (implantations, 2017)](https://www.data.gouv.fr/datasets/implantations-des-etablissements-denseignement-superieur-publics) · [INSEE (population, 2021)](https://catalogue-donnees.insee.fr/en/catalogue/recherche/DS_RP_POPULATION_PRINC) · > [France métropolitaine](https://github.com/gregoiredavid/france-geojson).31:T4e6, **À toi** ## Écris la carte 1 **En effectifs bruts** : le nombre d'implantations par département. Tu as tout ce qu'il faut — la section 4 t'a donné la projection et la marque `Plot.geo`, le TP 3 t'a donné les canaux et les échelles de couleur. Le cahier des charges, et rien de plus : | | | |---|---| | les données | `contours` | | la marque | `Plot.geo`, avec un filet blanc entre les départements (`stroke`, `strokeWidth`) | | le canal | `fill` porte le champ `"n"` | | l'échelle | `color` en **5 classes** — `type: "quantize"`, `n: 5`, `scheme: "blues"` — avec `legend: true` **et** un `label` | | la projection | Mercator, `domain: departements` | | la taille | `width: 300` : les deux cartes devront tenir côte à côte | ⚠️ Une échelle de couleur sans `label`, c'est une carte muette : on voit des bleus, on ne sait pas de quoi ils parlent.32:T605,## Ce qui sépare une sortie d'outil d'une publication **À toi** Reprends ta **carte 2** et applique les quatre transferts du CM4. **1 · La palette.** Tu as une palette séquentielle (`blues`). Essaie `"rainbow"`, puis `"RdBu"`. Que se passe-t-il ? Pourquoi une palette divergente est-elle un contresens ici ? **2 · Les classes.** Remplace `type: "quantize"` par `"quantile"`, puis par `"linear"`. La carte change beaucoup. Choisis, et sache dire pourquoi. **3 · Le texte.** Plot te donne trois emplacements — c'est exactement la hiérarchie du CM4 : ```js Plot.plot({ title: "…", // descriptif : de quoi parle le graphique subtitle: "…", // PORTEUR : ce que tu as compris caption: "…", // source, date, périmètre … }) ``` Le sous-titre est le seul endroit où tu as le droit d'affirmer. « Implantations pour 100 000 habitants » décrit un fichier. « La Lozère est mieux dotée que le Nord, rapportée à sa population » décrit une découverte — et t'engage. **4 · L'alternative textuelle.** Quatre temps : la nature · ce qui est mesuré · la conclusion · les valeurs remarquables.33:[{"id":"7fd416c9a9000d36ae5f1f249384737092f455ba58a2e39b4d218afac309bf20ab439b7631274268ffa125054044344e14d6f2d727b52ce7d61858d1b256db79","href":"https://static.observableusercontent.com/files/7fd416c9a9000d36ae5f1f249384737092f455ba58a2e39b4d218afac309bf20ab439b7631274268ffa125054044344e14d6f2d727b52ce7d61858d1b256db79","name":"departements.geojson","type":"application/geo+json","lastModified":1786344620024.35,"size":3427910},{"id":"0bc602383222f347c78dc2515ab79cf1d8058db3e9d1d918bbfb4e563db25ceefe086bbd947937e21ea0f732f2d965c10d2efe126186a7eb599cedefcb7e4a46","href":"https://static.observableusercontent.com/files/0bc602383222f347c78dc2515ab79cf1d8058db3e9d1d918bbfb4e563db25ceefe086bbd947937e21ea0f732f2d965c10d2efe126186a7eb599cedefcb7e4a46","name":"fr-esr-implantations_etablissements_d_enseignement_superieur_publics.json","type":"application/json","lastModified":1786344620299.168,"size":3727925},{"id":"f38a65e54e57fb2ef37b2c11fe310b6b08aa249366a2ba1c1a61e765618e5dd8eb6eacf4a8517a2cba9ce4a093643c7e5a522b80562fe289d0557d91d8b26b86","href":"https://static.observableusercontent.com/files/f38a65e54e57fb2ef37b2c11fe310b6b08aa249366a2ba1c1a61e765618e5dd8eb6eacf4a8517a2cba9ce4a093643c7e5a522b80562fe289d0557d91d8b26b86","name":"DS_RP_POPULATION_dep2.csv","type":"text/csv","lastModified":1786344618971.514,"size":7807}] 2e:{"id":"8e588696e2e86d10","slug":"tp-4-cartographier-et-finir","title":"TP 4 — Cartographier, et finir","thumbnail":"fa4ed0d110957aa86082ee612998cd9e19d4e92cf03a40dbd4f24c4fd868d48d","access_level":"public","create_time":"$D2026-09-22T12:08:00.437Z","update_time":"$D2026-09-22T14:31:53.824Z","view_time":null,"first_public_time":"$D2026-09-22T12:08:13.010Z","has_unpublished_edits":null,"fork":{"id":"ae526bbb5d2d4a84","slug":"tp-4-cartographier-et-finir","title":"TP 4 — Cartographier, et finir","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":365,"publish_version":365,"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 4 — Cartographier, et finir","cells":[{"id":0,"value":"# TP 4 — Cartographier, et finir\n\nMême jeu de données qu'au TP 3 — les implantations du supérieur — plus deux\nfichiers : les **contours** des départements et leur **population**.\n\nDeux objectifs, et le premier vaut pour toute ta scolarité :\n\n1. **Produire les deux cartes** : en effectifs bruts, puis rapportée à la\n population. Et dire ce que chacune raconte.\n2. **Finir** un graphique : palette, titre, source, alternative textuelle.\n C'est ce qui sépare une sortie d'outil d'une publication.\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","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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"departements = FileAttachment(\"departements.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"population = FileAttachment(\"DS_RP_POPULATION_dep2.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"Inputs.table(population)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"// Le nettoyage du TP 3, à l'identique\nimplantations = esr\n .filter((d) => d.dep_id)\n .map((d) => ({ ...d, dep: d.dep_id.replace(/^D0?/, \"\") }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"Inputs.table(implantations)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":19,"value":"## Joindre trois fichiers\n\nTes trois fichiers ne parlent pas la même langue :\n\n| Fichier | Clé du département |\n|---|---|\n| implantations | `dep` — un **code** : `\"59\"` |\n| contours | `properties.code` — un **code** : `\"59\"` |\n| population | `Géographie` — un **nom** : `\"Nord\"` |\n\nDeux jointures, donc, et **par des clés différentes**. Les voici — lis-les\nattentivement : c'est le seul endroit du TP où tu joins par un **nom** et pas\npar un code, et c'est là que ça casse d'habitude.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"popParNom = new Map(population.map((d) => [d[\"Géographie\"], d.Valeur]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"nbParDep = d3.rollup(\n implantations,\n (v) => v.length,\n (d) => d.dep\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"aide(\"laMap\", \"La Map et les jointures\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":" **À toi**\n\n**Avant d'aller plus loin : une jointure se prouve.**\n\n« Ça a l'air de marcher » n'est pas un contrôle. Voici celui qui le démontre :\nil ne compte pas ce qui est joint, il compte **ce qui tombe à côté** — c'est\ntoujours dans ce sens qu'il faut regarder.\n\nExécute-le, puis réponds : les trois résultats disent chacun quelque chose.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"controle = ({\n // des départements dessinés, mais sans aucune implantation\n sansImplantation: departements.features\n .filter((f) => !nbParDep.has(f.properties.code))\n .map((f) => f.properties.nom),\n\n // des lignes de population sans contour correspondant\n populationSansContour: population\n .map((d) => d[\"Géographie\"])\n .filter(\n (nom) => !departements.features.some((f) => f.properties.nom === nom)\n ),\n\n // des implantations qui n'apparaîtront sur aucune carte\n implantationsHorsCarte:\n implantations.length -\n d3.sum(departements.features, (f) => nbParDep.get(f.properties.code) ?? 0)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":" *Ta réponse, dans la cellule ci-dessous.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"rJointure = `\nCe que le contrôle révèle —\nL'Ardèche n'a aucune implantation dans le fichier. Les 4 DOM n'ont pas de contour. 104 implantations sont hors carte : DOM, Polynésie, Nouvelle-Calédonie et 7 en code 999.\n\nCe que je décide d'en faire — Je les laisse de côté, la carte ne montre que la métropole. L'Ardèche reste à 0.\n\n\nCe que j'écrirai sous ma carte — France métropolitaine uniquement, outre-mer non représenté.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"## Première carte, et la projection\n**Mercator est notre défaut**, pour tout le TP. Une ligne, aucun réglage :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"Plot.plot({\n projection: { type: \"mercator\", domain: departements },\n marks: [Plot.geo(departements, { stroke: \"currentColor\", strokeWidth: 0.5 })]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"C'est la projection du web : toutes les cartes en tuiles — OpenStreetMap,\nLeaflet, les fonds de carte que tu croiseras en stage — sont en Mercator.\nSi tes visualisations doivent un jour se superposer à un fond de carte, c'est\ncelle-là qu'il te faut.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"// Pour comparer : la conique conforme, celle de l'IGN\nPlot.plot({\n projection: {\n type: \"conic-conformal\",\n rotate: [-3, 0],\n parallels: [44, 49],\n domain: departements\n },\n marks: [Plot.geo(departements, { stroke: \"currentColor\", strokeWidth: 0.5 })]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"Deux projections, deux Frances.\n\nLa **conique conforme** est celle de l'IGN — c'est la forme officielle, celle\ndes cartes que tu as vues à l'école. Il lui faut trois réglages (`rotate`,\n`parallels`) qu'on ne devine pas.\n\nLa **Mercator** ne demande rien, et c'est celle du web. Son prix : elle\n**gonfle le nord**. Sur la France métropolitaine, un département du Nord occupe\nenviron **40 % de surface en plus** qu'un département méridional de même\nsuperficie réelle.\n\n**Retiens deux choses :**\n\n1. Une projection est un **choix**, et il déforme toujours quelque chose — les\n angles, les aires ou les distances. Jamais les trois à la fois.\n2. Sur une **carte choroplèthe**, la déformation des aires n'est pas neutre :\n elle change le **poids visuel** des territoires. On y revient dans dix\n minutes avec le contre-exemple.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"## Une carte est un graphique comme les autres\n\nAu TP 3 tu écrivais `Plot.barX(parRegion, { x: \"n\", y: \"region\" })` : des\n**données**, une **marque**, des **canaux**. Une carte ne change rien à ça.\n\n| | TP 3 | Ici |\n|---|---|---|\n| la marque | `Plot.barX` | `Plot.geo` |\n| le canal qui porte la valeur | `x` | `fill` |\n| l'espace | les échelles `x` et `y` | une **projection** |\n\nUne seule règle est nouvelle, et elle commande tout ce qui suit :\n\n> **`Plot.geo` va chercher ses canaux dans les `properties` du contour.**\n> `fill: \"n\"` veut dire « prends `properties.n` de ce département ».\n\nDonc on range la jointure **dans les propriétés**, une fois — et on dessine\nensuite avec des noms de champs, exactement comme au TP 3.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"// La jointure, rangée là où Plot ira la chercher : dans properties\ncontours = departements.features.map(f => {\n const n = nbParDep.get(f.properties.code) ?? 0; // absence → ZÉRO\n const pop = popParNom.get(f.properties.nom);\n return {\n ...f,\n properties: {\n ...f.properties,\n n,\n pop,\n pour100k: pop ? (n / pop) * 1e5 : null // absence → INCONNU\n }\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"// Les mêmes données à plat, une ligne par département. C'est cette forme-là que\n// lisent Inputs.table et les marques non géographiques (barX, dot, line…).\nparDep = contours.map(f => f.properties)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"aide(\"raccourcis\", \"?? et le ternaire\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"Inputs.table(parDep, { sort: \"n\", reverse: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"// À toi — la carte des effectifs bruts\ncarte1 = Plot.plot({\n width: 300,\n projection: { type: \"mercator\", domain: departements },\n color: { type: \"quantize\", n: 5, scheme: \"blues\", legend: true, label: \"Implantations\" },\n marks: [Plot.geo(contours, { fill: \"n\", stroke: \"white\", strokeWidth: 0.3 })]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"## La même, une seconde fois — donc une fonction\n\nTu vas maintenant dessiner la carte 2, rapportée à la population. Les quinze\nlignes que tu viens d'écrire sont identiques à **un mot près** : le champ.\n\nDeux raisons de les ranger dans une fonction, et la seconde est propre à\nObservable :\n\n1. tu ne retapes pas quinze lignes pour changer un mot ;\n2. **un nœud du DOM ne s'affiche qu'à un seul endroit.** Une carte déjà affichée\n dans sa cellule ne peut pas être ré-affichée à côté d'une autre : elle serait\n *déplacée*. Il faut donc une fonction qui en **fabrique une neuve** à chaque\n appel.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"// Ta carte 1, rangée dans une fonction : ce qui change devient un paramètre.\ncarte = (champ, { label, titre, sousTitre, largeur = 300 } = {}) =>\n Plot.plot({\n width: largeur,\n height: largeur * 1.05,\n marginLeft: 0, marginRight: 0,\n title: titre,\n subtitle: sousTitre,\n projection: { type: \"mercator\", domain: departements },\n color: {\n type: \"quantize\", n: 5, scheme: \"blues\",\n legend: true, label, width: largeur\n },\n marks: [\n Plot.geo(contours, { fill: champ, stroke: \"white\", strokeWidth: 0.3 })\n ]\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"> 💡 `fill: champ` accepte aussi bien un **nom de champ** (`\"n\"`) qu'une\n> **fonction** (`f => …`). C'est vrai de tous les canaux de Plot — et c'est ce\n> qui rend cette fonction réutilisable telle quelle pour le bonus « par rang »,\n> plus bas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":" **À toi**\n\n## La carte 2, dans la comparaison\n\nLa carte 1 est déjà appelée ci-dessous. **Complète la seconde** : le bon champ,\net les trois textes. Le champ qui rapporte à la population s'appelle\n`\"pour100k\"` — tu l'as fabriqué tout à l'heure.\n\n⚠️ Le `label` de la légende n'est pas décoratif : les deux cartes n'ont **pas\nla même échelle**, donc un même bleu ne veut pas dire la même chose à gauche et\nà droite. Le `label` est ce qui empêche le lecteur de les confondre.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"// LES DEUX CARTES, CÔTE À CÔTE — c'est la comparaison qui enseigne,\n// pas chaque carte prise séparément.\ncomparaison = html`\n

\n ${carte(\"n\", {\n label: \"Implantations\",\n titre: \"1 · En effectifs bruts\",\n sousTitre: \"Où y a-t-il le plus d'établissements ?\"\n })}\n ${carte(\"pour100k\", { label: \"Pour 100 000 habitants\", titre: \"2 · Rapportée à la population\", sousTitre: \"Où y en a-t-il le plus par habitant ?\" })}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"> 💡 **Deux réglages à connaître.** `largeur: 300` fait tenir les deux cartes\n> côte à côte dans une cellule Observable standard (~640 px) ; en mode large,\n> monter à `440`. Et `flex-wrap: wrap` fait qu'elles s'empilent proprement sur un\n> écran étroit au lieu d'être écrasées.\n>\n> ⚠️ **Les deux échelles de couleur sont DIFFÉRENTES, et c'est volontaire** —\n> les unités ne sont pas les mêmes. Conséquence : *un même bleu ne veut pas dire\n> la même chose à gauche et à droite.* D'où l'importance du `label` de chaque\n> légende. C'est un piège classique de la comparaison côte à côte, et il vaut la\n> peine d'être dit à voix haute.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"

Bonus — la comparaison par RANG, si tu veux montrer la bascule directement

\n\nColorer les deux cartes par le rang (1 à 96) rend les deux échelles\nidentiques, donc réellement comparables. C'est la façon la plus nette de faire\nvoir que le Nord dégringole.\n\nIci fill reçoit une FONCTION et non un nom de champ : le rang n'est pas\ndans les propriétés du contour, il se calcule. Les deux formes se valent.\n\nhtml`\n

\n ${carte(f => rangAbsolu.get(f.properties.code), {\n label: \"Rang (1 = premier)\", titre: \"1 · Rang en effectifs bruts\" })}\n ${carte(f => rangRelatif.get(f.properties.code), {\n label: \"Rang (1 = premier)\", titre: \"2 · Rang pour 100 000 hab.\" })}\n

`\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"// Une Map code → rang (1 = premier), pour un accesseur donné\nrang = (valeur) => {\n const tri = parDep.toSorted((a, b) => d3.descending(valeur(a), valeur(b)));\n return new Map(tri.map((d, i) => [d.code, i + 1]));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"rangAbsolu = rang(d => d.n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"rangRelatif = rang(d => d.pour100k)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":" **À toi**\n\n**Les deux cartes, côte à côte.** Maintenant, le travail :\n\n1. **Écris une phrase par carte** — ce que chacune dit, et à qui elle le dirait.\n2. **Compare les classements.** Où est le Nord dans l'une ? dans l'autre ?\n3. **Laquelle est fausse ?** Attention, il y a un piège.\n\n *Ta réponse, dans la cellule ci-dessous.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"rDeuxCartes = `\nCe que dit la carte 1 — Les établissements sont là où il y a le plus d'habitants. Utile au ministère qui répartit l'offre.\n\nCe que dit la carte 2 — Par habitant, Paris reste devant, puis la Haute-Corse et la Lozère. Utile à un élu local ou à un lycéen.\n\nLe classement qui change le plus — Le Nord passe de 2e a 16e.\n\nLaquelle est fausse, et pourquoi — Aucune, elles ne répondent pas à la même question. Le piège, c'est de lire la carte 1 comme « qui est le mieux doté ».\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":" **À toi**\n\n## Trouve le premier\n\nSur ta carte 1, **sans regarder le tableau** : quel est le département qui compte\nle plus d'implantations ?\n\nPrends trente secondes. Vraiment.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"// À toi — les douze premiers départements, en barres\nbarres = Plot.plot({\n marginLeft: 130,\n marks: [Plot.barX(d3.sort(parDep, d => -d.n).slice(0, 12), { x: \"n\", y: \"nom\", sort: { y: \"-x\" } })]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":" *Ta réponse, dans la cellule ci-dessous.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"rContreExemple = `\nCe que je n'ai pas réussi à lire sur la carte — Le n°1. J'ai cru que c'était le Nord, mais c'est Paris.\n\nPourquoi — Paris ne fait que quelques pixels. L'œil voit les grandes surfaces, pas les grandes valeurs.\n\nLa question à laquelle une carte répond mal — « Qui est premier ? » Un classement précis.\n\nEt l'infobulle : est-ce qu'elle règle le problème ? (à remplir après la section suivante) — Non. Il faut déjà savoir où pointer, et elle ne donne qu'une valeur à la fois.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"## Et si on ajoutait une infobulle ?\nTu viens de constater qu'on ne trouve pas Paris sur la carte. Réflexe naturel :\n« il suffit d'ajouter une infobulle au survol ». Essayons.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"Plot.plot({\n width: 460,\n projection: { type: \"mercator\", domain: departements },\n color: { type: \"quantize\", n: 5, scheme: \"blues\", legend: true,\n label: \"Pour 100 000 hab.\" },\n marks: [\n Plot.geo(contours, {\n fill: \"pour100k\",\n stroke: \"white\",\n strokeWidth: 0.3,\n // `channels` ajoute des valeurs à l'infobulle — par nom de champ,\n // puisque la jointure est rangée dans les propriétés du contour.\n channels: { \"Département\": \"nom\", \"Implantations\": \"n\" },\n // `tip: { format: … }` active l'infobulle ET met en forme ses lignes.\n // `fill` y désigne la valeur qui porte la couleur.\n tip: { format: { fill: v => v == null ? \"inconnu\" : v.toFixed(1) } }\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":219,"value":"💡 Comparer avec la version d'avant : `channels: { \"Département\": f =>\nf.properties.nom, … }`. Ranger la jointure dans `properties` fait disparaître\nles accesseurs — ici comme dans `fill`. C'est le même gain qu'au TP 3 quand\n`x: \"n\"` a remplacé `x: d => d.n`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":" **À toi**\n\n**Maintenant réponds honnêtement** : est-ce que l'infobulle t'a permis de trouver\nle département n° 1 ?\n\n→ Complète la **dernière ligne de `rContreExemple`**, plus haut.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"aide(\"texteAutour\", \"title, subtitle, caption\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"viewof palette = Inputs.select([\"blues\", \"greys\", \"rainbow\", \"RdBu\"], {\n label: \"Palette\",\n value: \"blues\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof classes = Inputs.select([\"quantize\", \"quantile\", \"linear\"], {\n label: \"Classes\",\n value: \"quantize\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"Plot.plot({\n width: 460,\n projection: { type: \"mercator\", domain: departements },\n color: { type: classes, n: 5, scheme: palette, legend: true,\n label: \"Pour 100 000 habitants\" },\n marks: [\n Plot.geo(contours, {\n fill: \"pour100k\",\n stroke: \"white\", strokeWidth: 0.3\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":" **À toi** — Passe les quatre palettes, puis les trois découpages. Deux réponses.\n\n *Ta réponse, dans les deux cellules ci-dessous.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":202,"value":"rPalette = `\nCe que fait « rainbow » — Les couleurs n'ont pas d'ordre : on ne sait pas si le vert vaut plus que le jaune.\n\nPourquoi « RdBu » est un contresens ici — Les départements les moins dotés sont en rouge foncé, donc l'œil y va en premier. Et la palette traite 6 comme un centre de référence alors qu'il n'en est pas un.\n\nLa palette que je garde, et pourquoi — « greys » : plus c'est foncé, plus il y en a, sans couleur qui induise un jugement. Elle reste aussi lisible imprimée en noir et blanc.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"rClasses = `\nCe que change « quantile » — Chaque classe a le même nombre de départements, donc la moitié de la France devient foncée. La Gironde ou la Seine-Maritime ont l'air aussi bien dotées que la Lozère, et la légende devient illisible.\n\nCe que change « linear » — Un dégradé continu de 0 à 12 : chaque département a sa propre nuance. On distingue même l'Ardèche, à 0.\n\nLe découpage que je garde, et pourquoi — « linear » : c'est le plus fidèle aux vraies valeurs, et les écarts qu'on voit sont ceux qui existent.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"valeursParDepartement = new Map(\n parDep.map((d) => [d.code, d.pour100k])\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"carteFinie = Plot.plot({\n width: 520,\n title: \"Implantations du supérieur pour 100 000 habitants\",\n subtitle: \"Paris reste en tête, mais la Haute-Corse et la Lozère dépassent les grandes métropoles\",\n caption: \"Source : MESR (2017) · INSEE (2021) · France métropolitaine\",\n\n projection: {\n type: \"mercator\",\n domain: departements\n },\n\n color: {\n type: \"linear\",\n scheme: \"greys\",\n legend: true,\n label: \"Pour 100 000 habitants\"\n },\n\n marks: [\n Plot.geo(departements, {\n fill: (f) => valeursParDepartement.get(f.properties.code),\n stroke: \"white\",\n strokeWidth: 0.4\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":" *Ta réponse, dans la cellule ci-dessous.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"rAltText = `\n1. La nature — Carte de France métropolitaine par département, en dégradé de gris.\n\n2. Ce qui est mesuré — Le nombre d'implantations du supérieur pour 100 000 habitants, de 0 à 12. Plus c'est foncé, plus il y en a.\n\n3. La conclusion — L'offre par habitant est la plus forte à Paris et dans quelques départements peu peuplés.\n\n4. Les valeurs remarquables — Paris en tête (11,8), la Haute-Corse et la Lozère ensuite, l'Ardèche à 0.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"## Synthèse\n\nDeux lignes : **la prochaine fois que tu voudras faire une carte, quelles deux\nquestions te poseras-tu avant d'ouvrir l'outil ?**\n\n *Ta réponse, dans la cellule ci-dessous.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"synthese = `\nÀ quelle question ma carte doit-elle répondre, et une carte est-elle le bon outil ?\nEst-ce que je montre un effectif ou un taux, et mes données sont-elles comparables ?\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"## Journal IA\n\nÀ remplir même si tu n'as rien utilisé.\nSans ce bloc, le rendu n'est pas évalué.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":175,"value":" *Ta réponse, dans la cellule ci-dessous.*","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"journalIA = `\n1. Quels outils / quels prompts — lors de se tp j'ai uttiliser claude j'ai commancer par lui rappler nos session précdant et lui et donner le tp dans sa globaliter je lui et dit aussi que pour tout ses reponse il devait lance un avant qui avait pour mission de démonter sont raisonement pour vérifier les bonne reponse. je m'en suis servie notament pour le code\n\n2. Ce que ça m'a apporté — il ma apporter un expertise dans les code qu'il fourisait même si pas toujour bon et une certain faciliter a la correction des phrasse\n\n3. Ce que j'ai dû corriger — la 1er carte il avait compétement oubiler le white 300 et la derniére carte ou la lui mavait proposer une carte beu bassique alors que se n'ait pas pertiante il sait aussi troper sur les 1er question en me proposent des piste totalement fause et éroner\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"# Vérification et rendu","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"QUESTIONS = [\n [\"La jointure et ses pièges\", rJointure],\n [\"Les deux cartes\", rDeuxCartes],\n [\"Le contre-exemple\", rContreExemple],\n [\"La palette\", rPalette],\n [\"Les classes\", rClasses],\n [\"L'alternative textuelle\", rAltText],\n [\"Synthèse\", synthese],\n [\"Journal IA\", journalIA]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"manques = {\n const rempli = (s) =>\n (s ?? \"\").split(\"\\n\").some((l) => l.trim() && !/[—:]\\s*$/.test(l.trim()));\n\n // les trois textes de la carte finie comptent aussi\n const textesCarte = [\n carteFinie.querySelector(\"h2\"),\n carteFinie.querySelector(\"h3\"),\n carteFinie.querySelector(\"figcaption\")\n ].map((e) => (e?.textContent ?? \"\").trim());\n\n const trous = [\n ...QUESTIONS.filter(([, texte]) => !rempli(texte)).map(([nom]) => nom),\n ...(textesCarte.some((t) => !t || t === \"…\")\n ? [\"les textes de la carte finie (titre, sous-titre, source)\"]\n : [])\n ];\n\n return trous.length\n ? md`⚠️ **${trous.length} élément(s) à compléter** : ${trous.join(\" · \")}`\n : md`✅ **Ton rendu est complet.** Dépose le lien de ce notebook.`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"# Synthèse des réponses","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"rendu = md`${[\n ...QUESTIONS.map(\n ([nom, texte]) => `### ${nom}\\n\\n${(texte ?? \"\").trim() || \"_(à remplir)_\"}`\n ),\n `---`,\n `### Les textes de la carte finie`,\n [\"h2\", \"h3\", \"figcaption\"]\n .map((sel, i) => {\n const t = (carteFinie.querySelector(sel)?.textContent ?? \"\").trim();\n return `**${[\"Titre\", \"Sous-titre\", \"Source\"][i]}** — ${\n t && t !== \"…\" ? t : \"_(à remplir)_\"\n }`;\n })\n .join(\"\\n\\n\")\n].join(\"\\n\\n\")}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"import { aide } from \"@mmi-montbeliard/antiseche-observable-javascript-et-plot\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 2f:"$2e:body"