31:[{"id":"ac522440e8f0e34ead1dacec9655affedebe6ee8db0f5334c32d457e64cae81c5c1ed7932ae24f9159b69c2b19730e69b98ba862ccd533713524c2409d92a24a","href":"https://static.observableusercontent.com/files/ac522440e8f0e34ead1dacec9655affedebe6ee8db0f5334c32d457e64cae81c5c1ed7932ae24f9159b69c2b19730e69b98ba862ccd533713524c2409d92a24a","name":"world.json","type":"application/json","lastModified":1695993093581.209,"size":278391}] 2f:{"title":"Les données géographiques","cells":[{"id":0,"value":"# Les données géographiques","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"

FICHIERS GEOJSON

","pinned":false,"hidden":false,"mode":"md"},{"id":14,"value":"En JavaScript, les fonds de cartes sont stockés au format **GeoJSON** qui est une extension du format JSON. L'extension peut être *.json* ou *.geojson*.","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"Comme pour les données tabulaires, on peut ajouter ces données géométriques avec `FileAttachment()`.","pinned":false,"hidden":false,"mode":"md"},{"id":22,"value":"world = FileAttachment(\"world.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"world","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"

TABLE ATTRIBUTAIRE

","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"On peut visualiser la table attributaire de la façon suivante :","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"data = world.features.map((d) => d.properties)","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"

GÉOMETRIES

","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"On accède aux données géométriques de la façon suivante :","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"geom = world.features.map((d) => d.geometry)","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"Inputs.table(geom)","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"

VISUALISATION

","pinned":false,"hidden":false,"mode":"md"},{"id":50,"value":"Il y a 2 façons par defaut proposées par Observable pour visualiser les données","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"- **`Plot`**","pinned":false,"hidden":false,"mode":"md"},{"id":61,"value":"Plot.plot({ projection: \"equal-earth\", marks: [Plot.geo(world)] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"- **`Leaflet`**","pinned":false,"hidden":false,"mode":"md"},{"id":73,"value":"{\n const container = yield htl.html`

`;\n const map = L.map(container);\n const layer = L.geoJSON(world).addTo(map);\n map.fitBounds(layer.getBounds(), { maxZoom: 9 });\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution:\n \"© OpenStreetMap contributors\"\n }).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"Il y a bien évidemment beaucoup d'autres façon de visualiser ces fonds de cartes. Mais cela necessite de charger des bibliothèques spécifiques.","pinned":false,"hidden":false,"mode":"md"},{"id":86,"value":"- **`geovorview`**","pinned":false,"hidden":false,"mode":"md"},{"id":88,"value":"view = require(\"geoverview\").then((d) => d.view)","pinned":true,"hidden":true,"mode":"ojs"},{"id":92,"value":"view(world)","pinned":true,"hidden":false,"mode":"ojs"},{"id":108,"value":"- **topohelper**","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"topohelper = import(\"https://cdn.jsdelivr.net/npm/topohelper@latest/+esm\")","pinned":true,"hidden":true,"mode":"ojs"},{"id":112,"value":"topoworld = topohelper.fromGeojson(world).topojson","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"x = topohelper.from(topoworld).centroids({ layer: 0 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"x.view({ tooltip: true, zoom: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"- **`bertin`**","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"bertin = require(\"bertin\")","pinned":true,"hidden":true,"mode":"ojs"},{"id":98,"value":"bertin.draw({ layers: [{ geojson: world, tooltip: [\"$NAMEfr\", \"$region\"] }] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"- **`geoverview`**","pinned":false,"hidden":false,"mode":"md"},{"id":123,"value":"viz = require(\"geoviz\")","pinned":true,"hidden":true,"mode":"ojs"},{"id":121,"value":"viz.path({ data: world, tip: true, svg_zoomable: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"## *Appendix*","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W31","stdlib":"1","titling":"auto"}