30:T8d5,sommaire = { var dom = html`

`; var shadow = dom.shadowRoot || dom.attachShadow({ mode: "open" }); var reveal = html`

🗺️

Construire des cartes réactives pour le Web avec Observable JavaScript

Nicolas Lambert, CNRS - UAR RIATE
observablehq.com/@neocartocnrs

Observable

Une plateforme de notebooks en ligne

Le JavaScript

R, Python, etc. Mais pourquoi par le langage JavaScript pour l'analyse de données ?

Du SIG dans le navigateur

Il est possible de faire des géotraitements SIG directement sur votre page web.

Cartographier avec Bertin

bertin.js est une bibliothèque JavaScript qui permet de réaliser des cartes thématiques pour le web.

Cartographier avec geoviz

geoviz.js est une nouvelle bibliothèque qui permet de réaliser des cartes thématiques zoomables pour le web.

Cette présentation est disponible
à l'adresse suivante :

https://observablehq.com/@neocartocnrs/mtd

`; shadow.appendChild(reveal); var deck = new Reveal(reveal, { embedded: true }); deck.initialize(); return dom; }31:[{"id":"0121fb7b1107cb84f05457853bdc8b1d07bb5a6f9f76984a9b8c11ae1faca39d3e2726de04a4f5a56c24a56c285b26b0101b06825fa5d5d70cf9af5b9e591a1c","href":"https://static.observableusercontent.com/files/0121fb7b1107cb84f05457853bdc8b1d07bb5a6f9f76984a9b8c11ae1faca39d3e2726de04a4f5a56c24a56c285b26b0101b06825fa5d5d70cf9af5b9e591a1c","name":"js.png","type":"image/png","lastModified":1727876544461.682,"size":1992},{"id":"9881817dd7287c09146f29145a56b596c026fdf02b0505d2b2ebd9c42f00f1108b063f18087b5cc89c55467bdbf6daaf7d00057f313ced65f175394ba3046923","href":"https://static.observableusercontent.com/files/9881817dd7287c09146f29145a56b596c026fdf02b0505d2b2ebd9c42f00f1108b063f18087b5cc89c55467bdbf6daaf7d00057f313ced65f175394ba3046923","name":"geogis.jpeg","type":"image/jpeg","lastModified":1727876622320.801,"size":3343},{"id":"81d7178789d2ec43327c5f8df8a457b2c83fa96ae6794a8a1be51cabea5657c24f229cb6b360facf67ee1a7f21506d4e1e5fb3f7cf054a2e492143e5eeef7e35","href":"https://static.observableusercontent.com/files/81d7178789d2ec43327c5f8df8a457b2c83fa96ae6794a8a1be51cabea5657c24f229cb6b360facf67ee1a7f21506d4e1e5fb3f7cf054a2e492143e5eeef7e35","name":"observable.png","type":"image/png","lastModified":1727163512180.376,"size":6871},{"id":"ea6db671f542f17cc84476b6fab70bf49237606d8ca58007620d3c1c1a9de14647acf55eea3551c1c1dca6b45d967ce33313a379efbf9f7ea90ebf7249ac6035","href":"https://static.observableusercontent.com/files/ea6db671f542f17cc84476b6fab70bf49237606d8ca58007620d3c1c1a9de14647acf55eea3551c1c1dca6b45d967ce33313a379efbf9f7ea90ebf7249ac6035","name":"link.png","type":"image/png","lastModified":1727164097353.15,"size":5284},{"id":"397254501d62d5b1a439018f1b705da854e33ad083bbc68ac68094da2bb96c273e8e4c4509d94bc2b973f75e28e11f59d8cd2d47497c809979d83d1aad851a34","href":"https://static.observableusercontent.com/files/397254501d62d5b1a439018f1b705da854e33ad083bbc68ac68094da2bb96c273e8e4c4509d94bc2b973f75e28e11f59d8cd2d47497c809979d83d1aad851a34","name":"geoviz.jpg","type":"image/jpeg","lastModified":1727366089060.106,"size":9875},{"id":"042613bd6b453c3cdc5d50bc4142e81722b272b4eed1c9822313d89270a209495126018881da1953349e65808678e70f0c1a31f4957ed313f3c25eb4aa18be11","href":"https://static.observableusercontent.com/files/042613bd6b453c3cdc5d50bc4142e81722b272b4eed1c9822313d89270a209495126018881da1953349e65808678e70f0c1a31f4957ed313f3c25eb4aa18be11","name":"30ans_mtd.png","type":"image/png","lastModified":1727429760280.052,"size":215239},{"id":"9777e6215fef3e41119464422718684cbb79074107f2cca5e64fd0a98fb18fc92e28127d7e66a887c9b2b50588df7bea531a462843bddb9ba1b7bfc59cc34791","href":"https://static.observableusercontent.com/files/9777e6215fef3e41119464422718684cbb79074107f2cca5e64fd0a98fb18fc92e28127d7e66a887c9b2b50588df7bea531a462843bddb9ba1b7bfc59cc34791","name":"geotoolbox.svg","type":"image/svg+xml","lastModified":1727432132764.915,"size":78597},{"id":"8ddcbe0da396cd3c8a489f0c0942c29024c79456d8660ac0ae9e0b323676409c987c4d8ad4e76fa1d120707e24f6269597ed92efd92da57ce2865d5956dacb71","href":"https://static.observableusercontent.com/files/8ddcbe0da396cd3c8a489f0c0942c29024c79456d8660ac0ae9e0b323676409c987c4d8ad4e76fa1d120707e24f6269597ed92efd92da57ce2865d5956dacb71","name":"observable@1.png","type":"image/png","lastModified":1727432442210.854,"size":6113},{"id":"d8ea56833d15df6fab77244f296a5f1a5e1c635e81601b3902cfe35b7681f59968827b70f2aa2e16ec5341fa6e2e1ddd50bf7a78cf12912ff361026e63392ab3","href":"https://static.observableusercontent.com/files/d8ea56833d15df6fab77244f296a5f1a5e1c635e81601b3902cfe35b7681f59968827b70f2aa2e16ec5341fa6e2e1ddd50bf7a78cf12912ff361026e63392ab3","name":"bertin.png","type":"image/png","lastModified":1727432780712.058,"size":71840},{"id":"8c3659aa09af2c0f77bc6298207749e9c3e740144d3648bd326d9dcd8c832e50d75298b1101eb28eaf9e54f8348af94404a20bcca73d59523bda19b55e2204b0","href":"https://static.observableusercontent.com/files/8c3659aa09af2c0f77bc6298207749e9c3e740144d3648bd326d9dcd8c832e50d75298b1101eb28eaf9e54f8348af94404a20bcca73d59523bda19b55e2204b0","name":"geoverview.svg","type":"image/svg+xml","lastModified":1727433246490.771,"size":150398},{"id":"47081f76a7a278c44455c018538dd81c4b36f1a169da6c60fddd2ed40094becc6eb2efa43d965353cd4440f485e25b8cd7c49717fa87bccabd8623b0409ae6a2","href":"https://static.observableusercontent.com/files/47081f76a7a278c44455c018538dd81c4b36f1a169da6c60fddd2ed40094becc6eb2efa43d965353cd4440f485e25b8cd7c49717fa87bccabd8623b0409ae6a2","name":"geocountries.svg","type":"image/svg+xml","lastModified":1727433344151.901,"size":83966},{"id":"dcd43eca3f4f26ac0536bf707f9a836ee0245962b61634c68b72e84af775c9b53f2fa8af244ccb1cdec69e4e221797874ab206a5a800829a71f0a367ab217040","href":"https://static.observableusercontent.com/files/dcd43eca3f4f26ac0536bf707f9a836ee0245962b61634c68b72e84af775c9b53f2fa8af244ccb1cdec69e4e221797874ab206a5a800829a71f0a367ab217040","name":"statsbreaks.svg","type":"image/svg+xml","lastModified":1727433632760.07,"size":21063},{"id":"23867eb9990855a2dc59a390a2182e7357ef682740b4028e1f0fefc089c55afd7468b15a57b39a1c40c161df2e170e642413ea5b0e4d2322848adc073fdcad1f","href":"https://static.observableusercontent.com/files/23867eb9990855a2dc59a390a2182e7357ef682740b4028e1f0fefc089c55afd7468b15a57b39a1c40c161df2e170e642413ea5b0e4d2322848adc073fdcad1f","name":"dicopal.webp","type":"image/webp","lastModified":1727433865095.012,"size":57596},{"id":"1618e8367af7c85ba97d11cfcaac40e7a22a8d40a6dc1fbb00e94cd28f336d714f455103dd813fa98e07cfbc52cd5fcf9eb59dea102309891c0bfd52dab0e0b2","href":"https://static.observableusercontent.com/files/1618e8367af7c85ba97d11cfcaac40e7a22a8d40a6dc1fbb00e94cd28f336d714f455103dd813fa98e07cfbc52cd5fcf9eb59dea102309891c0bfd52dab0e0b2","name":"gocart.jpeg","type":"image/jpeg","lastModified":1727434000787.49,"size":9169}] 2e:{"title":"Construire des cartes réactives pour le Web avec Observable JavaScript","cells":[{"id":0,"value":"# Construire des cartes réactives pour le Web avec `Observable JavaScript`","pinned":false,"hidden":false,"mode":"md"},{"id":233,"value":"FileAttachment(\"30ans_mtd.png\").image({ width: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"Dans le cadre des 30 ans de la MTD, les différents organismes de la Maison de la TéléDétection organisent une journée dédiée à la Science Ouverte. https://30ans-mtd.github.io/dataparty","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"*Nicolas Lambert, 3 novembre 2024*","pinned":false,"hidden":false,"mode":"md"},{"id":514,"value":"{\n const button = html``;\n button.onclick = () => sommaire.parentElement.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"## Observable","pinned":false,"hidden":false,"mode":"md"},{"id":321,"value":"FileAttachment(\"observable@1.png\").image({ height: 100 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"L’Observable javascript (ou ojs) est un ensemble d’améliorations apportées à vanilla JavaScript créé par **Mike Bostock** (également auteur de **d3js** (2011). Le but : faire du langage JavaScript un outil pour l'**analyse** interactive, l’**exploration** et la **représentation** de données.","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"**ObservableHQ** c’est aussi C’est aussi une startup américaine fondée par Mike Bostock et Melody Meckfessel en 2016, qui développe une plateforme web 1OO% en ligne pour concevoir, partager et diffuser des **notebooks** JavaScript, avec un focus sur la visualisation de données.","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"add(\n \"Observable Kezako ?\",\n \"https://observablehq.com/@neocartocnrs/observable-kezako?collection=@neocartocnrs/observable-cest-quoi\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"## Des bibliothèques de carto/SIG","pinned":false,"hidden":false,"mode":"md"},{"id":56,"value":"Au [RIATE](https://riate.cnrs.fr/), nous développons des bibliothèques JavaScript dans le but d'enrichir l'écosystème spatial disponible dans les notebooks Observable (mais pas que). Voici quelques exemples. ","pinned":false,"hidden":false,"mode":"md"},{"id":488,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":347,"value":"FileAttachment(\"bertin.png\").image({ height: 130 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":339,"value":"**`bertin.js`** est une bibliothèque JavaScript pour la cartographie thématique. De nompreux types de cartes slont proposées, tous accessible à travers une unique fonction.","pinned":false,"hidden":false,"mode":"md"},{"id":353,"value":"add(\n \"Faire des cartes avec bertin.js\",\n \"https://observablehq.com/@neocartocnrs/faire-des-cartes-avec-bertin\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":290,"value":"geoviz = FileAttachment(\"geoviz.jpg\").image({ height: 100 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":492,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":67,"value":"**`geoviz`** est une bibliothèque JavaScript en développement basée sur d3 pour concevoir des cartes thématiques. La bibliothèque fournit un ensemble de fonctions compatibles avec d3 que vous pouvez mélanger avec la syntaxe d3 habituelle.","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"add(\n \"Faire des cartes avec geoviz\",\n \"https://observablehq.com/@neocartocnrs/faire-des-cartes-avec-geoviz?collection=@neocartocnrs/observable-cest-quoi\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":494,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":304,"value":"geotoolbox = FileAttachment(\"geotoolbox.svg\").image({ height: 130 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":266,"value":"**geotoolbox** est une bibliothèque SIG basée sur **d3-geo**, **topojson** et **geos-wasm**. Elle permet de traiter simplement les propriétés geojson et fournit plusieurs opérations SIG utiles pour la cartographie thématique.","pinned":false,"hidden":false,"mode":"md"},{"id":270,"value":"add(\n \"Hello geotoolbox\",\n \"https://observablehq.com/@neocartocnrs/faire-du-sig-dans-la-navigateur?collection=@neocartocnrs/observable-cest-quoi\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":366,"value":"## Autres bibliothèques","pinned":false,"hidden":false,"mode":"md"},{"id":510,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":370,"value":"FileAttachment(\"geoverview.svg\").image({ height: 130 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":362,"value":"Basé sur maplibre-gl, **`geoverview`** est un outil qui permet d'afficher de n'importe quel geojson (et des informations qu'il contient). ","pinned":false,"hidden":false,"mode":"md"},{"id":376,"value":"add(\"Geoverview\", \"https://observablehq.com/@neocartocnrs/geoverview\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":389,"value":"geocountries = FileAttachment(\"geocountries.svg\").image({ height: 130 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":500,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":394,"value":"**`geocountries`** est un petit outil permetant d'obtenir les codes ISO à partir des noms de pays. La méthode est basée sur la distance de Levenshtein.","pinned":false,"hidden":false,"mode":"md"},{"id":397,"value":"add(\"Hello Geocountries\", \"https://observablehq.com/@neocartocnrs/geocountries\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":502,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":404,"value":"statsbreaks = FileAttachment(\"statsbreaks.svg\").image({ height: 130 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":408,"value":"**`statsbreaks`** est une library JavaScript dont l'objectif est de diviser (classer/discrétiser) un ensemble de données quantitatives en un (k) nombre de classes.","pinned":false,"hidden":false,"mode":"md"},{"id":411,"value":"add(\n \"Hello statsbreaks\",\n \"https://observablehq.com/@neocartocnrs/hello-statsbreaks\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":425,"value":"dicopal = FileAttachment(\"dicopal.webp\").image({ height: 100 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":86,"value":"**`dicopal`** est une bibliothèque JavaScript développée par Matthieu Viry qui fournit des centaines de palettes de couleurs. Elle est basée sur Colorbrewer2, CARTOColors, cmocean, Matplotlib, MyCarta, Tableau, (CUD) palette et bien d'autres...","pinned":false,"hidden":false,"mode":"md"},{"id":421,"value":"add(\"Hello dicopal\", \"https://observablehq.com/@neocartocnrs/dicopal-library\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":433,"value":"gocart = FileAttachment(\"gocart.jpeg\").image({ height: 100 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"**`Go-cart-wasm`** est une bibliothèque JS/WASM développée par Matthieu Viry permettant de réaliser des cartogrammes selon la méthode Gastner, Seguy, et More (2018). ","pinned":false,"hidden":false,"mode":"md"},{"id":439,"value":"add(\"go-cart-wasm\", \"https://observablehq.com/@neocartocnrs/go-cart-wasm\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":217,"value":"*Aller plus loin*","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":"add(\n \"L'écosystème spatial du JavaScript\",\n \"https://observablehq.com/@neocartocnrs/lecosysteme-spatial-du-javascript?collection=@neocartocnrs/observable-cest-quoi\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"

Annexes

","pinned":false,"hidden":false,"mode":"md"},{"id":534,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":517,"value":"Reveal = require(\"reveal.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":164,"value":"function add(text, url) {\n return html`

${text}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"link = FileAttachment(\"link.png\").url()","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}