2a:null 2b:["$","title",null,{"children":"TP 4 — Cartographier, et finir | Enzo HILLAIRET | 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":"f38a65e54e57fb2ef37b2c11fe310b6b08aa249366a2ba1c1a61e765618e5dd8eb6eacf4a8517a2cba9ce4a093643c7e5a522b80562fe289d0557d91d8b26b86","href":"https://static.observableusercontent.com/files/f38a65e54e57fb2ef37b2c11fe310b6b08aa249366a2ba1c1a61e765618e5dd8eb6eacf4a8517a2cba9ce4a093643c7e5a522b80562fe289d0557d91d8b26b86","name":"DS_RP_POPULATION_dep2.csv","type":"text/csv","lastModified":1786344618971.514,"size":7807},{"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":"c8cd8cccebc08ff96b8c452cad3d11c712861da3b1538599d8ec57c62f6f5390165a3afea47dc115688da7f8bf43773f84b8de188826920dc53bac6f38dac473","href":"https://static.observableusercontent.com/files/c8cd8cccebc08ff96b8c452cad3d11c712861da3b1538599d8ec57c62f6f5390165a3afea47dc115688da7f8bf43773f84b8de188826920dc53bac6f38dac473","name":"image.png","type":"image/png","lastModified":1790088735458,"size":326657}] 2e:{"id":"06be8244a5d65e0d","slug":"tp-4-cartographier-et-finir","title":"TP 4 — Cartographier, et finir","thumbnail":"fa4ed0d110957aa86082ee612998cd9e19d4e92cf03a40dbd4f24c4fd868d48d","access_level":"public","create_time":"$D2026-09-22T14:14:14.967Z","update_time":"$D2026-09-23T10:23:46.044Z","view_time":null,"first_public_time":"$D2026-09-22T14:14:22.384Z","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":"6625f68089bacb45","login":"skibidizo","name":"Enzo HILLAIRET","avatar_url":"https://avatars-next.observableusercontent.com/1bd0020d2c03b90d170c7dcfa3b09fd0669d8bcb29c7c966e13f1c383da70597","tier":"starter_2024"},"version":351,"publish_version":351,"role":null,"authored":false,"authors":[{"type":"individual","id":"94db1c5c30bb8c90","login":"skibidizo","name":"Enzo HILLAIRET","avatar_url":"https://avatars-next.observableusercontent.com/1bd0020d2c03b90d170c7dcfa3b09fd0669d8bcb29c7c966e13f1c383da70597","tier":null}],"members":[{"type":"team","id":"6625f68089bacb45","login":"skibidizo","name":"Enzo HILLAIRET","avatar_url":"https://avatars-next.observableusercontent.com/1bd0020d2c03b90d170c7dcfa3b09fd0669d8bcb29c7c966e13f1c383da70597","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 — La jointure n'est pas parfaite : il y a des pertes. Certaines données de population n'ont pas de département correspondant sur la carte, et plusieurs implantations sont exclues.\n\nCe que je décide d'en faire — Je décide de ne pas modifier le fichier source pour forcer la correspondance, mais j'accepte ces marges d'erreur (souvent liées aux DOM-TOM ou à l'orthographe).\n\nCe que j'écrirai sous ma carte — Note : Un certain nombre d'implantations n'apparaissent pas sur cette carte en raison de données de localisation manquantes ou non reconnues.\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":"carte1 = Plot.plot({\n width: 300,\n projection: { type: \"mercator\", domain: departements },\n color: {\n type: \"quantize\",\n n: 5,\n scheme: \"blues\",\n legend: true,\n label: \"Effectifs bruts (n)\"\n },\n marks: [\n Plot.geo(contours, {\n fill: \"n\",\n stroke: \"white\",\n strokeWidth: 0.5\n })\n ]\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: \"Implantations pour 100 000 hab.\",\n titre: \"2 · Rapporté à la population\",\n sousTitre: \"Où y a-t-il le plus d'établissements par habitant ?\"\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 — Elle affiche le volume brut d'implantations. Elle calque en réalité la carte de la population française dont les départements les plus peuplés sont mécaniquement les plus foncés.\n\nCe que dit la carte 2 — Elle montre la densité réelle de l'offre par habitant. Elle révèle la véritable stratégie géographique de l'enseigne ou la saturation d'un territoire.\n\nLe classement qui change le plus — Le département du Nord. Très foncé sur la carte 1 grâce à sa forte population, il dégringole dans le classement une fois rapporté au nombre d'habitants.\n\nLaquelle est fausse, et pourquoi — La carte 1 est \"fausse\" d'un point de vue cartographique. La règle d'or en visualisation de données est de ne jamais faire de carte choroplèthe avec des valeurs absolues. Les grands territoires très peuplés accaparent le regard et faussent complètement l'interprétation.`","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: 110,\n marks: [\n Plot.barX(parDep, {\n x: \"n\",\n y: \"nom\",\n sort: { y: \"x\", reverse: true, limit: 12 }\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 — Trouver précisément qui est le premier, ou établir un Top 5 fiable juste en regardant les couleurs.\n\nPourquoi — Notre œil est naturellement biaisé par la surface, on remarque plus facilement un grand département comme la Gironde, même s'il est un peu moins foncé. De plus, il est impossible de différencier à l'œil nu deux nuances de bleu très proches.\n\nLa question à laquelle une carte répond mal — \"Qui est le premier ?\" ou \"Quel est le classement exact ?\". Dès qu'on veut classer, on utilise un graphique en barres.\n\nEt l'infobulle : est-ce qu'elle règle le problème ? (à remplir après la section suivante) — Non. L'infobulle oblige le lecteur à jouer aux devinettes en survolant chaque département un par un pour mémoriser les chiffres. C'est inefficace.`","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 title: \"Densité du réseau d'implantations\",\n subtitle: \"Rapporté à la population, un département rural comme la Lozère est nettement mieux doté que le Nord.\",\n caption: \"Périmètre : France métropolitaine. Note : certains territoires sont exclus de la jointure.\",\n ariaDescription: \"Carte choroplèthe de la France. Mesure : le nombre d'implantations pour 100 000 habitants par département. Conclusion : le centre de la France et les départements ruraux affichent la plus forte densité par habitant, à l'inverse des zones très peuplées. Valeurs remarquables : la Lozère est en tête, le Nord s'effondre dans le classement.\",\n projection: { type: \"mercator\", domain: departements },\n color: {\n type: classes,\n n: 5,\n scheme: palette,\n legend: true,\n label: \"Pour 100 000 habitants\"\n },\n marks: [\n Plot.geo(contours, {\n fill: \"pour100k\",\n stroke: \"white\",\n 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 » — Elle attribue des couleurs sans ordre logique (rose, vert, orange) aux valeurs. L'œil ne sait pas intuitivement si le rose représente une densité plus forte ou plus faible que le vert.\n\nPourquoi « RdBu » est un contresens ici — C'est une palette, conçue pour montrer du positif et du négatif de part et d'autre de zéro. Nos données de densité sont uniquement positives, donc utiliser deux couleurs opposées fausse la lecture.\n\nLa palette que je garde, et pourquoi — \"blues\". C'est une palette séquentielle, plus la valeur est élevée, plus la couleur s'assombrit. Le cerveau comprend immédiatement que \"plus foncé = plus dense\".\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 » — Ce découpage force un nombre égal de départements dans chaque catégorie de couleur. Cela garantit que toutes les couleurs de la légende seront visibles sur la carte, mettant en valeur les contrastes régionaux même si l'écart chiffré entre deux départements est faible.\n\nCe que change « linear » — Ce découpage crée un dégradé continu sans aucun palier. La légende devient une barre lisse. C'est mathématiquement très fidèle à la donnée, mais l'œil humain a beaucoup de mal à comparer deux départements à l'autre bout de la carte car les nuances sont trop subtiles.\n\nLe découpage que je garde, et pourquoi — \"quantize\". C'est un bon compromis : il crée des tranches chiffrées régulières qui rendent la légende facile à lire, tout en gardant des couleurs bien distinctes sur la carte pour identifier rapidement les grandes tendances.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"carteFinie = Plot.plot({\n width: 520,\n title: \"Densité du réseau d'implantations\",\n subtitle: \"Rapporté à la population, un département rural comme la Lozère est nettement mieux doté que le Nord.\",\n caption: \"Périmètre : France métropolitaine. Note : certains territoires sont exclus de la jointure.\",\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 — Carte choroplèthe de la France métropolitaine.\n\n2. Ce qui est mesuré — Le nombre d'implantations pour 100 000 habitants par département.\n\n3. La conclusion — Les départements ruraux, notamment dans le centre et le sud, affichent la plus forte densité par habitant, contrairement aux zones très urbanisées.\n\n4. Les valeurs remarquables — La Lozère est en tête de classement, tandis que le département du Nord s'effondre au classement relatif.\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 = `1. Mes données sont-elles bien relatives (rapportées à la population) et non absolues ?\n2. Mon but est-il vraiment de montrer une dynamique géographique, ou bien un classement exact (qui nécessiterait plutôt des barres) ?\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 — J'ai utilisé Gemini en lui fournissant des captures d'écran de mon notebook Observable. Je lui ai posé des questions pour comprendre mes erreurs de code et je lui ai demandé de m'aider à formuler mes réponses plus simplement.\n\n2. Ce que ça m'a apporté — Cela m'a vraiment permis de comprendre le code et de rendre mes textes plus clairs.\n\n3. Ce que j'ai dû corriger — J'ai dû la forcer à raccourcir ses réponses, qui étaient souvent trop longues. J'ai aussi dû la recadrer pour qu'elle simplifie ses explications techniques quand elles devenaient trop complexes.\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"