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

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

🌏 🌐 🗺️ 📊

Analyser et représenter des données dans le navigateur avec Observable

Nicolas Lambert, CNRS - UAR RIATE
INED - 8 JANVIER 2024

Le JavaScript

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

Observable

L’Observable javascript (ou ojs) est un ensemble d’améliorations apportées à vanilla JavaScript

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 :

observablehq.com/@neocartocnrs/ined

`; shadow.appendChild(reveal); var deck = new Reveal(reveal, { embedded: true }); deck.initialize(); return dom; }31:T47d,bertin.draw({ params: { projection: "InterruptedSinusoidal" }, // Paramètres généraux (marges, projection, etc.) layers: [ { type: "header", text: "La population mondiale" }, // Titre { type: "footer", text: "Fait avec bertin.js", anchor: "middle" }, // Source // COUCHE 1 (cercles) { type: "bubble", geojson: world, // géometrie k: radiusmax, values: "pop", // variable fill: "#b566ac", // couleur des cercles stroke: "white", // couleur de contour des cercles strokeWidth: 0.5, // épaisseur tooltip: ["$name", "$pop"], // Infobulle leg_x: 20, // position de la légende (x) leg_y: 250, // position de la légende (y) leg_title: "Population des\npays en 2000", // Titre de la légende leg_round: -3 // arrondi }, // COUCHE 1 (pays) { geojson: world, // géométrie fill: "white", // couleur de fond stroke: "none", // cauleur de contour (aucun) fillOpacity: 0.5 // Opacité }, { type: "graticule" }, // Lignes de latitude et longitude { type: "outline" } // coutour de la Terre dans la projection ] })32:[{"id":"9d3904fa12baa09ed02a86894c0b24ff5407b024e0a3aac4fa53e3884e8c79f9d91a60e3d5a0e09c627e19b5f6157878c0f46b790b4048fa50d67e25676912e2","href":"https://static.observableusercontent.com/files/9d3904fa12baa09ed02a86894c0b24ff5407b024e0a3aac4fa53e3884e8c79f9d91a60e3d5a0e09c627e19b5f6157878c0f46b790b4048fa50d67e25676912e2","name":"trendings.png","type":"image/png","lastModified":1702889276752.184,"size":745089},{"id":"a2a201157757caab34fcc6ce80fa64abec5e2aa520b51def2c145ec066783004e561e7429a17a02f291ce77bb0f4b82b5531324b9d84ca19c9519f0ca180bc5b","href":"https://static.observableusercontent.com/files/a2a201157757caab34fcc6ce80fa64abec5e2aa520b51def2c145ec066783004e561e7429a17a02f291ce77bb0f4b82b5531324b9d84ca19c9519f0ca180bc5b","name":"observable.png","type":"image/png","lastModified":1702889276752.184,"size":22025},{"id":"42b2eedbd8af6427050ac874341b9721fb82d2ae345e5d42aabc1a03db1740da234fba6e4ea2e59caca5553cee20a4bc4a2d8796d65b6d14520b3755bff4e887","href":"https://static.observableusercontent.com/files/42b2eedbd8af6427050ac874341b9721fb82d2ae345e5d42aabc1a03db1740da234fba6e4ea2e59caca5553cee20a4bc4a2d8796d65b6d14520b3755bff4e887","name":"frise.png","type":"image/png","lastModified":1702889276752.184,"size":60522},{"id":"d2855d3e9abf61feceffe806eba7cb2a23cd8d04b7949bdd8f07454b46c0bbeae5ee7db0c0c3126f69faf299a94bf387f25dba70fc765670f6e7f15d5d6a6125","href":"https://static.observableusercontent.com/files/d2855d3e9abf61feceffe806eba7cb2a23cd8d04b7949bdd8f07454b46c0bbeae5ee7db0c0c3126f69faf299a94bf387f25dba70fc765670f6e7f15d5d6a6125","name":"teams.png","type":"image/png","lastModified":1702889276752.184,"size":14498},{"id":"d850b6e291848ee8a3e15122f2057670d63155e58f3206117744f142fedb426d8910e71d6d0693a1793c5ce9ea25bd5e324b791b16351d793f81d23cf3f0d471","href":"https://static.observableusercontent.com/files/d850b6e291848ee8a3e15122f2057670d63155e58f3206117744f142fedb426d8910e71d6d0693a1793c5ce9ea25bd5e324b791b16351d793f81d23cf3f0d471","name":"huma.png","type":"image/png","lastModified":1702889276752.184,"size":219391},{"id":"70ec7e5c2ac0c5ea2ad5657e3cbd54529dcbdc5e6a4b0eefc002d17a39de9d88fee4b7d3eb5d7fdb239d0b140d90128b0f91f04ce7ba30d7b76af4c785986358","href":"https://static.observableusercontent.com/files/70ec7e5c2ac0c5ea2ad5657e3cbd54529dcbdc5e6a4b0eefc002d17a39de9d88fee4b7d3eb5d7fdb239d0b140d90128b0f91f04ce7ba30d7b76af4c785986358","name":"Screenshot from 2023-10-13 10-43-13.png","type":"image/png","lastModified":1702889276752.184,"size":70776},{"id":"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4","href":"https://static.observableusercontent.com/files/bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4","name":"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4.jpeg","type":"image/jpeg","lastModified":1702889276752.184,"size":102662},{"id":"37a9ac7e0150c5785a8bb5ad16b97e510950fc4a0471c3a51392cd69ce3b91318b444e25d5dc95b8702583f77f9c1da4cc6b975aa2b07c0c0fee2616dfc2cfb5","href":"https://static.observableusercontent.com/files/37a9ac7e0150c5785a8bb5ad16b97e510950fc4a0471c3a51392cd69ce3b91318b444e25d5dc95b8702583f77f9c1da4cc6b975aa2b07c0c0fee2616dfc2cfb5","name":"topo.png","type":"image/png","lastModified":1702889276752.184,"size":187102},{"id":"2d02269f009c8e9fd351b93f4344ae2f42d267e3577a3bbaf1d0d320c973e54f2de95ad6bd2c6f8bfd6b40c29ef9d11df00dd4110119824de51157b74e80a664","href":"https://static.observableusercontent.com/files/2d02269f009c8e9fd351b93f4344ae2f42d267e3577a3bbaf1d0d320c973e54f2de95ad6bd2c6f8bfd6b40c29ef9d11df00dd4110119824de51157b74e80a664","name":"notebook.png","type":"image/png","lastModified":1702889276752.184,"size":358027},{"id":"9881817dd7287c09146f29145a56b596c026fdf02b0505d2b2ebd9c42f00f1108b063f18087b5cc89c55467bdbf6daaf7d00057f313ced65f175394ba3046923","href":"https://static.observableusercontent.com/files/9881817dd7287c09146f29145a56b596c026fdf02b0505d2b2ebd9c42f00f1108b063f18087b5cc89c55467bdbf6daaf7d00057f313ced65f175394ba3046923","name":"geogis.jpeg","type":"image/jpeg","lastModified":1702890183674.719,"size":3343},{"id":"29938b8558566942932f47b514d540654c41117f83f1fcac79a9056e8914ddbf38d987012b5ac9ba870d844cdda1e95c886fb38a91cff7c0e8f059f2e5ca5dbe","href":"https://static.observableusercontent.com/files/29938b8558566942932f47b514d540654c41117f83f1fcac79a9056e8914ddbf38d987012b5ac9ba870d844cdda1e95c886fb38a91cff7c0e8f059f2e5ca5dbe","name":"versionnement.png","type":"image/png","lastModified":1702889276752.184,"size":1313},{"id":"d238929c50e899bb9b97629f77c3710a807f16eb7a988cf5518c918d65d32dc76d6c96468d4f527d35eae4edb9974f7e2343587c838e21969ced1e41082e438f","href":"https://static.observableusercontent.com/files/d238929c50e899bb9b97629f77c3710a807f16eb7a988cf5518c918d65d32dc76d6c96468d4f527d35eae4edb9974f7e2343587c838e21969ced1e41082e438f","name":"fork.png","type":"image/png","lastModified":1702889276752.184,"size":1176},{"id":"0121fb7b1107cb84f05457853bdc8b1d07bb5a6f9f76984a9b8c11ae1faca39d3e2726de04a4f5a56c24a56c285b26b0101b06825fa5d5d70cf9af5b9e591a1c","href":"https://static.observableusercontent.com/files/0121fb7b1107cb84f05457853bdc8b1d07bb5a6f9f76984a9b8c11ae1faca39d3e2726de04a4f5a56c24a56c285b26b0101b06825fa5d5d70cf9af5b9e591a1c","name":"js.png","type":"image/png","lastModified":1702890199208.695,"size":1992},{"id":"397254501d62d5b1a439018f1b705da854e33ad083bbc68ac68094da2bb96c273e8e4c4509d94bc2b973f75e28e11f59d8cd2d47497c809979d83d1aad851a34","href":"https://static.observableusercontent.com/files/397254501d62d5b1a439018f1b705da854e33ad083bbc68ac68094da2bb96c273e8e4c4509d94bc2b973f75e28e11f59d8cd2d47497c809979d83d1aad851a34","name":"geoviz.jpg","type":"image/jpeg","lastModified":1702890267194.064,"size":9875},{"id":"62fa24dd7a3e31b9ea2fc450e92ea4d9853f7663034c5d8781294d7af1ce040fb3ea2369c04d8efd0a3c24aba00d2ccfae2d1687fc9b3c6e6de94518de44a5fb","href":"https://static.observableusercontent.com/files/62fa24dd7a3e31b9ea2fc450e92ea4d9853f7663034c5d8781294d7af1ce040fb3ea2369c04d8efd0a3c24aba00d2ccfae2d1687fc9b3c6e6de94518de44a5fb","name":"bertin.png","type":"image/png","lastModified":1702890257305.715,"size":153648},{"id":"0b6e76dd161a0c376c7bc0b6bb76c877fd6ce17d6957e1cbea76891e33527622dc2526d84109da7356bb920bd4f3c635248f96738fc57a7f38f8ed541b09c471","href":"https://static.observableusercontent.com/files/0b6e76dd161a0c376c7bc0b6bb76c877fd6ce17d6957e1cbea76891e33527622dc2526d84109da7356bb920bd4f3c635248f96738fc57a7f38f8ed541b09c471","name":"ecma.png","type":"image/png","lastModified":1702891495907.186,"size":2302},{"id":"e073b16a94539586efdbd819d64df6e594d57eae5774253d8156dc8182eea350eb423066640ab91e4b1f5263c950a8d9b830c9dcdd64b27bec290842bda66be6","href":"https://static.observableusercontent.com/files/e073b16a94539586efdbd819d64df6e594d57eae5774253d8156dc8182eea350eb423066640ab91e4b1f5263c950a8d9b830c9dcdd64b27bec290842bda66be6","name":"800px-Npm-logo.svg.png","type":"image/png","lastModified":1702891558910.673,"size":1650},{"id":"94847cc89a418e9b3a7189b6480d63c4ffe56d178cd92745393601362e3d4fff5e14cad9ae083ddff89f5cade95d9526e24d8ee329e693ebc29c3dd170dd39e4","href":"https://static.observableusercontent.com/files/94847cc89a418e9b3a7189b6480d63c4ffe56d178cd92745393601362e3d4fff5e14cad9ae083ddff89f5cade95d9526e24d8ee329e693ebc29c3dd170dd39e4","name":"node.png","type":"image/png","lastModified":1702891558915.643,"size":4460},{"id":"d7b7cd156c5d76ffbda8d8a9fbcd42a1efaada6146d2c14356165d103ab667fbfdfe50327f5a0e3cdfc8c731fb6cdbcb460eae0e95e40169ba7306102bfce679","href":"https://static.observableusercontent.com/files/d7b7cd156c5d76ffbda8d8a9fbcd42a1efaada6146d2c14356165d103ab667fbfdfe50327f5a0e3cdfc8c731fb6cdbcb460eae0e95e40169ba7306102bfce679","name":"jswasm.jpg","type":"image/jpeg","lastModified":1702891652871.02,"size":48720},{"id":"f5cb85cbb9bb7e71e0bfacaca03accea1157ab21920fd452f7df1b41d1d38f6477ada37e93a5dd0e4aed47f71e2aacb446b62a488d0b782cf4ae3627195bb9b2","href":"https://static.observableusercontent.com/files/f5cb85cbb9bb7e71e0bfacaca03accea1157ab21920fd452f7df1b41d1d38f6477ada37e93a5dd0e4aed47f71e2aacb446b62a488d0b782cf4ae3627195bb9b2","name":"data.csv","type":"text/csv","lastModified":1702893733548.562,"size":11101},{"id":"bc6ae557078c1abec7ae9d8ece38d93a6fbef673c3d02b0f1127d5bcda87a46f521712dc0d34325ee0a5c34a518a6c1ad3e571dee6d1369ac80533f49df35e7f","href":"https://static.observableusercontent.com/files/bc6ae557078c1abec7ae9d8ece38d93a6fbef673c3d02b0f1127d5bcda87a46f521712dc0d34325ee0a5c34a518a6c1ad3e571dee6d1369ac80533f49df35e7f","name":"attach.png","type":"image/png","lastModified":1702893841655.121,"size":34255},{"id":"c67952fd5ccce42edcde2308ae868da716a8b9d378a5e1b97bb662f377b26fbc17add489d46c7c98e42766b369b93b6d01a713ef7b23106b747e65c5526b7dca","href":"https://static.observableusercontent.com/files/c67952fd5ccce42edcde2308ae868da716a8b9d378a5e1b97bb662f377b26fbc17add489d46c7c98e42766b369b93b6d01a713ef7b23106b747e65c5526b7dca","name":"world.json","type":"application/json","lastModified":1702894422387.598,"size":276863},{"id":"de203e5ec5d444d80693b8a9c3540717390bc0f5b45c370cc5ba80d6b25f44dcddb32d0cd8240f5acfb9533d6e15addc1414e8d6b89003bbd51878648611f161","href":"https://static.observableusercontent.com/files/de203e5ec5d444d80693b8a9c3540717390bc0f5b45c370cc5ba80d6b25f44dcddb32d0cd8240f5acfb9533d6e15addc1414e8d6b89003bbd51878648611f161","name":"bertinprincipe.svg","type":"image/svg+xml","lastModified":1702894760349.506,"size":20082},{"id":"4cae554d12057950112cebaa2086e628941cf1be03053777a9370e2d9abe0ce7eb2a16125ba981ebe310d5af462ea61dcb4451da6ef4ecc644fe9d00ddc14ced","href":"https://static.observableusercontent.com/files/4cae554d12057950112cebaa2086e628941cf1be03053777a9370e2d9abe0ce7eb2a16125ba981ebe310d5af462ea61dcb4451da6ef4ecc644fe9d00ddc14ced","name":"ceebf2e215974fbeade71fe79eeeb4ad65b701efa6c54854e22746949d6f3977.jpg","type":"image/jpeg","lastModified":1702898311966.066,"size":18833}] 2e:{"title":"Observable pour l'INED","cells":[{"id":0,"value":"# Observable pour l'INED","pinned":false,"hidden":false,"mode":"md"},{"id":923,"value":"*Nicolas Lambert, 8 janvier 2024*","pinned":false,"hidden":false,"mode":"md"},{"id":918,"value":"ceebf2e215974fbeade71fe79eeeb4ad65b701efa6c54854e2 = FileAttachment(\n \"ceebf2e215974fbeade71fe79eeeb4ad65b701efa6c54854e22746949d6f3977.jpg\"\n).image({ width: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"{\n const button = html``;\n button.onclick = () => sommaire.parentElement.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":518,"value":" ## 1 - Le JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":529,"value":"Le JavaScript est un langage de programmation qui a presque 30 ans.","pinned":false,"hidden":false,"mode":"md"},{"id":531,"value":"### 1995","pinned":false,"hidden":false,"mode":"md"},{"id":534,"value":"Le langage Javascript a été créé en dix jours en mai 1995 pour la Netscape Communications Corporation par **Brendan Eich**. Au départ, l’idée était de construire un petit langage pour faire des interactions sur les pages web. \n\nAttention, Javascript n’est pas JAVA !","pinned":false,"hidden":false,"mode":"md"},{"id":536,"value":"### 1997","pinned":false,"hidden":false,"mode":"md"},{"id":538,"value":"ecma = FileAttachment(\"ecma.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":541,"value":"Le langage Javascript est normalisé depuis 1997 par la commission TC39 de l’organisation ECMA International.","pinned":false,"hidden":false,"mode":"md"},{"id":543,"value":"### 2008","pinned":false,"hidden":false,"mode":"md"},{"id":545,"value":"Les navigateurs web ont travaillé à de nouveaux moteurs pour améliorer les performances. **V8** est un moteur JavaScript open-source développé par le projet Chromium pour les navigateurs Web Google Chrome et Chromium. Il y a aussi **SpiderMonkey** pour Firefox, **Chakra** pour Microsoft Edge et **JavaScriptCore** pour Safari","pinned":false,"hidden":false,"mode":"md"},{"id":547,"value":"### 2009","pinned":false,"hidden":false,"mode":"md"},{"id":550,"value":"node = FileAttachment(\"node.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":552,"value":"Création de Node.js par **Ryan Dahl**, qui permet d’utiliser le JavaScript comme langage de programmation côté serveur (back-End).","pinned":false,"hidden":false,"mode":"md"},{"id":555,"value":"### 2015","pinned":false,"hidden":false,"mode":"md"},{"id":557,"value":"Depuis 2015 (ES6 ou ES2015), le langage JavaScript est mature. Performant. Et est implémenté de manière harmonisée dans tous les navigateurs. On parle de **modern JavaScript**","pinned":false,"hidden":false,"mode":"md"},{"id":559,"value":"### Aujourd'hui","pinned":false,"hidden":false,"mode":"md"},{"id":561,"value":"Une grande communauté. JavaScript est à ce jour un des langages les plus utilisé par les developpeurs informatiques. Il y a à ce jour plus de 2 millions de packages disponibles sur **npm**","pinned":false,"hidden":false,"mode":"md"},{"id":563,"value":"pxNpmLogoSvg = FileAttachment(\"800px-Npm-logo.svg.png\").image({ width: 150 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"Un langage qui évolue chaque année. Plein de nouvelles possibilités avec **webAssembly**","pinned":false,"hidden":false,"mode":"md"},{"id":568,"value":"jswasm = FileAttachment(\"jswasm.jpg\").image({ width: 150 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":571,"value":"### Quelques mots sur le langage","pinned":false,"hidden":false,"mode":"md"},{"id":573,"value":"- C'est un langage qui s'exécute du côté client (**Front-End**) mais aussi côté serveur (**back-End**) avec node.js.","pinned":false,"hidden":false,"mode":"md"},{"id":575,"value":"- C'est un langage multi-paradigme mais toujours très **fonctionnel** (langage basé sur les fonctions).\n","pinned":false,"hidden":false,"mode":"md"},{"id":577,"value":"- C'est un langage **événementiel** (interactivité)","pinned":false,"hidden":false,"mode":"md"},{"id":587,"value":"- Il est faiblement typé","pinned":false,"hidden":false,"mode":"md"},{"id":589,"value":"{\n let a = 10; // Number\n a = true; // boolean\n a = [1, 2, 3, 4]; // Array\n a = { nom: \"Nicolas\", prénom: \"Lambert\" }; // Object\n a = \"JavaScript\"; // String\n return a;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":593,"value":"- Comporte des bizarreries","pinned":false,"hidden":false,"mode":"md"},{"id":595,"value":"typeof NaN","pinned":true,"hidden":false,"mode":"ojs"},{"id":601,"value":"Contrairement à R, JavaScript n'a pas et conçu du tout pour analyser des données statistiques","pinned":false,"hidden":false,"mode":"md"},{"id":603,"value":"{\n let a = [7, 1, 9, 3, 10, 4, 5, 6, 2, 8];\n return a.sort();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":605,"value":"Il faudrait écrire ceci","pinned":false,"hidden":false,"mode":"md"},{"id":607,"value":"{\n let a = [7, 1, 9, 3, 10, 4, 5, 6, 2, 8];\n return a.sort((a, b) => a - b);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":611,"value":"### Alors pourquoi JavaScript pour la science des données ?","pinned":false,"hidden":false,"mode":"md"},{"id":614,"value":"- C'est le langage du web.\n- Tout le monde a JavaScript qui tourne sur sa machine. Rien à installer. Il suffit d'une navigateur web.\n- De nombreuses bibliothèques permettent déjà de manipuler et représenter les données.\n- Certes, le javascript n'a peut-être pas été conçu comme un langage d'analyse de données, mais le langage peut être étendu pour mieux le prendre en charge.\n- Avec [WebGPU](https://en.wikipedia.org/wiki/WebGPU), [WebAssembly](https://fr.wikipedia.org/wiki/WebAssembly) et d'autres normes en cours de développement, l'avenir de JavaScript est prometteur.","pinned":false,"hidden":false,"mode":"md"},{"id":438,"value":"## 2 - Observable","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"observable = FileAttachment(\"observable.png\").image({ width: 240 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"### L'Observable JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":26,"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":22,"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":29,"value":"frise = FileAttachment(\"frise.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"Comme les autres solutions de notebooks, les notebooks Observable permettent donc de faire de la **programmation lettrée** (literate programming), c'est à dire notamment de combiner code et élément en langage naturel dans un même document","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"**Objectifs**\n\n- Construire un langage et un écosystème dédié à la visualisation de données sur le web\n- Fédérer et faire collaborer une communauté ","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"Lire [Javascript for data Analysis](https://towardsdatascience.com/javascript-for-data-analysis-2e8e7dbf63a7) et [A Better Way to Code](https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3a0)","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"### Des bibliothèques pré-chargées","pinned":false,"hidden":false,"mode":"md"},{"id":40,"value":"OJS c'est du JavaScript + plein de bibliothèques pré chargées :
\n\n| Symbol | Name | Version |\n|----------|-------------------|--------------------|\n| \\_ | Lodash | 4.17.21 |\n| aq | Arquero | ${aq.version} |\n| Arrow | Apache Arrow | 4.0.1 |\n| d3 | D3.js | ${d3.version} |\n| dot | Graphviz | 0.2.1 |\n| htl | Hypertext Literal | ${htl.version} |\n| Inputs | Observable Inputs | ${Inputs.version} |\n| L | Leaflet | ${L.version} |\n| mermaid | Mermaid | 9.1.6 |\n| Plot | Observable Plot | ${Plot.version} |\n| SQLite | SQL.js | 1.7.0 |\n| topojson | TopoJSON Client | 3.1.0 |\n| vl | Vega, Vega-Lite | 5.22.1, 5.2.0 |","pinned":false,"hidden":false,"mode":"md"},{"id":654,"value":"#### 👉 D3.js","pinned":false,"hidden":false,"mode":"md"},{"id":673,"value":"D3.js est une bibliothèque graphique JavaScript développée par Mike Bostock qui permet l'affichage de données numériques sous une forme graphique et dynamique. Cette bibliothèque a 10 ans !!! Elle comporte plus de 1000 fonctions. Nous en sommes à la 7e version. Et le développement continue. \n","pinned":false,"hidden":false,"mode":"md"},{"id":677,"value":"chart = {\n const width = 640;\n const height = 400;\n const margin = { top: 20, right: 30, bottom: 30, left: 40 };\n\n const x = d3\n .scaleUtc()\n .domain(d3.extent(aapl, (d) => d.Date))\n .range([margin.left, width - margin.right]);\n\n const y = d3\n .scaleLinear()\n .domain([0, d3.max(aapl, (d) => d.Close)])\n .range([height - margin.bottom, margin.top]);\n\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x));\n\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y));\n\n svg\n .append(\"path\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"steelblue\")\n .attr(\"stroke-width\", 1.5)\n .attr(\n \"d\",\n d3\n .line()\n .x((d) => x(d.Date))\n .y((d) => y(d.Close))(aapl)\n );\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":671,"value":"#### 👉 Plot","pinned":false,"hidden":false,"mode":"md"},{"id":708,"value":"Observable Plot est une bibliothèque JavaScript gratuite et open-source qui permet de visualiser rapidement des données tabulaires. Elle dispose d'une API concise et (c'est l'objectif) mémorable pour favoriser la fluidité. C'est la bibliothèque portée par Observable. Elle est développée par Mike Bostock et Philippe Rivière. C'est la bibliothèque de référence pour faire des graphiques en JavaScript.","pinned":false,"hidden":false,"mode":"md"},{"id":714,"value":"Plot.plot({\n marks: [Plot.tickX(data2, { x: \"gdppc\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":717,"value":"Plot.plot({\n grid: true,\n marginLeft: 50,\n facet: {\n data: data2,\n y: \"region\"\n },\n marks: [Plot.boxX(data2, { x: \"gdppc\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":668,"value":"#### 👉 Arquero","pinned":false,"hidden":false,"mode":"md"},{"id":731,"value":"Arquero est inspiré par le package R dplyr. Elle permet de manipuler et transformer les données comme si on avait un tableau en deux dimensions.","pinned":false,"hidden":false,"mode":"md"},{"id":735,"value":"aqdata = aq\n .from(data)\n .select(\"id\", \"name\", \"pop\", \"gdp\")\n .orderby(aq.desc(\"pop\"))\n .filter((d) => d[\"pop\"] > 200000000)\n .relocate(\"gdp\", { before: \"pop\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":743,"value":"md`${aqdata.toMarkdown()}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"### Les notebooks","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"Chaque notebook est une page web avec une url. Celui ci peut être public (free) ou privé (version pro).","pinned":false,"hidden":false,"mode":"md"},{"id":1249,"value":"Les *trendings* : https://observablehq.com/trending","pinned":false,"hidden":false,"mode":"md"},{"id":325,"value":"La plupart sont en anglais, mais il n'y a pas de règle.","pinned":false,"hidden":false,"mode":"md"},{"id":323,"value":"trendings = FileAttachment(\"trendings.png\").image({ width: 700 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"### Les cellules","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"Les notebooks Observable sont composés de cellules, qui sont en quelque sorte des scriptés séparés les uns des autres. elles s'executent indépendamment. ","pinned":false,"hidden":false,"mode":"md"},{"id":328,"value":"// Ceci est une cellule","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"### Les cellules Markdown","pinned":false,"hidden":false,"mode":"md"},{"id":57,"value":"Voici du texte en *italic* ou en __gras__ avec un [lien](https://observablehq.com/).","pinned":true,"hidden":false,"mode":"md"},{"id":290,"value":"Voir : https://observablehq.com/@sd-progwebdataviz/rappels-markdown?collection=@sd-progwebdataviz/guide-et-exemples","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"### Les cellules LaTeX","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"c = \\pm\\sqrt{a^2 + b^2}","pinned":true,"hidden":false,"mode":"tex"},{"id":65,"value":"### Les cellules HTML","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"

