3e:null 3f:["$","title",null,{"children":"TP 4 — Cartographier, et finir | Menigoz-Ewan | Observable"}] 45: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).46: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.47: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.48:T522,journalIA = ` 1. Quels outils / quels prompts — J'ai utilisé Gemini pour m'aider à comprendre la syntaxe des cartes géographiques et pour m'aiguiller sur l'analyse des biais visuels. Exemples de prompts : Comment je peux utiliser la fonction préparée par le prof pour afficher ma deuxième carte avec la densité de population ? Explique moi simplement la différence entre le découpage quantize et quantile pour les couleurs de ma carte finale. Aide moi à formuler mes notes pour expliquer pourquoi Paris est invisible sur la premiere carte à cause de sa petite surface. 2. Ce que ça m'a apporté — L'IA m'a permis de bien saisir la mécanique de la jointure des données dans les propriétés des contours départementaux. J'ai aussi beaucoup mieux compris le piège des cartes choroplethes avec l'effet de surface, et l'importance de choisir une bonne palette de couleurs pour ne pas fausser le message. 3. Ce que j'ai dû corriger — J'ai du adapter les réponses de l'IA car elle avait tendance à vouloir m'écrire tout le code de la page alors que je voulais seulement comprendre quel paramètre modifier. J'ai aussi retravaillé ses textes de justification pour garder mon propre style d'écriture et m'assurer qu il n y ait aucun caractère de ponctuation qui fasse planter mes cellules. `49:[{"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":"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}] 43:{"id":"9f810aaf98f8a897","slug":"tp-4-cartographier-et-finir","title":"TP 4 — Cartographier, et finir","thumbnail":"fa4ed0d110957aa86082ee612998cd9e19d4e92cf03a40dbd4f24c4fd868d48d","access_level":"public","create_time":"$D2026-09-21T12:10:49.144Z","update_time":"$D2026-09-23T20:57:16.755Z","view_time":null,"first_public_time":"$D2026-09-21T13:24:59.819Z","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":"e52b4682809561a3","login":"menigoz-ewan","name":"Menigoz-Ewan","avatar_url":"https://avatars-next.observableusercontent.com/1aab2bbbf46a2e6eccfb01bb287b5cea5d27b85a93e5440682619c1ce0d7d10e","tier":"starter_2024","bio":""},"version":347,"publish_version":347,"role":null,"authored":false,"authors":[{"type":"individual","id":"f1842c0dcd2973e5","login":"menigoz-ewan","name":"Menigoz-Ewan","avatar_url":"https://avatars-next.observableusercontent.com/1aab2bbbf46a2e6eccfb01bb287b5cea5d27b85a93e5440682619c1ce0d7d10e","tier":null,"bio":""}],"members":[{"type":"team","id":"e52b4682809561a3","login":"menigoz-ewan","name":"Menigoz-Ewan","avatar_url":"https://avatars-next.observableusercontent.com/1aab2bbbf46a2e6eccfb01bb287b5cea5d27b85a93e5440682619c1ce0d7d10e","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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"rJointure = `\nCe que le contrôle révèle — Le contrôle m'indique qu'un département de la carte n'a aucun établissement. Il montre aussi que 4 lignes de mon fichier de population ne trouvent pas de place sur la carte et surtout que 104 établissements de mon fichier principal n'apparaitront pas car ils sont situés hors des contours géographiques disponibles.\n\nCe que je décide d'en faire — Je décide de ne rien changer aux données et d'assumer ces pertes. Il est normal de perdre les établissements situés en outre mer ou a l'étranger si mon fichier géometrique ne contient que la France métropolitaine. Je dois en revanche être transparent.\n\nCe que j'écrirai sous ma carte — J'ajouterai une petite note pour prévenir le lecteur du type : 104 implantations situées en outre mer ou à l'étranger ne sont pas affichées sur cette carte de la France métropolitaine.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$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: \"Établissements\" },\n marks: [\n Plot.geo(contours, { fill: \"n\", stroke: \"white\", strokeWidth: 0.5 })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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 - Par rapport à la population\",\n sousTitre: \"Où la densité d'établissements est-elle la plus forte ?\"\n })}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"rDeuxCartes = `\nCe que dit la carte 1 — Elle affiche le nombre total d'écoles par département. C'est utile pour un étudiant qui cherche les plus grandes écoles universitaires ou pour un agent immobilier.\n\nCe que dit la carte 2 — Elle affiche la densité d'écoles pour 100 000 habitants. C'est utile pour le ministère de l'éducation ou un élu local pour vérifier si un territoire est bien équipé par rapport au nombre de gens qui y vivent.\n\nLe classement qui change le plus — Le département du Nord est dans les tout premiers sur la premiere carte car il a beaucoup d'écoles. Mais il chute complètement sur la seconde carte car sa population est gigantesque ce qui fait baisser son ratio par habitant.\n\nLaquelle est fausse, et pourquoi — Aucune des deux n'est fausse. Les deux cartes disent la vérité mais elles répondent simplement à des questions différentes. La première montre un volume et la seconde montre une proportion.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$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: 150,\n marks: [\n Plot.barX(parDep, { x: \"n\", y: \"nom\", sort: { y: \"-x\", limit: 12 } }),\n Plot.ruleX([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"rContreExemple = `\nCe que je n'ai pas réussi à lire sur la carte — Avant de prendre le temps de bien observer en détails la carte1, je n'ai pas du tout remarqué que Paris était le premier département. Mon oeil a été attiré par les zones très larges comme la Gironde ou le Nord.\n\nPourquoi — C'est à cause de la surface. Sur une carte le fait qu'un département soit physiquement très grand lui donne de la facilité pour le remarquer. Paris est tellement petit qu'on loupe totalement sa couleur sombre.\n\nLa question à laquelle une carte répond mal — Une carte est mauvaise pour faire un classement exact ou trouver le gagnant d'une liste. Pour ça le diagramme en barres reste le meilleur.\n\nEt l'infobulle : est-ce qu'elle règle le problème ? (à remplir après la section suivante) —\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":63,"value":"$47","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":202,"value":"rPalette = `\nCe que fait « rainbow » — Elle applique plein de couleurs différentes sans ordre logique. C'est impossible de savoir visuellement si le rouge représente un chiffre plus grand ou plus petit que le vert.\n\nPourquoi « RdBu » est un contresens ici — C'est une palette faite pour montrer des valeurs négatives et positives autour d'un point neutre. Ici nous avons seulement des densités qui vont de zéro a beaucoup donc ça ne colle pas.\n\nLa palette que je garde, et pourquoi — Je garde blues car le dégradé du plus clair au plus foncé est tres intuitif pour le cerveau quand on veut lire une quantité qui augmente.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"rClasses = `\nCe que change « quantile » — Ce réglage fait des groupes avec un nombre égal de départements dedans. Ca permet d'avoir une carte beaucoup plus nuancée car les chiffres extrêmes de Paris n'écrasent plus tout le reste de la carte.\n\nCe que change « linear » — Ca crée un dégradé de couleur en continu sans faire de petits groupes ou de catégories. C'est joli mais c'est tres difficile pour l'oeil de comparer les nuances avec précision.\n\nLe découpage que je garde, et pourquoi — Je garde quantile car cela permet de bien voir les différences et les détails entre les territoires de province même face à des cas hors normes.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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é des établissements d'enseignement supérieur public\",\n subtitle: \"La Lozère et Paris sont les départements les mieux dotés par rapport à leur population.\",\n caption: \"Source : MESR 2017 et INSEE 2021 - France métropolitaine\",\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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"rAltText = `\n1. La nature — Il s'agit d'une carte choroplethe de la France métropolitaine.\n\n2. Ce qui est mesuré — Elle représente la densité des établissements d'enseignement supérieur pour 100 000 habitants pour chaque département.\n\n3. La conclusion — Les territoires les mieux dotés par rapport à leur population se détachent du reste du pays.\n\n4. Les valeurs remarquables — La Lozère et Paris sont les deux départements qui ressortent le plus avec les densités les plus fortes.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"synthese = `Première question : est-ce que je dois afficher des volumes bruts ou bien un ratio par rapport à la population pour que ma comparaison soit juste ?\n\nDeuxième question : est-ce qu une carte est vraiment le meilleur outil ou est ce que la grande taille de certains territoires risque de tromper l'oeil du lecteur par rapport à un simple graphique en barres ?\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":178,"value":"$48","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W49","stdlib":"2"}} 44:"$43:body"