30:[{"id":"bb6686ae8149fbe7b45123aef81eb6d9d3bd08d3106e741cf9a898667988952fd28c97e09e45b035f2c5a3abbec12325d2c63118a744f28dd16680b85348b8a8","href":"https://static.observableusercontent.com/files/bb6686ae8149fbe7b45123aef81eb6d9d3bd08d3106e741cf9a898667988952fd28c97e09e45b035f2c5a3abbec12325d2c63118a744f28dd16680b85348b8a8","name":"api.png","type":"image/png","lastModified":1728654859715.761,"size":128455},{"id":"0c0853c2ce3b08cbb1de6a9e84308b352fd9639a57c1f2bdbfa3b9ab740f162da85191c23712c302fc117794e827bf6c4cebc2411ce271ea77b0a12d785ad56a","href":"https://static.observableusercontent.com/files/0c0853c2ce3b08cbb1de6a9e84308b352fd9639a57c1f2bdbfa3b9ab740f162da85191c23712c302fc117794e827bf6c4cebc2411ce271ea77b0a12d785ad56a","name":"attach.png","type":"image/png","lastModified":1728654859715.761,"size":1058},{"id":"5861df15ada1ab52985568c6a76a39e0688f332c50e95e2ae75e903898c2cfe11873a91aed4beb54f85810c10b7098f0009a23ed69fe829d83fc9cf9c173a649","href":"https://static.observableusercontent.com/files/5861df15ada1ab52985568c6a76a39e0688f332c50e95e2ae75e903898c2cfe11873a91aed4beb54f85810c10b7098f0009a23ed69fe829d83fc9cf9c173a649","name":"fork.png","type":"image/png","lastModified":1728654859715.761,"size":27660},{"id":"26713a8c21f5b75a2e6942385e691cb293e0177e35107749a99dfab56659f2be5424be38d377e1426715086d920206b553587373b8e7390ded81a09be27c76c1","href":"https://static.observableusercontent.com/files/26713a8c21f5b75a2e6942385e691cb293e0177e35107749a99dfab56659f2be5424be38d377e1426715086d920206b553587373b8e7390ded81a09be27c76c1","name":"worldbank.csv","type":"text/csv","lastModified":1728654859715.761,"size":11012},{"id":"890df102d43820c396d49d31a6b09e0d868ff9a9f39d04f3d925e897785eeb9d6b193b8d693a405de0cb8ae9b98f8559f532eda9b4919201976d91b31820639f","href":"https://static.observableusercontent.com/files/890df102d43820c396d49d31a6b09e0d868ff9a9f39d04f3d925e897785eeb9d6b193b8d693a405de0cb8ae9b98f8559f532eda9b4919201976d91b31820639f","name":"world.json","type":"application/json","lastModified":1728654859715.761,"size":254454},{"id":"a131b5017abca42ed65467f94355b0660fa9a7bed686016850855356e4a05c049da19fa07bee94bf1c3b921e4eb632b5d46021270b774bf0ee7de6e33af1b50c","href":"https://static.observableusercontent.com/files/a131b5017abca42ed65467f94355b0660fa9a7bed686016850855356e4a05c049da19fa07bee94bf1c3b921e4eb632b5d46021270b774bf0ee7de6e33af1b50c","name":"Exo_geoviz.svg","type":"image/svg+xml","lastModified":1759307851883.681,"size":3257}] 2e:{"title":"Prise en main de la bibliothèque geoviz","cells":[{"id":0,"value":"# Prise en main de la bibliothèque `geoviz`","pinned":false,"hidden":false,"mode":"md"},{"id":350,"value":"disclaimer\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"## La bibliothèque geoviz","pinned":false,"hidden":false,"mode":"md"},{"id":365,"value":"**`geoviz`** est une bibliothèque JavaScript Open Source pour réaliser des cartes thématiques vectorielles, interactives et zoomables. ","pinned":false,"hidden":false,"mode":"md"},{"id":389,"value":"Voici un exemple.","pinned":false,"hidden":false,"mode":"md"},{"id":385,"value":"demo","pinned":false,"hidden":false,"mode":"ojs"},{"id":394,"value":"Des exemples d'utilisation sont disponibles ici :","pinned":false,"hidden":false,"mode":"md"},{"id":392,"value":"documentation","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"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"},{"id":399,"value":"api = FileAttachment(\"api.png\").image({ width: 700 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":407,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":363,"value":"## C'est parti ! ","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":7,"value":"### 👉 observablehq.com/@cartographie/tutogeoviz","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(...)","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(...)","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":"// JavaScript","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":"// JavaScript","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":59,"value":"- Chargez la version **0.9.4** de bibliothèque `geoviz` avec l'instruction **`require()`**","pinned":false,"hidden":false,"mode":"md"},{"id":62,"value":"viz = require(\"geoviz@0.9.4\")","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(...)","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({ ... })","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:...});\n// svg.path();\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: ???,\n// geom_id: \"???\",\n// data:???,\n// data_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 = ...","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: 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"},{"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.plot({ type: \"choro\", ... })","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.plot({ type: \"choro\", ... })","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.plot({ type: \"typo\", ... })","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.plot({ type: \"prop\", ... })","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.plot({ type: \"prop\", ... })","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.plot({ type: \"propchoro\", ... })","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.plot({ type: \"proptypo\", ... })","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.plot(...);\n// svg.header(...);\n// svg.footer(...);\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":"// ...","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":"// ...","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":"// ...","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"## Correction","pinned":false,"hidden":false,"mode":"md"},{"id":553,"value":"https://observablehq.com/@cartographie/geoviz-correction","pinned":false,"hidden":false,"mode":"md"},{"id":352,"value":"## *Annexe*","pinned":false,"hidden":false,"mode":"md"},{"id":355,"value":"import { disclaimer } from \"d41fbc44e11a58e6\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"import { demo, documentation } from \"@neocartocnrs/geoviz\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}