ceci est du texte surligné en rouge.

","pinned":true,"hidden":false,"mode":"md"},{"id":330,"value":"Dessin raster (canvas)","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"

","pinned":true,"hidden":false,"mode":"md"},{"id":332,"value":"Dessin vecteur (svg)","pinned":false,"hidden":false,"mode":"md"},{"id":75,"value":"","pinned":true,"hidden":false,"mode":"md"},{"id":78,"value":"### Les cellules de code","pinned":false,"hidden":false,"mode":"md"},{"id":340,"value":"Ci-dessous, `a`, `b` et `c` définissent à a fois des nom de variables, mais aussi l'identifiant de la cellule. Contrairement au vanilla JavaScript, pas besoin d'utiliser `const`, `let` ou `var`pour déclarer des variables.","pinned":false,"hidden":false,"mode":"md"},{"id":89,"value":"a = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"b = 62","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"c = a + b","pinned":true,"hidden":false,"mode":"ojs"},{"id":342,"value":"On peut écrire des blocs de code en utilisant des accolades `{...}`.","pinned":false,"hidden":false,"mode":"md"},{"id":96,"value":"x = {\n let val1 = 8;\n let val2 = 7;\n return val1 * val2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"Fonctions","pinned":false,"hidden":false,"mode":"md"},{"id":98,"value":"function sum(a, b) {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"sum(10, 30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"multi = (a, b) => a * b","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"multi(3, 8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":680,"value":"### Attacher des données","pinned":false,"hidden":false,"mode":"md"},{"id":719,"value":"FileAttachment(\"attach.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"data = FileAttachment(\"data.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":665,"value":"### Les datatable","pinned":false,"hidden":false,"mode":"md"},{"id":725,"value":"data2 = await FileAttachment(\"data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"### La programmation lettrée","pinned":false,"hidden":false,"mode":"md"},{"id":83,"value":"Chaque notebook est donc un assemblage de lignes de codes et d'explications textuelles. L'objectif : décrire ce qu'on fait pour le partager son travail et le rendre reproductible. ","pinned":false,"hidden":false,"mode":"md"},{"id":336,"value":"notebook = FileAttachment(\"notebook.png\").image({ width: 460 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"### Relation topologique","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"Dans Observable, l'ordre des cellules n'a pas d'importance. Les cellules s'exécutent dans un **ordre topologique**. En Vanilla JavaScript, le code s'exécute de haut en bas du document. Ce n'est pas le cas ici, vous pouvez définir vos cellules dans l'ordre que vous souhaitez au sein d'un notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":277,"value":"C'est très pratique. Mais attention à l'organisation de vos notebooks.","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"topo = FileAttachment(\"topo.png\").image({ width: 700 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"Chaque début de cellule correspond donc à un identifiant de cellule. Ceux-ci doivent être **uniques sur l'ensemble du document**.","pinned":false,"hidden":false,"mode":"md"},{"id":112,"value":"e + d","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"d = 120","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"e = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"Les cellules sont réexécutées lorsqu'une cellule référencée est modifiée.","pinned":false,"hidden":false,"mode":"md"},{"id":282,"value":"### Promesses","pinned":false,"hidden":false,"mode":"md"},{"id":284,"value":"Si vous connaissez déjà le JavaScript, sachez que les `promesses` sont automatiquement résolues dans les cellules. Pas besoin, donc, d'utiliser le mot clé `await`. ","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"### Les Inputs","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"Observable propose de nombreux Widgets clé en main pour interagir avec les données. Ce sont les [`Inputs`](https://observablehq.com/@observablehq/hello-inputs).","pinned":false,"hidden":false,"mode":"md"},{"id":375,"value":"viewof radios = Inputs.radio([\"pop\", \"pib\", \"idh\"], {\n label: \"Variable à traiter\",\n value: \"pop\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"viewof date = Inputs.date({label: \"Date\", value: \"2023-09-28\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"viewof select = Inputs.select([\"Paris\", \"Marseille\", \"Lyon\"], {\n label: \"Choisissez une ville\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"### Tout est réactif","pinned":false,"hidden":false,"mode":"md"},{"id":314,"value":"Voici un cercle dessiné en SVG","pinned":false,"hidden":false,"mode":"md"},{"id":312,"value":"","pinned":true,"hidden":false,"mode":"md"},{"id":316,"value":"Rendons-le interactif avec des `Inputs`.","pinned":false,"hidden":false,"mode":"md"},{"id":130,"value":"viewof color = Inputs.color({ label: \"Couleur\", value: \"#4ab58c\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"viewof radius = Inputs.range([1, 50], {\n label: \"Rayon\",\n step: 1,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"viewof position = Inputs.range([50, 950], {\n label: \"Position\",\n step: 1,\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":292,"value":"### Cliquer/coder","pinned":false,"hidden":false,"mode":"md"},{"id":294,"value":"Dans Observable, beaucoup de code peut s’écrire par simple clic.","pinned":false,"hidden":false,"mode":"md"},{"id":296,"value":"screenshotFrom20231013104313 = FileAttachment(\n \"Screenshot from 2023-10-13 10-43-13.png\"\n).image({ width: 400 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":299,"value":"On peut aussi aller copier les code des autres notebooks et l'adapter à ses données.","pinned":false,"hidden":false,"mode":"md"},{"id":301,"value":"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce = FileAttachment(\n \"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4.jpeg\"\n).image({ width: 400 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":142,"value":"### Versionnement","pinned":false,"hidden":false,"mode":"md"},{"id":304,"value":"versionnement = FileAttachment(\"versionnement.png\").image({ width: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"Tout ce qui est fait est fait dans le navigateur. Donc tout est enregistré automatiquement et versionné comme sur Github. On peut toujours revenir à une version antérieure du document. ","pinned":false,"hidden":false,"mode":"md"},{"id":146,"value":"### Forks","pinned":false,"hidden":false,"mode":"md"},{"id":307,"value":"fork = FileAttachment(\"fork.png\").image({ width: 30 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"On peut aussi copier l'ensemble d'un notebook, le modifier, et éventuellement \"merger\" ses modifications avec le carnet initial.","pinned":false,"hidden":false,"mode":"md"},{"id":150,"value":"### Commentaires","pinned":false,"hidden":false,"mode":"md"},{"id":152,"value":"### Travailler à plusieurs","pinned":false,"hidden":false,"mode":"md"},{"id":155,"value":"On peut travailler à plusieurs en même temps sur un notebook dans des **workspaces**.","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"teams = FileAttachment(\"teams.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":160,"value":"### Imports","pinned":false,"hidden":false,"mode":"md"},{"id":162,"value":"Tous les notebooks sont reliés entre eux. Il est possible d'importer n'importe quelle cellule de n'importe quel notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"Ici par exemple, je récupère une serie de données temporelles sur les manifestations du 1er mai.","pinned":false,"hidden":false,"mode":"md"},{"id":207,"value":"import { IWD as premiermai } from \"@neocartocnrs/strikes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"premiermai","pinned":true,"hidden":false,"mode":"ojs"},{"id":1257,"value":"Ou directement un graphique","pinned":false,"hidden":false,"mode":"md"},{"id":1259,"value":"import { chart1 } from \"@neocartocnrs/strikes\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1261,"value":"chart1","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"### Require","pinned":false,"hidden":false,"mode":"md"},{"id":227,"value":"On peut également étendre les fonctionnalités d'Observable en chargeant de nouvelles bibliothèques. Par exemple ici, je charge la bibliothèque [`dicopal`](https://github.com/riatelab/dicopal.js) qui donne accès à de nombreuses palettes de couleur.","pinned":false,"hidden":false,"mode":"md"},{"id":230,"value":"dicopal = require(\"dicopal\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"dicopal.getPaletteProviders()","pinned":true,"hidden":false,"mode":"ojs"},{"id":233,"value":"dicopal.getRawData(\"colorbrewer\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"pal = dicopal.getColors(\"Sunset\", 7)","pinned":true,"hidden":false,"mode":"ojs"},{"id":388,"value":"$${drawpal(pal)}","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"### Embed","pinned":false,"hidden":false,"mode":"md"},{"id":171,"value":"Chaque cellule fonctionne comme une API qu'il est possible d’intégrer dans n'importe quel site web.","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"huma = FileAttachment(\"huma.png\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"Voir [le notebook](https://observablehq.com/@neocartocnrs/la-retraite-avant-larthrite) et la [carte embarquée](https://www.humanite.fr/en-debat/reforme-des-retraites/la-preuve-en-cartes-en-europe-on-fait-travailler-les-gens-jusqua-ce-quils-soient-bons-a-jeter) sur un autre site web.","pinned":false,"hidden":false,"mode":"md"},{"id":258,"value":"### Observable en dehors d'Observable","pinned":false,"hidden":false,"mode":"md"},{"id":30,"value":"La technologie **ojs** est implémentée dans d'autres environnements, notamment dans Quarto (développé par rstudio). Voir [exemple 1](https://ee-cist.github.io/CAR2_cartodyn/TP1/docs/index.html), [exemple 2](https://ee-cist.github.io/CAR2_cartodyn/TP2/docs/index.html) et [dashboard](https://ee-cist.github.io/CAR2_cartodyn/app/docs/index.html). Cela permet par exemple d'articuler différents langages (R, Python, Julia, ojs) dans un même document. Voir par exemple : [Atelier Sageo 2023](https://riatecom.github.io/sageo-2023).","pinned":false,"hidden":false,"mode":"md"},{"id":318,"value":"Le runtime est open source. Et il existe également des compilateurs non officiels. Voir par exemple https://observablehq.com/@asg017/an-unofficial-observablehq-compiler","pinned":false,"hidden":false,"mode":"md"},{"id":625,"value":"## 3 - geotoolbox","pinned":false,"hidden":false,"mode":"md"},{"id":754,"value":"[**``geotoolbox``**](https://github.com/neocarto/geotoolbox) est un outil javascript pour géographes basé sur [d3geo](https://github.com/d3/d3-geo), [topojson](https://github.com/topojson/topojson) et [geos-wasm](https://github.com/chrispahm/geos-wasm). Il 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":813,"value":"### Require","pinned":false,"hidden":false,"mode":"md"},{"id":758,"value":"Pour charger la dernière version de la bibliothèque, il suffit de copier la ligne suivante :","pinned":false,"hidden":false,"mode":"md"},{"id":760,"value":"geo = require(\"geotoolbox@2\")","pinned":true,"hidden":true,"mode":"ojs"},{"id":762,"value":"On charge un fond de carte","pinned":false,"hidden":false,"mode":"md"},{"id":765,"value":"world = FileAttachment(\"world.json\").json()","pinned":true,"hidden":true,"mode":"ojs"},{"id":767,"value":"### Generalisation","pinned":false,"hidden":false,"mode":"md"},{"id":771,"value":"viewof k = Inputs.range([0.01, 0.5], { label: \"k\", step: 0.01, value: 0.05 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":773,"value":"world_light = geo.simplify(world, { k })","pinned":false,"hidden":true,"mode":"ojs"},{"id":775,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: world_light,\n stroke: \"#a63878\",\n fill: \"none\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"### Buffer et clip","pinned":false,"hidden":false,"mode":"md"},{"id":790,"value":"africa = geo.filter(world, (d) => d.region == \"Africa\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":796,"value":"viewof dist = Inputs.range([1, 4000], { label: \"Distance\", step: 100 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":792,"value":"buff = geo.buffer(africa, { dist: dist })","pinned":true,"hidden":false,"mode":"ojs"},{"id":794,"value":"clipworld = geo.clip(world, { clip: buff })","pinned":true,"hidden":false,"mode":"ojs"},{"id":799,"value":"bertin.draw({\n params: { projection: \"user\", width: 800 },\n layers: [\n {\n geojson: buff,\n stroke: \"#a63878\",\n fill: \"none\"\n },\n {\n geojson: clipworld,\n fill: \"#a63878\",\n fillOpacity: 0.5,\n stroke: \"white\"\n },\n {\n geojson: world,\n fill: \"#CCC\",\n stroke: \"none\"\n }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"thumbs_geotoolbox","pinned":false,"hidden":false,"mode":"ojs"},{"id":619,"value":"## 3 - bertin","pinned":false,"hidden":false,"mode":"md"},{"id":803,"value":"[bertin.js](https://github.com/neocarto/bertin) est une bibliothèque JavaScript qui permet de réaliser des cartes thématiques pour le web. Son développement s'appuie en grande partie sur le librairie javascript [d3.js](https://d3js.org/) développée par Mike Bostock depuis 10 ans. ","pinned":false,"hidden":false,"mode":"md"},{"id":805,"value":"- **`Documentation`** - https://github.com/neocarto/bertin\n- **`exemples`** - https://observablehq.com/collection/@neocartocnrs/bertin","pinned":false,"hidden":false,"mode":"md"},{"id":818,"value":"### Require","pinned":false,"hidden":false,"mode":"md"},{"id":777,"value":"bertin = require(\"bertin\")","pinned":true,"hidden":true,"mode":"ojs"},{"id":820,"value":"### Principe","pinned":false,"hidden":false,"mode":"md"},{"id":822,"value":"Un fonction draw permet de réaliser tous les types de cartes\n","pinned":false,"hidden":false,"mode":"md"},{"id":807,"value":"FileAttachment(\"bertinprincipe.svg\").image({ width: 800 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"### Une carte simple","pinned":false,"hidden":false,"mode":"md"},{"id":827,"value":"bertin.draw({\n layers: [\n {\n geojson: world,\n fill: \"blue\",\n stroke: \"red\"\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":829,"value":"### Cercles proprtionnels","pinned":false,"hidden":false,"mode":"md"},{"id":831,"value":"bertin.draw({\n layers: [\n {\n type: \"bubble\",\n geojson: world,\n values: \"pop\", // <- données quantitatives absolues\n fill: {\n type: \"typo\",\n values: \"region\" // <- données qualitatives\n }\n },\n {\n geojson: world,\n fill: \"#CCC\"\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":836,"value":"### Des cartes largement personnalisables","pinned":false,"hidden":false,"mode":"md"},{"id":840,"value":"viewof radiusmax = Inputs.range([1, 100], {\n label: \"Taille des cercles\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":838,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"### Vue globe","pinned":false,"hidden":false,"mode":"md"},{"id":847,"value":"map2 = bertin.draw({\n params: { margin: [0, 0, 0, 80], projection: \"Globe(-50,-30,0)\", width: 600 },\n layers: [\n {\n id: \"choro\",\n geojson: world,\n strokeWidth: 0.3,\n fill: {\n type: \"choro\",\n values: \"gdppc\",\n colors: \"RdYlGn\",\n method: \"quantile\",\n nbreaks: 5,\n leg_x: 20,\n leg_y: 20,\n leg_round: 0,\n leg_title: \"GDP per capita\"\n },\n tooltip: [\n \"$NAMEfr\",\n (d) => \"gdp per capita:\" + Math.round(d.properties.gdppc)\n ]\n },\n\n { type: \"geolines\", stroke: \"white\" },\n { type: \"outline\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"### Beaucoup de notebooks d'aide","pinned":false,"hidden":false,"mode":"md"},{"id":638,"value":"thumbs_bertin","pinned":false,"hidden":false,"mode":"ojs"},{"id":623,"value":"## 3 - geoviz","pinned":false,"hidden":false,"mode":"md"},{"id":856,"value":"**`geoviz`** est une bibliothèque JavaScript en développement basée sur d3 pour concevoir des cartes thématiques **interactives** et **zoomables**. La bibliothèque fournit un ensemble de fonctions compatibles avec [d3](https://github.com/d3/d3) que vous pouvez mélanger avec la syntaxe d3 habituelle. ","pinned":false,"hidden":false,"mode":"md"},{"id":858,"value":"- **`github`** - https://github.com/neocarto/geoviz\n- **`API reference`** - https://neocarto.github.io/geoviz/docs\n- **`Examples (Observable JavaScript)`** - https://observablehq.com/collection/@neocartocnrs/geoviz\n- **`Examples (JavaScript)`** - https://observablehq.com/collection/@neocartocnrs/geoviz","pinned":false,"hidden":false,"mode":"md"},{"id":860,"value":"### Require","pinned":false,"hidden":false,"mode":"md"},{"id":779,"value":"viz = require(\"geoviz@0.4\")","pinned":true,"hidden":true,"mode":"ojs"},{"id":863,"value":"### Un exemple simple","pinned":false,"hidden":false,"mode":"md"},{"id":865,"value":"viz.path({ data: world, tip: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":869,"value":"### Tuiles raster","pinned":false,"hidden":false,"mode":"md"},{"id":872,"value":"viz.tile({ url: \"worldimagery\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":875,"value":"### Cartes complexes","pinned":false,"hidden":false,"mode":"md"},{"id":880,"value":"viewof k2 = Inputs.range([10, 100], { label: \"Radius max\", step: 1, value: 30 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":885,"value":"viewof field = Inputs.radio([\"pop\", \"gdp\"], { label: \"Field\", value: \"pop\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":887,"value":"{\n let svg = viz.create({\n zoomable: true,\n width: 800,\n projection: d3.geoNaturalEarth1()\n });\n svg.outline();\n\n svg.header({ text: \"World Population\", id: \"worldtitle\" });\n\n // Countries layer\n svg.path({\n datum: world,\n fill: \"white\",\n fillOpacity: 0.4\n });\n // Circle layer with default parameters\n svg.circle({\n id: \"bubble\",\n data: world,\n fill: \"#38896f\",\n r: \"pop\",\n tip: true\n });\n\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":893,"value":"radius2 = viz.tool.radius(\n world.features.map((d) => d.properties[field]),\n { k: k2 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":889,"value":"d3\n .selectAll(`#bubble > circle`)\n .transition()\n .delay(50)\n .attr(\"r\", (d) => radius2.r(d.properties[field]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":891,"value":"d3\n .selectAll(`#worldtitle > text`)\n .transition()\n .delay(50)\n .text(field == \"pop\" ? \"World Population\" : \"Gross Domestic Product\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":883,"value":"### Gallerie","pinned":false,"hidden":false,"mode":"md"},{"id":645,"value":"thumbs_geoviz1","pinned":false,"hidden":false,"mode":"ojs"},{"id":647,"value":"thumbs_geoviz2","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"**Appendix**","pinned":false,"hidden":false,"mode":"md"},{"id":630,"value":"import { thumbs as thumbs_geotoolbox } from \"@neocartocnrs/hello-geotoolbox\";","pinned":false,"hidden":false,"mode":"ojs"},{"id":636,"value":"import { gallery as thumbs_bertin } from \"@neocartocnrs/hello-bertin-js\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":641,"value":"import {\n documentation as thumbs_geoviz1,\n gallery as thumbs_geoviz2\n} from \"@neocartocnrs/geoviz-appendix\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"drawpal = function (col) {\n let boxsize = 60;\n let str = \"\";\n col.forEach((d) => {\n str += ``;\n });\n str += \"
\";\n col.forEach((d) => {\n str += `${d}`;\n });\n return str;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":502,"value":"Reveal = require(\"reveal.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}