2b:null 2c:["$","title",null,{"children":"Exercice de mise en pratique - Geoviz | Geovis-M2-GEOMAS | Observable"}] 31:[{"id":"bb6686ae8149fbe7b45123aef81eb6d9d3bd08d3106e741cf9a898667988952fd28c97e09e45b035f2c5a3abbec12325d2c63118a744f28dd16680b85348b8a8","href":"https://static.observableusercontent.com/files/bb6686ae8149fbe7b45123aef81eb6d9d3bd08d3106e741cf9a898667988952fd28c97e09e45b035f2c5a3abbec12325d2c63118a744f28dd16680b85348b8a8","name":"api.png","type":"image/png","lastModified":1738678665414.795,"size":128455},{"id":"5861df15ada1ab52985568c6a76a39e0688f332c50e95e2ae75e903898c2cfe11873a91aed4beb54f85810c10b7098f0009a23ed69fe829d83fc9cf9c173a649","href":"https://static.observableusercontent.com/files/5861df15ada1ab52985568c6a76a39e0688f332c50e95e2ae75e903898c2cfe11873a91aed4beb54f85810c10b7098f0009a23ed69fe829d83fc9cf9c173a649","name":"fork.png","type":"image/png","lastModified":1738678659124.371,"size":27660},{"id":"26713a8c21f5b75a2e6942385e691cb293e0177e35107749a99dfab56659f2be5424be38d377e1426715086d920206b553587373b8e7390ded81a09be27c76c1","href":"https://static.observableusercontent.com/files/26713a8c21f5b75a2e6942385e691cb293e0177e35107749a99dfab56659f2be5424be38d377e1426715086d920206b553587373b8e7390ded81a09be27c76c1","name":"worldbank.csv","type":"text/csv","lastModified":1738678820664.157,"size":11012},{"id":"890df102d43820c396d49d31a6b09e0d868ff9a9f39d04f3d925e897785eeb9d6b193b8d693a405de0cb8ae9b98f8559f532eda9b4919201976d91b31820639f","href":"https://static.observableusercontent.com/files/890df102d43820c396d49d31a6b09e0d868ff9a9f39d04f3d925e897785eeb9d6b193b8d693a405de0cb8ae9b98f8559f532eda9b4919201976d91b31820639f","name":"world-exo.json","type":"application/json","lastModified":1738678801775.775,"size":254454}] 2f:{"id":"08c3af201b478540","slug":"exercice-geoviz-plot","title":"Exercice de mise en pratique - Geoviz","thumbnail":"978326c071b3e2e6ad23faee8b0cda8f1919b9d875e1056d3c67c43b1bfd6bfe","access_level":"public","create_time":"$D2025-02-03T16:25:08.460Z","update_time":"$D2026-01-08T13:04:57.012Z","view_time":null,"first_public_time":"$D2025-02-07T12:29:27.130Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS","avatar_url":"https://avatars-next.observableusercontent.com/8480906916f9dcdd46d764fb7c433c135aeb94fe0a4cf7ba198784851c520c5b","tier":"starter_2024"},"version":281,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null}],"members":[{"type":"team","id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS","avatar_url":"https://avatars-next.observableusercontent.com/8480906916f9dcdd46d764fb7c433c135aeb94fe0a4cf7ba198784851c520c5b","tier":"starter_2024","role":"editor"},{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":33,"collection":{"id":"0d62c54373f4d746","slug":"exercices","title":"Exercices","owner":{"id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS"}},"type":"notebook","body":{"title":"Exercice de mise en pratique - Geoviz","cells":[{"id":0,"value":"# Exercice de mise en pratique - `Geoviz`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3,"value":"

Support de cours pour les étudiants 2025-2026 de 2ème année du Master GAED - parcours GEOMAS de l'IUGA - Université Grenoble Alpes.

\n\nIntervenant : Matthieu Viry

\nVoir l'ensemble des notebooks ici.\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":144,"value":"# Prise en main","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":13,"value":"La bibliothèque `geoviz` vous a été présenté rapidement dans un précédent notebook.\n\nFamiliarisons-nous désormais avec cette bibliothèque.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":178,"value":"documentation","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"La **documentation complète** est disponible ici : https://riatelab.github.io/geoviz/\n\nConservez ce lien précieusement.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"api = FileAttachment(\"api.png\").image({ width: 700 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"## C'est parti !\n\nRendez-vous sur ce notebook et cliquez sur le bouton **`fork`** pour le récupérer *chez vous*. \n\n${await FileAttachment(\"fork.png\").image({ width: 400 })}\n\nSélectionnez *Only you* concernant la visibilité de votre notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":38,"value":"## Présentation des données\n\nVoici 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.\n\nLes données sont attachées au notebook avec le bouton **trombone 📎** en haut à droite de la page.\n\nElles sont ensuite ajoutées au notebook avec l'instruction `FileAttachement()`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":44,"value":"pays = FileAttachment(\"world-exo.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"bm = FileAttachment(\"worldbank.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"## Visualisation des données attributaires\n\n- Affichez les données importées depuis le fichier `worldbank.csv` (variable `bm`) avec la fonction `Inputs.table()`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":54,"value":"// Votre code ici","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":56,"value":"- Affichez la table attributaire du fond de carte (variable `pays`) avec la fonction `Inputs.table()`. Attention, pour cela il faut extraire le champ `properties` de chaque entité (avec un code du type `pays.features.map(...)`)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":63,"value":"// Votre code ici","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"- Créez une cellule markdown ci-dessous pour écrire la phrase \"Le pays le plus riche est *nom du pays* et le pays le plus peuplé est *nom du pays*\". Bien entendu, vous devez obtenir ces deux valeurs en JavaScript.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":68,"value":"En 2020, le pays le plus riche est **${undefined}** et le pays le plus peuplé est **${undefined}**.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":271,"value":"// paysleplusriche = ...","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":275,"value":"// payslepluspeuple = ...","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":79,"value":"## Visualisation des géométries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":82,"value":"- Affichez le fond de carte avec Leaflet (Observable vous aide pour cela, comme vu dans un précédent notebook !)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":85,"value":"- Affichez le fond de carte avec Plot (Observable vous aide pour cela, comme vu dans un précédent notebook !)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":92,"value":"## Visualisation avec la bibliothèque `geoviz`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":95,"value":"On commence par charger la bibliothèque grâce à l'instruction `require` :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":98,"value":"viz = require('geoviz')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":100,"value":"- Affichez le fond de carte avec la fonction `path()` (vous pouvez vous aider de ce notebook).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":103,"value":"// viz.path({...})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":105,"value":"- Affichez-le une seconde fois avec la projection `d3.geoNaturalEarth1()`.\n \n *NB: Pour cela, vous avez besoin des fonctions `create()` et `render()`. Regardez dans ce notebook. Pensez à bien spécifier le domaine d'affichage ou la projection de la carte*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":111,"value":"// {\n// let svg = viz.create(...);\n// svg.path();\n// return svg.render(...);\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"## Jointure\n\n- 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*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":119,"value":"// merge = ...","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"- Évaluez la jointure à l'aide du diagnostic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":126,"value":"// merge.diagnostic","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":128,"value":"- Puis, récupérez le nouveau fond de carte contenant les données attributaires. Nommez-le `world`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":131,"value":"// world = ...","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":133,"value":"## Faire une carte *habillée*\n\nLa 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. \n\nDans 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\nVous pouvez vous aider de ce [notebook](https://observablehq.com/@neocartocnrs/layout-marks).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":136,"value":"// {\n// let svg = viz.create({\n// projection: d3.geoEqualEarth()\n// });\n// svg.outline()\n// svg.graticule()\n// svg.path(...);\n// svg.header(...);\n// svg.footer(...);\n// return svg.render();\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"# Cartographie thématique interactive\n\nDans `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","author":"$undefined","summary":"$undefined"},{"id":148,"value":"## Réalisation d'un carte choroplèthe\n\nPour 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).\n\n- 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","author":"$undefined","summary":"$undefined"},{"id":189,"value":"//viz.plot({ type: \"choro\", ... })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":192,"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)\n\n- Réalisez une carte en bleu avec la méthode q6. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":193,"value":"//viz.plot({ type: \"choro\", ... })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":151,"value":"## Réalisation d'une carte qualitative\n\nPour 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).\n\nIdentifiez la seule donnée qualitative nominale du jeu de données et réalisez une carte qualitative.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":197,"value":"//viz.plot({ type: \"typo\", ... })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":154,"value":"## Créer une carte de symboles proportionnels\n\nPour créer ce type de carte, il suffit d'utiliser la fonction **plot** avec le type **prop**. Voir un exemple dans ce [notebook](https://observablehq.com/@neocartocnrs/prop).\n\n- En une ligne, réalisez une carte avec des cercles proportionnels sur la variable \"pop\".","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":204,"value":"//viz.plot({ type: \"prop\", ... })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"- Maintenant, essayez de remplacer, avec l'attribut symbol, les cercles par des carrés ou des pointes.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":209,"value":"//viz.plot({ type: \"prop\", ... })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":160,"value":"## Combinaison\n\nAvec 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)\n\n- Combinez population (**var1**) et PIB par habitant (**var2**).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":214,"value":"//viz.plot({ type: \"propchoro\", ... })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":216,"value":"- Combinez population (**var1**) et region (**var2**).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":223,"value":"//viz.plot({ type: \"proptypo\", ... })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":162,"value":"## Réalisation d'une carte thématique habillée\n\nPour créer une carte habillée avec plusieurs couches, il faut utiliser les fonctions **create()** et **render()**.\n\n- Réalisez une carte de population habillée.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":237,"value":"// {\n// let svg = viz.create({\n// projection: d3.geoEqualEarth()\n// });\n// svg.outline()\n// svg.graticule()\n// svg.plot(...);\n// svg.header(...);\n// svg.footer(...);\n// return svg.render();\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":165,"value":"## Rendre la carte interactive","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":241,"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","author":"$undefined","summary":"$undefined"},{"id":246,"value":"// Votre code ici","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":247,"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","author":"$undefined","summary":"$undefined"},{"id":250,"value":"// Votre code ici","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":252,"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.\n\nAjoutez un Input de type slider pour modifier la taille des cercles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":258,"value":"// Code du slider","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":260,"value":"// Code de la carte","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":183,"value":"## *Crédits*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":184,"value":"Ce tutoriel est dérivé des supports créés par Nicolas Lambert","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":168,"value":"## *Appendix*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":171,"value":"import { demo, documentation } from \"@neocartocnrs/geoviz\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"