2a:null 2b:["$","title",null,{"children":"TP 4 — Cartographier, et finir | Aglae | Observable"}] 30:T483,## D'où viennent ces trois fichiers | Fichier | Source | Licence | |---|---|---| | implantations | MESR — *Implantations des établissements d'enseignement supérieur publics*, [data.gouv.fr](https://www.data.gouv.fr/datasets/implantations-des-etablissements-denseignement-superieur-publics), **arrêté en 2017** | Licence Ouverte | | population | INSEE — recensement de la population, millésime **2021** | — | | contours | contours des départements de France métropolitaine | — | ⚠️ **Trois fichiers, trois millésimes** : 2017 pour les implantations, 2021 pour la population. Tu vas les diviser l'un par l'autre — donc calculer un taux **entre deux dates différentes**. Ça ne rend pas le calcul faux, mais ça se déclare : c'est exactement ce que la `caption` de ta carte doit dire. Le modèle : > Source : [MESR (implantations, 2017)](https://www.data.gouv.fr/datasets/implantations-des-etablissements-denseignement-superieur-publics) · [INSEE (population, 2021)](https://catalogue-donnees.insee.fr/en/catalogue/recherche/DS_RP_POPULATION_PRINC) · > [France métropolitaine](https://github.com/gregoiredavid/france-geojson).31:T4e6, **À toi** ## Écris la carte 1 **En effectifs bruts** : le nombre d'implantations par département. Tu as tout ce qu'il faut — la section 4 t'a donné la projection et la marque `Plot.geo`, le TP 3 t'a donné les canaux et les échelles de couleur. Le cahier des charges, et rien de plus : | | | |---|---| | les données | `contours` | | la marque | `Plot.geo`, avec un filet blanc entre les départements (`stroke`, `strokeWidth`) | | le canal | `fill` porte le champ `"n"` | | l'échelle | `color` en **5 classes** — `type: "quantize"`, `n: 5`, `scheme: "blues"` — avec `legend: true` **et** un `label` | | la projection | Mercator, `domain: departements` | | la taille | `width: 300` : les deux cartes devront tenir côte à côte | ⚠️ Une échelle de couleur sans `label`, c'est une carte muette : on voit des bleus, on ne sait pas de quoi ils parlent.32:T605,## Ce qui sépare une sortie d'outil d'une publication **À toi** Reprends ta **carte 2** et applique les quatre transferts du CM4. **1 · La palette.** Tu as une palette séquentielle (`blues`). Essaie `"rainbow"`, puis `"RdBu"`. Que se passe-t-il ? Pourquoi une palette divergente est-elle un contresens ici ? **2 · Les classes.** Remplace `type: "quantize"` par `"quantile"`, puis par `"linear"`. La carte change beaucoup. Choisis, et sache dire pourquoi. **3 · Le texte.** Plot te donne trois emplacements — c'est exactement la hiérarchie du CM4 : ```js Plot.plot({ title: "…", // descriptif : de quoi parle le graphique subtitle: "…", // PORTEUR : ce que tu as compris caption: "…", // source, date, périmètre … }) ``` Le sous-titre est le seul endroit où tu as le droit d'affirmer. « Implantations pour 100 000 habitants » décrit un fichier. « La Lozère est mieux dotée que le Nord, rapportée à sa population » décrit une découverte — et t'engage. **4 · L'alternative textuelle.** Quatre temps : la nature · ce qui est mesuré · la conclusion · les valeurs remarquables.33:[{"id":"7fd416c9a9000d36ae5f1f249384737092f455ba58a2e39b4d218afac309bf20ab439b7631274268ffa125054044344e14d6f2d727b52ce7d61858d1b256db79","href":"https://static.observableusercontent.com/files/7fd416c9a9000d36ae5f1f249384737092f455ba58a2e39b4d218afac309bf20ab439b7631274268ffa125054044344e14d6f2d727b52ce7d61858d1b256db79","name":"departements.geojson","type":"application/geo+json","lastModified":1786344620024.35,"size":3427910},{"id":"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":"2f0db2fdc287477a","slug":"tp-4-cartographier-et-finir","title":"TP 4 — Cartographier, et finir","thumbnail":"fa4ed0d110957aa86082ee612998cd9e19d4e92cf03a40dbd4f24c4fd868d48d","access_level":"public","create_time":"$D2026-09-22T12:06:24.592Z","update_time":"$D2026-09-22T13:23:16.905Z","view_time":null,"first_public_time":"$D2026-09-29T11:41:13.931Z","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":"5ebe36d4b5c85b4c","login":"aglae","name":"Aglae","avatar_url":"https://avatars-next.observableusercontent.com/4d47687589b039436d9daa6da02e7c9e63dd1dbbed899b34723770f7a094ffcc","tier":"starter_2024"},"version":393,"publish_version":393,"role":null,"authored":false,"authors":[{"type":"individual","id":"785b8a44f7dab903","login":"aglae","name":"Aglae","avatar_url":"https://avatars-next.observableusercontent.com/4d47687589b039436d9daa6da02e7c9e63dd1dbbed899b34723770f7a094ffcc","tier":null}],"members":[{"type":"team","id":"5ebe36d4b5c85b4c","login":"aglae","name":"Aglae","avatar_url":"https://avatars-next.observableusercontent.com/4d47687589b039436d9daa6da02e7c9e63dd1dbbed899b34723770f7a094ffcc","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","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","output":"$undefined","database":"$undefined"},{"id":7,"value":"departements = FileAttachment(\"departements.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","output":"$undefined","database":"$undefined"},{"id":222,"value":"Inputs.table(population)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$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","output":"$undefined","database":"$undefined"},{"id":223,"value":"Inputs.table(implantations)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"$30","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$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","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","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","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","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","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","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","output":"","database":"$undefined"},{"id":29,"value":"rJointure = `\nCe que le contrôle révèle —\nLe contrôle révèle que l'Ardèche n'a aucune implantation rencensée. Egalement, il révèle le manque de contour des DROM (car hors de la carte). Enfin, il révèle que 104 implantations, sont situés dans les DROM et donc sont hors de la carte de la France métropolitaine.\n\nCe que je décide d'en faire —\nJe décide de préciser que si nbParDep retourne undefined il faudra retourner 0 car il s'agira de l'Ardèche. De plus, j'exclus les 104 implantations hors métropole de mes calculs.\n\nCe que j'écrirai sous ma carte —\nSous ma carte, j'écrirai donc : \"Source : MESR (implantations, 2017) · INSEE (population, 2021) · France métropolitaine uniquement — DROM et implantations hors territoire français (104 sur 2 507) non représentés, faute de fond de carte les couvrant.\"\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","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","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","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","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","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","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","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","output":"$undefined","database":"$undefined"},{"id":129,"value":"aide(\"raccourcis\", \"?? et le ternaire\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","output":"$undefined","database":"$undefined"},{"id":210,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"// À toi — la carte des effectifs bruts\ncarte1 = Plot.plot({\n projection: { type: \"mercator\", domain: departements },\n color: {\n type: \"quantize\",\n n: 5,\n scheme: \"blues\",\n legend: true,\n label: \"Implantations\"\n },\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","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$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: \"linear\", n: 5, scheme: \"purples\",\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","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","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","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ée à la population\",\n sousTitre: \"Où l'offre est-elle la plus dense par habitant ?\"\n })}\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":220,"value":"rangAbsolu = rang(d => d.n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","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","output":"","database":"$undefined"},{"id":50,"value":"rDeuxCartes = `\nCe que dit la carte 1 —\nLa carte 1 montre la densité des implantations dans chaque département soit, dans quel.s département.s est-ce qu'on trouve le plus d'implantations.\n\nCe que dit la carte 2 —\nLa carte 2 montre la densité des offres par département soit, dans quel.s département.s est-que l'offre est la plus importante.\n\nLe classement qui change le plus —\nDans la 1ère carte, le Nord se trouvre en 2e postion tandis qu'il est bien plus bas sur la 2e.\n\nLaquelle est fausse, et pourquoi —\nEn soit, aucune n'est fausse. Le problème est que les cartes sont en Mercator, c'est à dire qu'elles sont légèrement déformées. Ainsi, la surface perçue n'est pas à l'échelle de la réalité, ce qui crée une erreur de perception.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","output":"","database":"$undefined"},{"id":58,"value":"// À toi — les douze premiers départements, en barres\nbarres = Plot.plot({\n marginLeft: 100,\n x: {label: \"Implantations\"},\n y: {label: null},\n marks: [\n Plot.barX(\n parDep.toSorted((a, b) => b.n - a.n).slice(0, 12),\n {x: \"n\", y: \"nom\", sort: {y: \"-x\"}, fill: \"steelblue\"}\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","output":"","database":"$undefined"},{"id":60,"value":"rContreExemple = `\nCe que je n'ai pas réussi à lire sur la carte —\nJe n'ai pas réussi à voir Paris sur la carte jusqu'à ce qu'on me le fasse remarquer.\n\nPourquoi —\nLe département est tellement petit que j'ai presque cru qu'il s'agissait d'une poussière sur mon écran.\n\nLa question à laquelle une carte répond mal —\nDans quel département est-ce que l'on trouve le plus d'établissements ?\nElle répond mal à cette question car on n'arrive pas à voir le département. De plus, il est difficile de dicerner une valeur maximum lorsque l'on utilise les variances de couleurs comme indicateur car si les valeurs sont proches on ne peut pas les classer (ce n'est pas le cas ici).\n\nEt l'infobulle : est-ce qu'elle règle le problème ? (à remplir après la section suivante) —\nElle règle le problème partiellement. En effet, le département reste toujours peu visible. Néanmoins, l'info bulle permet de comparer des valeurs réelles et donc d'établir un vrai classement.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","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","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","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","output":"","database":"$undefined"},{"id":63,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"","database":"$undefined"},{"id":159,"value":"aide(\"texteAutour\", \"title, subtitle, caption\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","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","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","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","output":"","database":"$undefined"},{"id":202,"value":"rPalette = `\nCe que fait « rainbow » —\nrainbow joue sur les différentes couleurs plutôt que sur leur intensité. Ainsi, plutôt que de commencer avec du bleu clair et de finir avec du bleu vif, on va commencer avec du violet et finir avec du rouge en passant par le bleu, le vert,...\n\nPourquoi « RdBu » est un contresens ici —\nRdBu est un contresens car il intensifie les extrémités. De plus on va associer le rouge aux valeurs élevées et le bleu aux valeurs basses donc BuRd serait plus approprié.\n\nLa palette que je garde, et pourquoi —\nla palette que je garde est purples car elle est plus jolie que blues et avec le dégradé, elle permet d'identifier au premier coup d'oeil les valeurs plus élevées et les plus basses.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"rClasses = `\nCe que change « quantile » —\n\nCe que change « linear » —\n\nLe découpage que je garde, et pourquoi —\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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: \"…\",\n subtitle: \"…\",\n caption: \"…\",\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","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","output":"","database":"$undefined"},{"id":68,"value":"rAltText = `\n1. La nature —\n\n2. Ce qui est mesuré —\n\n3. La conclusion —\n\n4. Les valeurs remarquables —\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","output":"","database":"$undefined"},{"id":170,"value":"synthese = `\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$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","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","output":"","database":"$undefined"},{"id":178,"value":"journalIA = `\n1. Quels outils / quels prompts —\n\n2. Ce que ça m'a apporté —\n\n3. Ce que j'ai dû corriger —\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"# Vérification et rendu","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$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","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","output":"$undefined","database":"$undefined"},{"id":187,"value":"# Synthèse des réponses","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$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","output":"$undefined","database":"$undefined"},{"id":116,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$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","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2"}} 2f:"$2e:body"