2c:null 2d:["$","title",null,{"children":"Écosystème JavaScript pour la géovisualisation et la datavisualisation | Geovis-M2-GEOMAS | Observable"}] 32:T96d,## Manipulation de données géospatiales

Illustration : Nicolas Lambert De manière générale, sur le Web, le format le plus souvent rencontré (et le plus simple à manipuler directement) est le GeoJSON. ```js { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [102.0, 0.5] }, "properties": { "id": 1, "name": "Example Point 1" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [67.0, 13.5] }, "properties": { "id": 2, "name": "Example Point 2" } } ] } ``` D'après la dernière version de la spécification ([RFC 7946](https://datatracker.ietf.org/doc/html/rfc7946)), les coordonnées sont censées être exprimés dans le systèmes de coordonnées WGS84 (EPSG:4326) mais il arrive de trouver des fichiers GeoJSON avec une propriété `crs` spécifiant un autre système de coordonnées de références (c'était autorisé dans la précédente version de la spécification). Il arrive par ailleurs de devoir manipuler des fichiers qui sont dans d'autres formats (GeoPackage, Shapefile, etc.) ou d'avoir besoin de transformer des données d'un système de coordonnées de référence vers un autre (quoi ce soit pour effectuer des géotraitements ou pour les visualiser). Il existe dans l'écosystème Web différentes bibliothèques permettant de convertir des données géospatiales dans différents formats et systèmes de coordonnées de référence. ### Gdal3.js

