2f:[{"id":"0c0853c2ce3b08cbb1de6a9e84308b352fd9639a57c1f2bdbfa3b9ab740f162da85191c23712c302fc117794e827bf6c4cebc2411ce271ea77b0a12d785ad56a","href":"https://static.observableusercontent.com/files/0c0853c2ce3b08cbb1de6a9e84308b352fd9639a57c1f2bdbfa3b9ab740f162da85191c23712c302fc117794e827bf6c4cebc2411ce271ea77b0a12d785ad56a","name":"attach.png","type":"image/png","lastModified":1778575855622.838,"size":1058},{"id":"5861df15ada1ab52985568c6a76a39e0688f332c50e95e2ae75e903898c2cfe11873a91aed4beb54f85810c10b7098f0009a23ed69fe829d83fc9cf9c173a649","href":"https://static.observableusercontent.com/files/5861df15ada1ab52985568c6a76a39e0688f332c50e95e2ae75e903898c2cfe11873a91aed4beb54f85810c10b7098f0009a23ed69fe829d83fc9cf9c173a649","name":"fork.png","type":"image/png","lastModified":1778575855622.838,"size":27660},{"id":"26713a8c21f5b75a2e6942385e691cb293e0177e35107749a99dfab56659f2be5424be38d377e1426715086d920206b553587373b8e7390ded81a09be27c76c1","href":"https://static.observableusercontent.com/files/26713a8c21f5b75a2e6942385e691cb293e0177e35107749a99dfab56659f2be5424be38d377e1426715086d920206b553587373b8e7390ded81a09be27c76c1","name":"worldbank.csv","type":"text/csv","lastModified":1778575855622.838,"size":11012},{"id":"890df102d43820c396d49d31a6b09e0d868ff9a9f39d04f3d925e897785eeb9d6b193b8d693a405de0cb8ae9b98f8559f532eda9b4919201976d91b31820639f","href":"https://static.observableusercontent.com/files/890df102d43820c396d49d31a6b09e0d868ff9a9f39d04f3d925e897785eeb9d6b193b8d693a405de0cb8ae9b98f8559f532eda9b4919201976d91b31820639f","name":"world.json","type":"application/json","lastModified":1778575855622.838,"size":254454}] 2d:{"title":"Prise en main de la bibliothèque geoviz (correction)","cells":[{"id":0,"value":"# Prise en main de la bibliothèque `geoviz` (correction)","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"Rendez-vous sur ce notebook et cliquez sur le bouton **`fork`** pour le récupérer *chez vous*. ","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"fork = FileAttachment(\"fork.png\").image({ width: 400 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":324,"value":"Sélectionnez **Only you**","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"## Présentation des données","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"Voici quelques données sur les pays du Monde. Le fond de carte est issu du site web d'Eurostat et les données statistiques proviennent de la banque mondiale.","pinned":false,"hidden":false,"mode":"md"},{"id":327,"value":"Les données sont attachés au notebook comme des pièces jointes avec le bouton **épingle**","pinned":false,"hidden":false,"mode":"md"},{"id":328,"value":"attach = FileAttachment(\"attach.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":333,"value":"Elles sont ajoutées au notebook avec l'instruction **FileAttachment()**","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"pays = FileAttachment(\"world.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"banquemondiale = FileAttachment(\"worldbank.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"## Visualisation des données attributaires","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"- Affichez les données statistiques avec la fonction **`Inputs.table()`**.","pinned":false,"hidden":false,"mode":"md"},{"id":32,"value":"Inputs.table(banquemondiale)","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"- Repérez le fond de carte correspondant\n- Afficher la table attributaire du fond de carte avec la fonction `Inputs.table()`","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"*NB : on accède à la table attributaire en écrivant : `votreFondDeCarte.features.map((d) => d.properties)`*","pinned":false,"hidden":false,"mode":"md"},{"id":38,"value":"Inputs.table(pays.features.map((d) => d.properties))","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"Créez ci-dessous un cellule markdown et notez dans une belle phrase, le pays le plus riche et le pays le plus peuplé est...","pinned":false,"hidden":false,"mode":"md"},{"id":337,"value":"En 2020, le pays le plus riche sont les **USA** et le pays le plus peuplé est **Chine**.","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"## Visualisation les géométries","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"- Afficher le fond de carte avec Leaflet","pinned":false,"hidden":false,"mode":"md"},{"id":51,"value":"*Spoiler: Observable vous aide. Vous n'avez qu'à ecrire le nom de vos données et cliquer*","pinned":false,"hidden":false,"mode":"md"},{"id":243,"value":"data = pays","pinned":true,"hidden":false,"mode":"ojs"},{"id":635,"value":"{\n const container = yield htl.html`

`;\n const map = L.map(container);\n const layer = L.geoJSON(data).addTo(map);\n map.fitBounds(layer.getBounds(), {maxZoom: 9});\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"- Afficher le fond de carte avec Plot","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"data1 = pays","pinned":true,"hidden":false,"mode":"ojs"},{"id":638,"value":"Plot.plot({ projection: \"equal-earth\", marks: [Plot.geo(data1)] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"## Visualisation les géométries avec la bibliothèque `geoviz`","pinned":false,"hidden":false,"mode":"md"},{"id":617,"value":"👉 La documentation complète : https://riatelab.github.io/geoviz/ \n👉 Exemples live : https://observablehq.com/@neocartocnrs/geoviz","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"- Chargez la version **@1** de bibliothèque `geoviz` avec l'instruction **`require()`**","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"viz = require(\"geoviz@1\")","pinned":false,"hidden":true,"mode":"ojs"},{"id":572,"value":"- Afficher le fond de carte avec la fonction **view()**","pinned":false,"hidden":false,"mode":"md"},{"id":575,"value":"viz.view(pays)","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"- Afficher votre fond de carte avec le fonction **`path()`** et la syntaxe suivante :","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"*NB : Vous pouvez vous aider de ce [notebook](https://observablehq.com/@neocartocnrs/path-mark)*.","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"viz.path({ data: pays })","pinned":true,"hidden":false,"mode":"ojs"},{"id":103,"value":"- Afficher une seconde fois avec la projection `NaturalEarth1`.\n\n- *NB: Pour cela, vous avez besoin des fonctions `create()` et `render()`. Regardez dans ce [notebook](https://observablehq.com/@neocartocnrs/containers). Pensez à bien spécifier le domaine d'affichage ou la projection de la carte*","pinned":false,"hidden":false,"mode":"md"},{"id":113,"value":"{\n let svg = viz.create({ projection: \"EqualEarth\" });\n svg.path({ data: pays });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"## Jointure","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"- Avec la fonction **`tool.merge()`**, visualisez la compatibilité entre le fond de carte et les données attributaires. *NB : Pour faire la jointure, vous devez bien repérer quels sont les noms des champs contenant les identifiants. Vous pouvez vous aider de ce [notebook](https://observablehq.com/@neocartocnrs/handle-geometries)*.","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"merge = viz.tool.merge({\n geom: pays,\n geom_id: \"ISO3\",\n data: banquemondiale,\n data_id: \"id\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"- Evaluez la jointure à l'aide du diagnostic","pinned":false,"hidden":false,"mode":"md"},{"id":268,"value":"merge.diagnostic","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"- Puis, récupérez le nouveau fond de carte contenant les données attributaires. Nommez-le `world`.","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"world = merge.featureCollection","pinned":true,"hidden":false,"mode":"ojs"},{"id":89,"value":"## Faire une carte *habillée*","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"La bibliothèque `geoviz` permet de créer des cartes compexes en superposant de nombreux types de couches. Tous ces types sont décrits dans la [documentation](https://riatelab.github.io/geoviz/). N'hésitez pas à vous y référer en permanence. ","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"Dans une seule cellule, créez une carte du monde contenant : \n\n- Les océans (\"outline\")\n- des graticules (\"graticule\")\n- les pays en vert (\"path\")\n- un titre (\"header\")\n- une source (\"footer\")\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"Vous pouvez vous aider de ce [notebook](https://observablehq.com/@neocartocnrs/layout-marks).","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"{\n let svg = viz.create({\n projection: \"EqualEarth\"\n });\n svg.outline();\n svg.graticule({ stroke: \"white\", step: 30 });\n svg.path({ data: world, fill: \"white\", opacity: 0.3 });\n svg.header({ text: \"Hello World\" });\n svg.footer({ text: \"Nicolas Lamert, 2026\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":428,"value":"# Cartographie thématique","pinned":false,"hidden":false,"mode":"md"},{"id":430,"value":"Dans `geoviz`, pour créer des cartes thématiques, on utilisera la fonction **`plot()`**. Voir : https://riatelab.github.io/geoviz/global.html#plot","pinned":false,"hidden":false,"mode":"md"},{"id":232,"value":"## Créez une carte choroplèthe","pinned":false,"hidden":false,"mode":"md"},{"id":127,"value":"Pour créer une carte choroplèthe, on utilise la fonction `plot` avec l'attribut : **`type = \"choro\"`**. Voir un exemple dans ce [notebook](https://observablehq.com/@neocartocnrs/choropleth).","pinned":false,"hidden":false,"mode":"md"},{"id":442,"value":"Identifiez la seule donnée quantitative relative du jeu de données et réalisez une carte choroplèthe. ","pinned":false,"hidden":false,"mode":"md"},{"id":440,"value":"viz.choro({ data: world, var: \"gdppc\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":445,"value":"Vous pouvez changez la couleur avec l'attribut **`colors`** (par exemple: \"Reds\", \"Blues\"), la méthode de discrétisation avec l'attribut **`method`** ('quantile', 'q6', 'equal', 'jenks', 'msd', 'geometric', 'headtail', 'pretty', 'arithmetic' or 'nestedmeans')) et le nombre de classes avec **`nb`**. Voir tous les paramètres [ici](https://riatelab.github.io/geoviz/global.html#plot/choro)","pinned":false,"hidden":false,"mode":"md"},{"id":462,"value":"Réalisez une carte en bleu avec la méthode q6. ","pinned":false,"hidden":false,"mode":"md"},{"id":456,"value":"viz.choro({ data: world, var: \"gdppc\", method: \"q6\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":466,"value":"## Créez une carte qualitative","pinned":false,"hidden":false,"mode":"md"},{"id":468,"value":"Pour créer une carte qualitative, on utilise la fonction `plot` avec l'attribut : **`type = \"typo\"`**. Voir un exemple dans ce [notebook](https://observablehq.com/@neocartocnrs/typo).","pinned":false,"hidden":false,"mode":"md"},{"id":472,"value":"Identifiez la seule donnée qualitative nominale du jeu de données et réalisez une carte qualitative. ","pinned":false,"hidden":false,"mode":"md"},{"id":474,"value":"viz.typo({ data: world, var: \"region\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":477,"value":"Comme précédemment, vous pouvez changer les couleurs avec l'attribut colors. Tous les paramètres sont disponibles [ici](https://riatelab.github.io/geoviz/global.html#plot/typo) : ","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"## Créez une carte en proportion","pinned":false,"hidden":false,"mode":"md"},{"id":418,"value":"Pour créer une carte choroplèthe, il suffit d'utiliser la fonction **plot** avec le type **prop**. Voir un exemple dans ce [notebook](https://observablehq.com/@neocartocnrs/prop).","pinned":false,"hidden":false,"mode":"md"},{"id":299,"value":"En une ligne, réalisez une carte avec des cercles proportionnels sur la variable \"pop\".","pinned":false,"hidden":false,"mode":"md"},{"id":148,"value":"viz.prop({ data: world, var: \"pop\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"Maintenant, essayez de remplacer, avec l'attribut `symbol`, les cercles par des carrés ou des pointes.","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"viz.prop({ data: world, var: \"pop\", symbol: \"square\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"## Combinaisons","pinned":false,"hidden":false,"mode":"md"},{"id":487,"value":"Avec les types **`proptypo`** et **`propchoro`**, vous pouvez combiner deux variable dans un seul figuré. Voir ce [notebook](https://observablehq.com/@neocartocnrs/prop) ou la documentation : [proptypo](https://riatelab.github.io/geoviz/global.html#plot/proptypo) et [propchoro](https://riatelab.github.io/geoviz/global.html#plot/propchoro)","pinned":false,"hidden":false,"mode":"md"},{"id":496,"value":"Combinez population (**var1**) et PIB par habitant (**var2**).","pinned":false,"hidden":false,"mode":"md"},{"id":498,"value":"viz.propchoro({ data: world, var1: \"pop\", var2: \"gdppc\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":506,"value":"Combinez population (**var1**) et region (**var2**).","pinned":false,"hidden":false,"mode":"md"},{"id":508,"value":"viz.proptypo({ data: world, var1: \"pop\", var2: \"region\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"## Créez une carte thématique habillée","pinned":false,"hidden":false,"mode":"md"},{"id":302,"value":"POur créer une carte habillée avec plusieurs couches, il faut utiliser les fonctions **create()** et **render()**.","pinned":false,"hidden":false,"mode":"md"},{"id":511,"value":"Réalisez une carte de population habillée","pinned":false,"hidden":false,"mode":"md"},{"id":306,"value":"{\n let svg = viz.create({\n projection: d3.geoEqualEarth()\n });\n svg.outline();\n svg.graticule();\n svg.path({ datum: world, fill: \"white\", fillOpacity: 0.3 });\n svg.plot({ type: \"prop\", data: world, var: \"pop\", fill: \"red\" });\n svg.header({ text: \"Hello World\" });\n svg.footer({ text: \"By N. Lambert, 2026\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"## Rendez la carte interactive 🔥","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"- **Infobulles**\n\nAvec l’attribut **`tip = true`**, vous pouvez ajouter des infobulles sur n'importe quelle couche géométrique. Voir ce [notebook](https://observablehq.com/@neocartocnrs/tooltip)","pinned":false,"hidden":false,"mode":"md"},{"id":224,"value":"{\n let svg = viz.create({\n projection: d3.geoEqualEarth()\n });\n svg.outline();\n svg.graticule();\n svg.path({ datum: world, fill: \"white\", fillOpacity: 0.3 });\n svg.plot({ type: \"prop\", data: world, var: \"pop\", fill: \"red\", tip: true }); // ICI\n svg.header({ text: \"Hello World\" });\n svg.footer({ text: \"By N. Lambert, 2026\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":210,"value":"- **Pan et zoom**\n\nEn utilisant **`zoomable = true`** au niveau du container, vous pouvez rendre la carte zoomable. Voir ce [notebook](https://observablehq.com/@neocartocnrs/zooming)","pinned":false,"hidden":false,"mode":"md"},{"id":226,"value":"{\n let svg = viz.create({\n projection: d3.geoEqualEarth(),\n zoomable: true // ICI\n });\n svg.outline();\n svg.graticule();\n svg.path({ datum: world, fill: \"white\", fillOpacity: 0.3 });\n svg.plot({ type: \"prop\", data: world, var: \"pop\", fill: \"red\", tip: true });\n svg.header({ text: \"Hello World\" });\n svg.footer({ text: \"By N. Lambert, 2024\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"- **Réctivité**\n\nGrace aux [**`Inputs`**](https://observablehq.com/documentation/inputs/overview) d'Observable, vous pouvez proposer la modification de n'importe quel élément de la carte.","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"Ajoutez un Input de type slider pour modifier la taille des cercles","pinned":false,"hidden":false,"mode":"md"},{"id":314,"value":"viewof taille = Inputs.range([10, 100], {\n label: \"Taille des cercles\",\n step: 1,\n value: 30\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"{\n let svg = viz.create({\n projection: d3.geoEqualEarth(),\n zoomable: true\n });\n svg.outline();\n svg.graticule();\n svg.path({ datum: world, fill: \"white\", fillOpacity: 0.3 });\n svg.plot({\n type: \"prop\",\n data: world,\n var: \"pop\",\n fill: \"red\",\n tip: true,\n k: taille // ICI\n });\n svg.header({ text: \"Hello World\" });\n svg.footer({ text: \"By N. Lambert, 2024\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}