2a:null 2b:["$","title",null,{"children":"TP 4 — Cartographier, et finir | Lina BEN MABROUK | 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:T64c,## 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: "Nombre d'implantations pour 100 000 habitants", subtitle: "La Lozère et la Corse présentent la plus forte densité d'implantations rapportée à leur population.", caption: "Source : Données internes, France métropolitaine, 2026.", }) ``` 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":"f38a65e54e57fb2ef37b2c11fe310b6b08aa249366a2ba1c1a61e765618e5dd8eb6eacf4a8517a2cba9ce4a093643c7e5a522b80562fe289d0557d91d8b26b86","href":"https://static.observableusercontent.com/files/f38a65e54e57fb2ef37b2c11fe310b6b08aa249366a2ba1c1a61e765618e5dd8eb6eacf4a8517a2cba9ce4a093643c7e5a522b80562fe289d0557d91d8b26b86","name":"DS_RP_POPULATION_dep2.csv","type":"text/csv","lastModified":1786344618971.514,"size":7807},{"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}] 2e:{"id":"f26e80bb78ffb276","slug":"tp-4-cartographier-et-finir","title":"TP 4 — Cartographier, et finir","thumbnail":"fa4ed0d110957aa86082ee612998cd9e19d4e92cf03a40dbd4f24c4fd868d48d","access_level":"public","create_time":"$D2026-09-22T14:13:49.566Z","update_time":"$D2026-09-23T20:41:27.711Z","view_time":null,"first_public_time":"$D2026-09-22T14:14:00.581Z","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":"424d804b800ec5e6","login":"linabenmabrouk","name":"Lina BEN MABROUK","avatar_url":"https://avatars-next.observableusercontent.com/d79b33a118ce1020c0e06624b184ca9b9cb946abb28e5267abf302572e5ea8a4","tier":"starter_2024"},"version":349,"publish_version":349,"role":null,"authored":false,"authors":[{"type":"individual","id":"ba3a5be37fd7df0f","login":"linabenmabrouk","name":"Lina BEN MABROUK","avatar_url":"https://avatars-next.observableusercontent.com/d79b33a118ce1020c0e06624b184ca9b9cb946abb28e5267abf302572e5ea8a4","tier":null}],"members":[{"type":"team","id":"424d804b800ec5e6","login":"linabenmabrouk","name":"Lina BEN MABROUK","avatar_url":"https://avatars-next.observableusercontent.com/d79b33a118ce1020c0e06624b184ca9b9cb946abb28e5267abf302572e5ea8a4","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 pas d'implantation.\nLa Guadeloupe, la Guyane, la Martinique et la Réunion n'ont pas de contour sur la carte.\n104 implantations se trouve hors de la carte.\n\nCe que je décide d'en faire —\nGarde la carte comme elle est et ne pas mettre les données des populations sans contour.\n\nCe que j'écrirai sous ma carte —\nCarte de la France métropolitaine.\nLes implantations situées hors métropole ne sont pas représentées.\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.5 }) ]\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\", {\n label: \"Pour 100 000 hab.\",\n titre: \"2 · Rapporté à la population\",\n sousTitre: \"Où la densité d'implantations est-elle la plus forte ?\"\n })}\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 —\nMontre la concentration de l'implantion, elle est plus concentré à Paris.\n\nCe que dit la carte 2 —\nMontre la densité d'implantations par habitant, elle est plus concentrée dans la Lozère et en Corse.\n\nLe classement qui change le plus —\nLe Nord, il est 2e en effectifs bruts grâce à sa forte population, mais il chute autour de la 60e place une fois ramené au nombre d'habitants.\n\nLaquelle est fausse, et pourquoi —\nNon les cartes ne sont pas fausses mais la première peut être trompeuse car elle montre seulement où les gens se situent au lieu de montrer quels départements sont les mieux équipés.\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":"Paris","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 marks: [\n Plot.barX(\n parDep.sort((a, b) => d3.descending(a.n, b.n)).slice(0, 12),\n { x: \"n\", y: \"nom\", sort: { y: \"-x\" } }\n )\n ]\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 —\nParis est le département avec le plus d'implantation, mais c'est impossible à voir sur la carte.\n\nPourquoi —\nLa surface de Paris est trop petite par rapport au autre et il y seulement sa couleur pour le faire ressortir.\n\nLa question à laquelle une carte répond mal —\n\"Quel est le premier département?\" ou \"Quel est le classement exact ?\"\n\nEt l'infobulle : est-ce qu'elle règle le problème ? (à remplir après la section suivante) —\nNon pas vraiment, il faut survoler les zones on n'est pas guider.\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 » —\nElle donne des couleurs sans ordre logique ce qui empêche de voir quelle valeur est plus forte ou plus faible.\n\nPourquoi « RdBu » est un contresens ici —\nC'est une palette faite pour comparer deux opposés par rapport à une moyenne. Comme nos valeurs vont juste de zéro au maximum, opposer le rouge et le bleu n'a pas de sens.\n\nLa palette que je garde, et pourquoi —\nJe garde \"blues\", parce que plus la couleur est foncée, plus la valeur est grande. C'est le plus simple à comprendre.\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 » —\nIl mets le même nombre de départements dans chaque couleur, ce qui fonce artificiellement la carte et rend la légende illisible avec des décimales à long.\n\nCe que change « linear » —\nIl applique un dégradé continu sans tranches nettes, ce qui rend les petites différences de teinte difficiles à comparer visuellement.\n\nLe découpage que je garde, et pourquoi —\nJe garde \"quantize\" car il découpe l'intervalle en de façon régulières, ce qui donne une légende propre et facile à lire.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"// Ici on repasse à UNE carte, en grand : c'est celle qu'on publie.\n// Les trois textes sont à écrire — remplace les « … ».\ncarteFinie = Plot.plot({\n width: 520,\n title: \"Densité d'implantations par département\",\n subtitle: \"Rapporté à la population, l'équipement est plus élevé dans les départements peu peuplés comme la Lozère ou la Corse.\",\n caption: \"Source : Données internes, France métropolitaine, 2026.\",\n projection: { type: \"mercator\", domain: departements },\n color: {\n type: \"quantize\",\n n: 5,\n scheme: \"blues\",\n legend: true,\n label: \"Pour 100 000 habitants\"\n },\n marks: [\n Plot.geo(departements, {\n fill: (f) =>\n new Map(parDep.map((d) => [d.code, d.pour100k])).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 —\nCarte choroplèthe de la France métropolitaine par département.\n\n2. Ce qui est mesuré —\nLa densité d'implantations pour 100 000 habitants.\n\n3. La conclusion —\nLes zones rurale ou peu peuplées affichent un taux d'équipement par habitant plus élevé que les grands centres urbains.\n\n4. Les valeurs remarquables —\nLa Lozère et la Corse-du-Sud atteignent les valeurs les plus fortes (plus de 10 pour 100k hab.), tandis que la majorité des départements restent sous le seuil de 4.\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 = `\n1. Faut-il montrer un volume brut ou une valeur rapportée à la population ?\n2. Quel type de représentation (carte, graphique en barres) répond le mieux à la question posée ?\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 —\nGemini. Prompts : aide pour la syntaxe Plot.plot, simplification du code du bar chart et reformulation des analyses de cartes.\n\n2. Ce que ça m'a apporté —\nUn gain de temps sur la syntaxe et des pistes de réflexion claires pour analyser les palettes et les découpages en classes.\n\n3. Ce que j'ai dû corriger —\nLes propositions de code.\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"