Il s'agit des applications [GDAL](http://gdal.org/) (`gdal_translate`, `ogr2ogr`, `gdal_rasterize`, `gdalwarp`, `gdaltransform`, `ogrinfo`) compilées en [WebAssembly](https://webassembly.org/), pour une utilisation en JavaScript. La bibliothèque supporte la plupart des drivers supportés par GDAL "natif" et permet ainsi de convertir des données géospatiales matricielles et vectorielles dans / vers différents formats et systèmes de coordonnées. La bibliothèque est plutôt bas-niveau, mais on peut facilement écrire une ou deux fonctions pour la rendre plus facilement utilisable :33:T868,Toutefois, lorsque qu'on travaille sur le Web on privilégie généralement des formats comme le GeoJSON ne nécessitant pas de sortir "l'artillerie lourde" (en effet, la bibliothèque gdal3.js environ une 30aine de Mo - les bibliothèques sont toutefois souvent compressées [de manière transparente](https://developer.mozilla.org/fr/docs/Web/HTTP/Headers/Content-Encoding), par exemple avec *gzip*, lorsque qu'elles sont envoyées d'un serveur Web vers un navigateur). **Repository** : https://github.com/bugra9/gdal3.js **Documentation** : https://gdal3.js.org/docs/ ### Proj4.js Il s'agit d'un port de la bibliothèque [Proj](https://proj.org) (à l'époque où elle était dans sa version 4) en JavaScript. Cette bibliothèque permet d'effectuer des transformations, d'un système de coordonnées vers un autre. Les systèmes de coordonnées doivent être spécifiés en utilisant une chaîne de caractère *proj4* ou *WKT1*. **Repository** : https://github.com/proj4js/proj4js **Documentation** : http://proj4js.org/ ### TopoJSON Il s'agit d'un format et d'une bibliothèque JavaScript conçus par le créateur de D3.js (Mike Bostock). TopoJSON est une extension de GeoJSON qui encode la topologie (plutôt que de représenter les géométries de manière discrète, les géométries des fichiers TopoJSON sont assemblées à partir de segments de ligne partagés appelés arcs - ainsi les frontières des objets géographiques adjacents ne sont stockés qu'une seule fois). Pour réduire davantage la taille des fichiers, TopoJSON peut utiliser un encodage delta-quantifié pour les coordonnées (cela revient à arrondir les coordonnées et stocker seulement la différence de position avec la coordonnée précédente au sein d'un arc). En conséquence la représentation d'un jeu de données en TopoJSON est beaucoup plus compacte qu'en GeoJSON (généralement d'environ 80% d'après son créateur). Cette représentation topologique est également particulièrement utile pour procéder à la simplification du tracé des jeux de données de polygones tout en préservant la relation d’adjacence entre les polygones voisins. 34:Tb8d,Voir également ce notebook pour une explication plus détaillée et en français. **Specification** : https://github.com/topojson/topojson-specification **Repository** : https://github.com/topojson/topojson ### Geos-wasm

Il s'agit de [GEOS](https://libgeos.org/) compilé en WebAssembly, pour une utilisation en JavaScript. L'API proposée est elle aussi relativement "bas-niveau" mais reste plutôt facile à prendre en main et peut-être particulièrement utile pour porter vers les Web des traitements déjà réalisés avec GEOS (en C ou en Python avec `Shapely` par exemple). Comme gdal3.js, geos-wasm est une bibliothèque relativement lourde (environ 2.6 Mo - 720 ko si compressé avec *gzip*). *Extrait d'un morceau de code (en TypeScript) dans un de mes projets*: ```typescript async function intersectionFeature( feature1: GeoJSONFeature, feature2: GeoJSONFeature, ): Promise { const geos = await getGeos(); const ft1Ptr = geojsonToGeosGeom(feature1, geos); const ft2Ptr = geojsonToGeosGeom(feature2, geos); const intersectionPtr = geos.GEOSIntersection(ft1Ptr, ft2Ptr); const geometry = geosGeomToGeojson(intersectionPtr, geos); geos.GEOSGeom_destroy(ft1Ptr); geos.GEOSGeom_destroy(ft2Ptr); geos.GEOSGeom_destroy(intersectionPtr); return { type: 'Feature', id: feature1.id, properties: feature1.properties, geometry, } as GeoJSONFeature; } ``` On est donc sur une bibliothèque de relativement bas niveau avec une API proche de l'API en C (gestion manuelle de la mémoire avec `geos.GEOSGeom_destroy`, etc.). Mais cette bibliothèque s'avère généralement plus performante que Turf (voir ci-dessous) et permet de bénéficier de la robustesse de GEOS. **Repository** : https://github.com/chrispahm/geos-wasm **Documentation** : https://chrispahm.github.io/geos-wasm/ ### Turf

Il s'agit d'une bibliothèque modulaire (il est possible d'importer seulement le module dont on a besoin) pour la manipulation et l'analyse de données géospatiales (buffer, intersection, difference, centroide, isolignes, isobandes, création de grilles, etc.). Cette bibliothèque permet de manipuler directement des objets GeoJSON. **Repository** : https://github.com/Turfjs/turf **Documentation** : https://turfjs.org/ ### Geotoolbox Il s'agit d'un *wrapper* de haut niveau autour de `geos-wasm`. C'est, dans une certaine mesure, une alternative à `Turf`, qui permet elle aussi de manipuler directement des objets GeoJSON. La bibliothèque n'est pas modulaire comme Turf et est donc relativement lourde (puisqu'elle dépend de `geos-wasm`). **Repository & Documentation** : https://github.com/riatelab/geotoolbox 35:T821,

## Datavisualisation Il existe de nombreuses solutions en JavaScript pour créer des graphiques interactifs. Le choix d'une solution va fortement dépendre du niveau de personnalisation souhaité, du type de graphique à créer et du temps disponible pour réaliser la visualisation de données en question. En effet certains bibliothèques proposent des "types de graphiques" (diagramme à barre, nuage de points, etc. - c'est par exemple le cas de Chart.js). Cela peut s'avérer très pratique pour créer les graphiques en questions, mais cela n'offre pas la flexibilité d'une bibliothèque implémentant la grammaire des graphiques (c'est par exemple le cas de Plot, Vega et Vega-lite) ni la flexibilité de D3.js par exemple. Enfin, la création de certaines visualisations de données plus complexes peut nécessiter (ou finalement s'avérer plus simple à réaliser) avec une bibliothèque de plus bas-niveau, comme D3.js. ### D3.js

Se décrit comme "la bibliothèque JavaScript pour la visualisation de données sur mesure". Cette bibliothèque permet de créer des visualisations de données avec une flexibilité inégalée. Avec cette bibliothèque on décrit comment lier des données à des éléments HTML et comment les transformer si besoin. **Repository** : https://github.com/d3/d3 **Documentation** : https://d3js.org/ ### Plot

Se décrit comme "la bibliothèque JavaScript pour la visualisation exploratoire des données". Cette bibliothèque (basée sur D3.js) permet de créer et de personnaliser rapidement des visualisations de données. Elle implémente la *grammaire des graphiques* (que vous avez peut-être déjà manipuler en utilisant la bibliothèque `ggplot2` en R par exemple). **Repository** : https://github.com/observablehq/plot **Documentation** : https://observablehq.com/plot ### Plotly, Chart.js, Vega, Vega-lite, Antv, etc. 36:T8ce,{ const svgWidth = 720; const svgHeight = 500; // On créé l'élément SVG const svg = d3.create('svg') .attr('width', svgWidth) .attr('height', svgHeight); const marginBottom = 30; const marginLeft = svgWidth / 20; const marginTop = marginBottom * 2; const w = svgWidth - marginLeft; const h = svgHeight - marginBottom - marginTop; const barWidth = w / data.length // Largeur de chaque barre const margin = 5; // Espace entre les barres // Une échelle linéaire permettant de mapper les valeur d'entrée // vers une position (hauteur) sur l'axe 'y' const yScale = d3.scaleLinear() .domain([0, Math.ceil(d3.max(data, d => d.value) / 10) * 10]) .range([h, 0]) // Création du groupe SVG qui va acceuillir les barres. const bars = svg.append('g') // La valeur y est calculée depuis le haut, nous avons donc besoin de marginLeft et marginTop .attr('transform', `translate(${marginLeft}, ${marginTop})`); bars.selectAll('rect') .data(data) .join('rect') .attr('x', (d, i) => i * barWidth) .attr('width', barWidth - margin) .attr('y', d => yScale(d.value)) .attr('height', d => h - yScale(d.value)) .attr('fill', (d, i) => d3.schemePastel1[i]) // On ajoute les étiquettes de l'axe 'x' : const monthNames = svg.append('g') .attr('transform', `translate(${marginLeft}, ${marginTop})`); monthNames.selectAll('text') .data(data) .join('text') .attr('x', (d, i) => i * barWidth + barWidth / 2) .attr('y', h + 20) .attr('text-anchor', 'middle') .attr('font-size', '12px') .attr('font-family', 'sans-serif') .text(d => d.month) // On ajoute l'axe Y const axisY = d3.axisLeft() .scale(yScale) .ticks(8); svg.append('g') .attr('transform', `translate(${marginLeft - 3}, ${marginTop})`) .attr('font-family', 'sans-serif') .attr('font-size', '12px') .call(axisY); // On ajoute un titre svg.append('g') .attr('transform', `translate(${svgWidth / 2}, ${marginTop / 2})`) .append('text') .attr('text-anchor', 'middle') .attr('dominant-baseline', 'middle') .attr('font-family', 'sans-serif') .html('Exemple de graphique avec D3.js'); return svg.node(); }37:T944, ### Leaflet, OpenLayers Leaflet et OpenLayers sont deux bibliothèques populaires utilisées pour créer des cartes interactives pour le Web. Elles permettent toutes deux d'afficher des données géospatiales, d'ajouter des couches de tuiles, de dessiner des formes géométriques et d'interagir avec des éléments cartographiques. Elles s'opposent toutefois du point de vue de leur philosophie (légèreté et modularité vs. richesse en fonctionnalité) : [**Leaflet**](https://leafletjs.com/) est connue pour sa simplicité et sa légèreté. Elle est très facile à utiliser (API relativement simple et intuitive). Elle correspond aux projets où la performance et la simplicité sont essentielles avec des fonctionnalités de base suffisantes pour la plupart des applications de cartographie courantes. Sinon de nombreux plugins sont disponibles pour étendre ses capacités. [**OpenLayers**](https://openlayers.org/) est une bibliothèque plus riche en fonctionnalités. Elle supporte une gamme plus large de formats de données et de sources de tuiles, et supporte "nativement" de nombreuses fonctionnalités qui sont reléguées dans des plugins du côté de Leaflet (*clusters* par exemple). OpenLayers offre une grande flexibilité pour les utilisateurs ayant des besoins spécifiques et complexes mais elle est plus difficile à prendre en main que Leaflet pour les débutants. OpenLayers n'est toutefois pas en reste en terme de plugin, cf. [ol-ext](https://viglino.github.io/ol-ext/), développé par Jean-Marc Viglino de l'IGN, qui témoigne aussi de la grande flexibilité d'OpenLayers. ### Mapbox GL JS / Maplibre Mapbox GL JS et MapLibre GL JS sont deux bibliothèques JavaScript utilisées pour créer des cartes interactives / visualisations géospatiales faisant appel au capacité d'accélération graphique du GPU (grâce à WebGL, comme le suggère leur nom). Mapbox GL JS est développée par la société Mapbox. Il s'agissait d'une bibliothèque *opensource* jusqu'à sa version 2.0.0. Maplibre GL JS est un *fork* communautaire Mapbox GL JS 1.13.0 qui conserve une licence libre (de type BSD). Cette bibliothèque est en développement constant grâce à la large communauté qui s'est constitué autour du projet, elle supporte désormais de nombreuses fonctionnalités supplémentaires (comme la visualisation proposée ci-dessous).38:T732,viewof mapterrain = { const container = yield html`

`; const map = (container.value = new maplibregl.Map({ container, zoom: 12, center: [11.39085, 47.27574], pitch: 52, style: { version: 8, sources: { osm: { type: "raster", tiles: ["https://a.tile.openstreetmap.org/{z}/{x}/{y}.png"], tileSize: 256, attribution: "© OpenStreetMap Contributors", maxzoom: 19, }, terrainSource: { type: "raster-dem", url: "https://demotiles.maplibre.org/terrain-tiles/tiles.json", tileSize: 256, }, hillshadeSource: { type: "raster-dem", url: "https://demotiles.maplibre.org/terrain-tiles/tiles.json", tileSize: 256, }, }, layers: [ { id: "osm", type: "raster", source: "osm", }, { id: "hills", type: "hillshade", source: "hillshadeSource", layout: { visibility: "visible" }, paint: { "hillshade-shadow-color": "#473B24" }, }, ], terrain: { source: "terrainSource", exaggeration: 1, }, }, maxZoom: 18, maxPitch: 85 })); map.addControl( new maplibregl.NavigationControl({ visualizePitch: true, showZoom: true, showCompass: true, }) ); map.addControl( new maplibregl.TerrainControl({ source: "terrainSource", exaggeration: 1, }) ); invalidation.then(() => map.remove()); }39:Ta70,

## Autres bibliothèques utiles pour la visualisation de données Il s'agit d'extraits choisis, l'écosystème JavaScript pour la (géo)visualisation et la manipulations de données géospatiales étant en constante évolution. ### Discrétisation de données La bibliothèque [statsbreaks](https://github.com/riatelab/statsbreaks) permet de discrétiser facilement des données avec les méthodes fréquemment utilisées en géographie (quantiles, intervalles égaux, Jenks, q6, etc.). ### Palettes de couleurs La bibliothèque [dicopal](https://github.com/riatelab/dicopal.js) regroupe des palettes de couleurs en provenance de nombreux fournisseurs (*Colorbrewer2*, *Fabio Crameri's Scientific Colour Maps*, *CARTOColors*, *Matplotlib*, *Tableau*, etc.). ### Statistiques spatiales La récente bibliothèque [spatial-autocorrelation](https://github.com/episphere/spatial-autocorrelation) permet de calculer des statistiques d'autocorrélation spatiale globale (Moran's I, Geary's C, et Getis-Ord General G) et des statistiques d'autocorrélation spatiale locale (Moran's I local, Geary's C local, Getis-Ord Gi/Gi*). Voir [le notebook d'exemple](https://observablehq.com/@siliconjazz/spatial-autocorrelation-js). La bibliothèque [fast-kde](https://github.com/uwdata/fast-kde) fournit une approximation très rapide et précise des estimations de la densité du noyau gaussien - kernel density estimation (KDE) - en 1D et 2D. ## Autres bibliothèques utiles pour l'analyse de données Il existe également en JavaScript des bibliothèques (telles que : Arquero) permettant de faciliter la manipulation de tableaux de données (à la manière de `pandas` en Python ou de `data.frame` / `dplyr` en R). Par ailleurs, il est possible que vous ayez déjà l'habitude d'utiliser Python ou R pour réaliser vos analyses de données. Il s'agit de deux langages proposant un vaste écosystème de bibliothèque pour la science des données. Si vous souhaitez utiliser Python ou R sur le Web, appelés depuis du code JavaScript, il est possible de se tourner vers les projets Pyodide et WebR : il s'agit de versions de Python et de R compilées en WebAssembly, pour une utilisation sous le Web. Les performances sont en deçà de Python ou R "natif" (et il s'agit de composants relativement lourds - plusieurs Mo ou dizaines de Mo - à ajouter à un projet) mais ça peut être une option de choix pour porter un workflow existant en Python ou R vers le Web par exemple.3a:Taab,

## Exemples de géovisualisations populaires dans des notebooks Observable Regardez les notebooks suivants qui constituent de bons exemples de géovisualisations réalisées dans Observable : - [Cartographions les voies portant le nom d'une femme à Toulouse](https://observablehq.com/@ericmauviere/cartographions-les-voies-se-referant-a-une-femme-a-toulouse) - [Visualizing Air Raid Sirens in Ukraine](https://observablehq.com/@mourner/sirens) - [NBA beeswarm chart](https://observablehq.com/@tashapiro/nba-beeswarm) - [Sunny day, rainy day in Seattle](https://observablehq.com/@analyzer2004/sunny-day-rainy-day-in-seattle) Il s'agit seulement d'exemples ; d'autres très bonnes visualisations peuvent être trouvés sur la page https://observablehq.com/top ou https://observablehq.com/trending comme conseillé dans le premier support.
Ainsi, les notebooks Observables peuvent être un bon moyen : - **de réaliser une page de démonstration d'une bibliothèque ou d'un composant que vous développez** (cf. [1](https://observablehq.com/@mthh/hello-dicopal), [2](https://observablehq.com/@analyzer2004/sunny-day-rainy-day-in-seattle) et [3](https://observablehq.com/@bartok32/diy-inputs) par exemple) - **créer des visualisations qui seront utilisées ailleurs** (mon collègue Nicolas Lambert utilise Observable pour créer les visualisations qu'il conçoit pour la série Le regard du Cartographe qui parait dans l'Humanité) - **disposer d'une plateforme pour partager des morceaux de code interactifs** (démonstration d'un bug lors de la soumission d'une *issue* sur un dépôt de code ; prototypage avant la création d'une "vraie" page Web ou l'intégration du morceau de code dans un projet existant, etc.)

## Exemples d'utilisations des bibliothèques présentées ici - L'application Web Magrit utilise une partie des bibliothèques présentées ici (`gdal3.js`, `geos-wasm`, `D3.js`, `Plot`, `Proj4.js`, et `dicopal`) afin de permettre la création d'une application ne nécessitant aucun code côté serveur. - L'application Web IMAGE d'Eurostat utilise notamment la bibliothèque `eurostat-map.js`, basée sur D3.js, ainsi que la bibliothèque `dicopal`. - De nombreuses [visualisations du New York Times](https://www.nytimes.com/spotlight/graphics) utilisent D3.js ou Mapbox GL JS. 3b:[{"id":"ba8293be11ee6c07e3d901f7bc34acdfc4bd929f87b9123711a54d735828d2a8522d52f1b4cbbddc63aaddfd4260f266edd601a8f464169184e82e35b8b02857","href":"https://static.observableusercontent.com/files/ba8293be11ee6c07e3d901f7bc34acdfc4bd929f87b9123711a54d735828d2a8522d52f1b4cbbddc63aaddfd4260f266edd601a8f464169184e82e35b8b02857","name":"banner.png","type":"image/png","lastModified":1738581181319.476,"size":600960},{"id":"9dd7819dfe31073f9908d0b8b31227b6cfdc338b15308f20129bfe306004a1f3d9c2ccbcf3cf5e9e7e5c660e0fd72bcd4f07d249d41360f65d1989c9d6db1ca5","href":"https://static.observableusercontent.com/files/9dd7819dfe31073f9908d0b8b31227b6cfdc338b15308f20129bfe306004a1f3d9c2ccbcf3cf5e9e7e5c660e0fd72bcd4f07d249d41360f65d1989c9d6db1ca5","name":"data-prefecture.gpkg","type":"application/x-sqlite3","lastModified":1738669619335.695,"size":2019328},{"id":"4c8f43064b5dddd58d20fd0c539ace4d4a4d601d77c722ccfbd284abe69be34abaf5300cebc954bff9a77b5695c394d310971cc9cdc5f9a3ea1a964c194fd49d","href":"https://static.observableusercontent.com/files/4c8f43064b5dddd58d20fd0c539ace4d4a4d601d77c722ccfbd284abe69be34abaf5300cebc954bff9a77b5695c394d310971cc9cdc5f9a3ea1a964c194fd49d","name":"Oswald-Medium.ttf","type":"font/ttf","lastModified":1738313187457.666,"size":87596},{"id":"0d277450ad648743c97b1a1163f13dbcdcef0867a353f4602b00766112ecf357202f15182dc1f67e1df83bad7ac7990294b310d25e401d99680458717c2f1312","href":"https://static.observableusercontent.com/files/0d277450ad648743c97b1a1163f13dbcdcef0867a353f4602b00766112ecf357202f15182dc1f67e1df83bad7ac7990294b310d25e401d99680458717c2f1312","name":"Roboto-Regular.ttf","type":"font/ttf","lastModified":1738313182701.029,"size":168260},{"id":"dd396cc044f9e041fd343c16a9e92e11d353dd784320d4130bde54009cec0a3491e4d18af3815fe9b97388c05995810c8d5a467a30379a11923b86c4fe7750b9","href":"https://static.observableusercontent.com/files/dd396cc044f9e041fd343c16a9e92e11d353dd784320d4130bde54009cec0a3491e4d18af3815fe9b97388c05995810c8d5a467a30379a11923b86c4fe7750b9","name":"Boogaloo-Regular.ttf","type":"font/ttf","lastModified":1738313191165.275,"size":31776},{"id":"5a509ff1b65d7729dca403e514bfcfcbf1cdeba449c293f729c08769567af10d3041e1c70741e77058189a4bd378c6940e83e224906dd28fc675147be07429ce","href":"https://static.observableusercontent.com/files/5a509ff1b65d7729dca403e514bfcfcbf1cdeba449c293f729c08769567af10d3041e1c70741e77058189a4bd378c6940e83e224906dd28fc675147be07429ce","name":"d3js-logo.svg","type":"image/svg+xml","lastModified":1738588268647.796,"size":1387},{"id":"6e0bf730878c7dd9294a7b3e020149d6a09a30caa5973ac4ae7d2827e850a21a96a5d8bdf171530a8feb80f6426311dbce1b8b3fb50c238a1c38a94efd178499","href":"https://static.observableusercontent.com/files/6e0bf730878c7dd9294a7b3e020149d6a09a30caa5973ac4ae7d2827e850a21a96a5d8bdf171530a8feb80f6426311dbce1b8b3fb50c238a1c38a94efd178499","name":"plot-logo.svg","type":"image/svg+xml","lastModified":1738588339316.927,"size":2224},{"id":"397254501d62d5b1a439018f1b705da854e33ad083bbc68ac68094da2bb96c273e8e4c4509d94bc2b973f75e28e11f59d8cd2d47497c809979d83d1aad851a34","href":"https://static.observableusercontent.com/files/397254501d62d5b1a439018f1b705da854e33ad083bbc68ac68094da2bb96c273e8e4c4509d94bc2b973f75e28e11f59d8cd2d47497c809979d83d1aad851a34","name":"geoviz-logo.jpeg","type":"image/jpeg","lastModified":1738588635732.438,"size":9875},{"id":"892af6af59cfd06cbf0129ceb071898dd29bb4a4083a36c8bb384961d23c5351e729a369ace8de7d795a0adfd43481716a437c056a251772a53aa8a0ff064a7a","href":"https://static.observableusercontent.com/files/892af6af59cfd06cbf0129ceb071898dd29bb4a4083a36c8bb384961d23c5351e729a369ace8de7d795a0adfd43481716a437c056a251772a53aa8a0ff064a7a","name":"turf-logo.svg","type":"image/svg+xml","lastModified":1738589169811.729,"size":1299},{"id":"ef7532a2a844a94d152c8a568d174bb409102ea80de02554225032c1959027fdc9aa911edad953b678cff64fde6cfd117af5df49fa7b6b90fbfa88f53571ed63","href":"https://static.observableusercontent.com/files/ef7532a2a844a94d152c8a568d174bb409102ea80de02554225032c1959027fdc9aa911edad953b678cff64fde6cfd117af5df49fa7b6b90fbfa88f53571ed63","name":"gdal-logo.svg","type":"image/svg+xml","lastModified":1738589246498.668,"size":12367},{"id":"3668b3c202ce03b196ff12e8940bcfa594d8f978756a37c5f4c5a199e1974b20f6c7d14d26fc1d9192aa97947e56224885ad0d0c106339087be0893f56e8b95f","href":"https://static.observableusercontent.com/files/3668b3c202ce03b196ff12e8940bcfa594d8f978756a37c5f4c5a199e1974b20f6c7d14d26fc1d9192aa97947e56224885ad0d0c106339087be0893f56e8b95f","name":"geos-logo.png","type":"image/png","lastModified":1738589357248.598,"size":1828}] 30:{"id":"3eb25b25bc803e1a","slug":"ecosysteme-javascript-pour-la-geovisualisation-et","title":"Écosystème JavaScript pour la géovisualisation et la datavisualisation","thumbnail":"805e75655ecea75cfaba79297f25ff749ec3a709cdd3f37ba9838b4b518933be","access_level":"public","create_time":"$D2025-01-31T08:44:50.533Z","update_time":"$D2026-01-14T09:13:02.033Z","view_time":null,"first_public_time":"$D2025-02-06T07:57:57.496Z","fork":false,"stars":1,"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":698,"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":2,"collection":{"id":"977152c873ca6766","slug":"cours","title":"Cours","owner":{"id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS"}},"type":"notebook","body":{"title":"Écosystème JavaScript pour la géovisualisation et la datavisualisation","cells":[{"id":0,"value":"# Écosystème JavaScript pour la géovisualisation et la datavisualisation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":16,"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":22,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":297,"value":"myGeopackage = FileAttachment(\"data-prefecture.gpkg\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":334,"value":"getDatasetInfo = async (fileOrFiles, params = { opts: [], openOpts: []}) => {\n const openOptions = params.openOpts || [];\n const input = await Gdal.open(fileOrFiles, openOptions);\n const result = Gdal.ogrinfo(input.datasets[0])\n await Gdal.close(input);\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":293,"value":"toGeoJSON = async (fileOrFiles, params = { opts: [], openOpts: []}) => {\n const openOptions = params.openOpts || [];\n const input = await Gdal.open(fileOrFiles, openOptions);\n const options = [\n '-f', 'GeoJSON',\n '-t_srs', 'EPSG:4326',\n ].concat(params.opts || []);\n const output = await Gdal.ogr2ogr(input.datasets[0], options);\n const bytes = await Gdal.getFileBytes(output);\n await Gdal.close(input);\n return JSON.parse(new TextDecoder().decode(bytes));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":304,"value":"infoGpkg = getDatasetInfo(myGeopackage)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":343,"value":"Les couches ont pour noms :
${infoGpkg.layers.map((d) => `- ${d.name}`).join('
')}","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":355,"value":"Pour récupérer seulement la couche \"prefecture\" on peut utiliser les fonctionnalités de `ogr2ogr` pour la sélectionner: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":301,"value":"toGeoJSON(myGeopackage, { opts: ['-nln', 'prefecture', '-sql', `SELECT * FROM \"prefecture\"`]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":289,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":518,"value":"viewof k = Inputs.range([0.01, 1], { label: \"k\", step: 0.01, value: 0.05 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":535,"value":"map_simplify","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":540,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":29,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":469,"value":"Les bibliothèques JavaScript pour la visualisation de données sont nombreuses :\n\n- [Plotly](https://plotly.com/javascript/) (également disponible en R et Python)\n- [Chart.js](https://www.chartjs.org/) (simple à utiliser, plus limitée que d'autres)\n- [Vega](https://vega.github.io/vega/) et [Vega-lite](https://vega.github.io/vega-lite/) (grammaire des graphiques, spécification déclarative de visualisation - Vega est plus flexible et puissante, tandis que Vega-Lite est plus simple et rapide à utiliser pour des visualisations de base)\n- [AntV](https://antv.vision/en) (une suite de bibliothèques de visualisation maintenue par Ant Group et particulièrement populaire en Chine)\n- etc.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":90,"value":"### Comparaison D3 / Plot / Chart.js\n\nÀ titre d'exemple, réalisons le même diagramme à barres avec 3 bibliothèques ayant une philosophie différente : Chart.js, Plot et D3.js.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":97,"value":"data = [\n { month: 'January', value: 650 },\n { month: 'February', value: 570 },\n { month: 'March', value: 800 },\n { month: 'April', value: 820 },\n { month: 'May', value: 500 },\n { month: 'June', value: 530 },\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":98,"value":"{\n const canvas = document.createElement('canvas');\n \n new chartjs.Chart(canvas, {\n type: 'bar',\n data: {\n labels: data.map((d) => d.month),\n datasets: [{\n data: data.map((d) => d.value),\n backgroundColor: [\n 'rgba(255, 99, 132, 0.8)',\n 'rgba(255, 159, 64, 0.8)',\n 'rgba(255, 205, 86, 0.8)',\n 'rgba(75, 192, 192, 0.8)',\n 'rgba(54, 162, 235, 0.8)',\n 'rgba(153, 102, 255, 0.8)'\n ],\n label: 'Number of kilometers'\n }]\n },\n options: {\n scales: {\n y: {\n beginAtZero: true,\n }\n },\n plugins: {\n title: {\n display: true,\n text: 'Un exemple de graphique avec Chart.js'\n }\n }\n }\n })\n\n return canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"Plot.plot({\n grid: true,\n width: 800,\n title: 'Un example de graphique avec Plot',\n x: { label: null },\n y: { label: 'Number of kilometers' },\n marks: [\n Plot.barY(data, {x: 'month', y: 'value', fill: 'month', fillOpacity: 0.5, stroke: 'month', sort: { x: null }})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":127,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":26,"value":"

\n\n## Géovisualisation\n\nLe choix d'une bibliothèque pour la visualisation de données géospatiales va dépendre de plusieurs paramètres :\n\n- quel volume de données à afficher ? (a un impact sur le choix de la technologie utilisée, SVG vs. Canvas vs. WebGL)\n- quel(s) type(s) de représentation mettre en oeuvre ?\n- quel \"style\" doit avoir la visualisation à créer ? (plutôt proche de la cartographie thématique ou plutôt proche des représentations généralement utilisées pour les grands volumes de données ?)\n- utilisation d'un fond de carte tuilé ou non ?\n- quel temps consacré à la création de la visualisation ?\n- quel public ? (publication pour un large public ou carte à visée exploratoire dans le cadre d'un projet ?)\n- etc.\n\n### D3.js\n\nLes points forts de D3.js évoqués plus haut s'appliquent également au géospatial. D3.js propose également de nombreuses projections cartographiques, regardez la liste ci-dessous :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":250,"value":"viewof projection = projectionInput({\n name: \"projection\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":262,"value":"{\n button;\n projection.rotate([0,0,0]);\n return map(projection, projection.options);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":567,"value":"viewof button = Inputs.button(\"Reset rotation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":638,"value":"Ces projections peuvent être personnalisées (rotations des axes *lambda*, *phi* et *gamma*, choix du (ou des) parallèle(s) de référence le cas échéant, etc.). Enfin, il est possible d'utiliser conjointement D3.js et Proj4.js (voir plus haut) pour utiliser d'autres projections que celles directement supportées par D3.js.\n\n**Repository** : https://github.com/d3/d3\n\n**Documentation** : https://d3js.org/\n\n### Deck.gl\n\n

\n\n\ndeck.gl est une bibliothèque pour l'analyse visuelle exploratoire de grands ensembles de données. Elle a la spécificité d'utiliser le GPU (grâce à la technologie WebGL) pour permettre de visualiser de grands ensembles de données de manière performante.\n\n**Repository** : https://github.com/visgl/deck.gl\n\n**Documentation** : https://deck.gl/docs/api-reference/core/deck\n\n**Exemples** : https://deck.gl/showcase et https://deck.gl/examples\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":244,"value":"$37","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":437,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":430,"value":"### Geoviz\n\n

\n\nGeoviz est une bibliothèque basée sur D3.js, permettant de créer des cartes thématiques interactives (*zoom/pan*, *tooltip*, couplage facile avec des `Inputs` d'Observable).\n\nElle produit des cartes au format SVG.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":280,"value":"demo","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"Regardez également le notebook suivant https://observablehq.com/@neocartocnrs/dying-to-get-to-europe pour un exemple de carte thématique créée avec `geoviz` et personnalisable à l'aide de différents sélecteurs.\n\n**Repository** : https://github.com/riatelab/geoviz\n\n**Documentation** : https://riatelab.github.io/geoviz/\n\n**Exemples** : https://observablehq.com/@neocartocnrs/geoviz\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":678,"value":"### Gridviz\n\nGridviz est une bibliothèque permettant de représenter des données carroyées (données décrites par une grille régulière). Sa force réside dans le choix des [styles](https://github.com/eurostat/gridviz/blob/master/docs/gallery.md) qui sont offerts (*heatmap*, Lego, Mosaic, JoyPlot, Tanaka, *dot density*, etc.) ainsi que dans la possibilité d'adapter la résolution de la grille affichée lors du zoom / dézoom.\n\n\n\n**Repository** : https://github.com/eurostat/gridviz/\n\n**Documentation** : https://eurostat.github.io/gridviz/\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":671,"value":"### Three.js\n\nThree.js est une bibliothèque pour créer des visualisations graphiques (principalement en 3D) basées sur WebGL. Elle n'est pas dédiée à la visualisation de données géospatiales, mais elle peut-être utilisée pour cette finalité (réalisation de *space-time cube* interactif, drapage d'un raster sur un MNT, etc.).\n\nLa bibliothèque three.js peut également être utilisée conjointement avec Mapbox GL JS / Maplibre GL JS (cf. exemple [Adding 3D models using three.js on terrain](https://maplibre.org/maplibre-gl-js/docs/examples/adding-3d-models-using-threejs-on-terrain/)).\n\n- Exemple de création d'un cube spatio-temporel avec Three.js.\n- Exemple de création d'un cube spatio-temporel avec Three.js.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":381,"value":"**Repository** : https://github.com/mrdoob/three.js/\n\n**Documentation & exemples** : https://threejs.org/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":662,"value":"canvas","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":423,"value":"$39","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":198,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":19,"value":"

\n\n### *Appendix*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":95,"value":"chartjs = require('chart.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":3,"value":"addFonts([\n {\n fontFamily: \"Oswald\",\n url: await FileAttachment(\"Oswald-Medium.ttf\").url(),\n style: \"normal\",\n weight: \"normal\",\n stretch: \"normal\"\n },\n {\n fontFamily: \"Roboto\",\n url: await FileAttachment(\"Roboto-Regular.ttf\").url(),\n style: \"normal\",\n weight: \"normal\",\n stretch: \"normal\"\n },\n {\n fontFamily: \"Boogaloo\",\n url: await FileAttachment(\"Boogaloo-Regular.ttf\").url(),\n style: \"normal\",\n weight: \"normal\",\n stretch: \"normal\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"import { addFonts } from '@jakoblistabarth/load-custom-fonts'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":237,"value":"import {projectionInput} from \"@fil/d3-projections\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":258,"value":"import {map} from \"@fil/base-map\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":269,"value":"import {demo} from '@neocartocnrs/geoviz'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"path = 'https://cdn.jsdelivr.net/npm/gdal3.js@2.8.1/dist/package';","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"pathSuffix = ''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":321,"value":"useWorker = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":311,"value":"initGdalJs = require.alias({fs: {}, path: {}, string_decoder: {}})(`${path}/gdal3${pathSuffix}.js`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":312,"value":"// See https://talk.observablehq.com/t/unable-to-import-gdal3-js-a-gdal-port/6732/4 for an explanation\nGdal = new Proxy(await initGdalJs({paths, useWorker}), {\n get(target, prop, receiver) {\n if(prop === 'next' || prop === 'then' || prop === 'return') return;\n return Reflect.get(target, prop, receiver);\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":314,"value":"paths = ({\n js: await makeLocal(`${path}/gdal3${pathSuffix}.js`),\n wasm: `${path}/gdal3WebAssembly.wasm`,\n data: `${path}/gdal3WebAssembly.data`,\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":326,"value":"async function makeLocal(url, {type = 'text/javascript', patch = s => s} = {}) {\n const src = await (await fetch(url)).text();\n return URL.createObjectURL(new Blob([patch(src)], {type: 'text/javascript'}));\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":428,"value":"maplibregl = {\n const [module, styleURL] = await Promise.all([\n require(\"maplibre-gl@5.1.0\"),\n require.resolve(\"maplibre-gl@5.1.0/dist/maplibre-gl.css\"),\n ]);\n const style = document.head.appendChild(html``);\n invalidation.then(() => style.remove());\n return module;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":501,"value":"import { previews } from \"@d3/gallery\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":502,"value":"import {map1 as map_simplify} with { k as k } from \"@neocartocnrs/simplify\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"import { canvas, canvas2 } from '@laotzunami/three-js-templates'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 31:"$30:body"