28:null 29:["$","title",null,{"children":"Geovisualisation avec Observable | Nicolas Lambert | Observable"}] 2e:Ta72,intro = { var dom = html`

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

Observable, c'est quoi ?

Techno

L’Observable JavaScript (ojs) est un ensemble d’améliorations apportées à vanilla JavaScript pour en faire un langage dédié aux data sciences (visual analytics). Observable JS se distingue par son exécution réactive, qui convient particulièrement bien à l’exploration et à l’analyse interactives des données.

Startup

Observablehq est une startup située à San Francisco, fondée par Mike Bostock (auteur de d3.js) et Melody Meckfessel, qui compte actuellement une quarantaine de développeurs à plein temps.

Plateforme

C’est aussi une plateforme web qui héberge des notebooks sur la visualisation de données. Les notebooks sont comme des billets de blog. Ils contiennent du texte, des images, du contenu multimédia et du code.

Collaborer

Observable propose un outil qui permet de travailler dans le navigateur web, seul ou à plusieurs (teams). Objectif : faire collaborer une communauté autour de la visualisation de données.

Chaque notebook a une url. Chaque element de chaque notebook fonctionne comme une api qu'il est possible d'embarquer dans un site web.

Reproductibilité

Observable est un outil qui vient enrichir la famille des notebooks (quarto, jupyter, ...) permettant de partager des traitements et des textes dans un seul et même document - literate programming.

References

Reactive, reproducible, collaborative: computational notebooks evolve, par Jeffrey M. Perkel. https://www.nature.com/articles/d41586-021-01174-w

Javascript for data Analysis, par Mike Bostock https://towardsdatascience.com/javascript-for-data-analysis-2e8e7dbf63a7

`; shadow.appendChild(reveal); var deck = new Reveal(reveal, { embedded: true }); deck.initialize(); return dom; }2f:T48e,bertin.draw({ params: { projection: "Eckert3" }, // 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, // Rayon du plus gros cercles 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: 100, // 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 ] })30:[{"id":"26713a8c21f5b75a2e6942385e691cb293e0177e35107749a99dfab56659f2be5424be38d377e1426715086d920206b553587373b8e7390ded81a09be27c76c1","href":"https://static.observableusercontent.com/files/26713a8c21f5b75a2e6942385e691cb293e0177e35107749a99dfab56659f2be5424be38d377e1426715086d920206b553587373b8e7390ded81a09be27c76c1","name":"stats.csv","type":"text/csv","lastModified":1695901850792.337,"size":11012},{"id":"de203e5ec5d444d80693b8a9c3540717390bc0f5b45c370cc5ba80d6b25f44dcddb32d0cd8240f5acfb9533d6e15addc1414e8d6b89003bbd51878648611f161","href":"https://static.observableusercontent.com/files/de203e5ec5d444d80693b8a9c3540717390bc0f5b45c370cc5ba80d6b25f44dcddb32d0cd8240f5acfb9533d6e15addc1414e8d6b89003bbd51878648611f161","name":"1ed9b03b746abf7a9386d29470bf4a638463c5fc9131b0794a5ef8c4a2c20937ee43f7df1d5b4fc9601fad9c3f6914b8224d60ebe17b22525800cd2a33675e16.svg","type":"image/svg+xml","lastModified":1695902990126.781,"size":20082},{"id":"a2a201157757caab34fcc6ce80fa64abec5e2aa520b51def2c145ec066783004e561e7429a17a02f291ce77bb0f4b82b5531324b9d84ca19c9519f0ca180bc5b","href":"https://static.observableusercontent.com/files/a2a201157757caab34fcc6ce80fa64abec5e2aa520b51def2c145ec066783004e561e7429a17a02f291ce77bb0f4b82b5531324b9d84ca19c9519f0ca180bc5b","name":"logo.png","type":"image/png","lastModified":1695885616254.071,"size":22025},{"id":"b04100e972a4687a4b67c7159c5a9493e954eb15aaf7c8a1e9c3e69d64072615412b003496992f8d7aa2d34dd43dd97d4949defc5b18a9c672e5832b7dbb787d","href":"https://static.observableusercontent.com/files/b04100e972a4687a4b67c7159c5a9493e954eb15aaf7c8a1e9c3e69d64072615412b003496992f8d7aa2d34dd43dd97d4949defc5b18a9c672e5832b7dbb787d","name":"JavaScript-logo.png","type":"image/png","lastModified":1695823878365.402,"size":25491},{"id":"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4","href":"https://static.observableusercontent.com/files/bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4","name":"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4.jpeg","type":"image/jpeg","lastModified":1697186493552.883,"size":102662},{"id":"70ec7e5c2ac0c5ea2ad5657e3cbd54529dcbdc5e6a4b0eefc002d17a39de9d88fee4b7d3eb5d7fdb239d0b140d90128b0f91f04ce7ba30d7b76af4c785986358","href":"https://static.observableusercontent.com/files/70ec7e5c2ac0c5ea2ad5657e3cbd54529dcbdc5e6a4b0eefc002d17a39de9d88fee4b7d3eb5d7fdb239d0b140d90128b0f91f04ce7ba30d7b76af4c785986358","name":"Screenshot from 2023-10-13 10-43-13.png","type":"image/png","lastModified":1697186605532.746,"size":70776},{"id":"29938b8558566942932f47b514d540654c41117f83f1fcac79a9056e8914ddbf38d987012b5ac9ba870d844cdda1e95c886fb38a91cff7c0e8f059f2e5ca5dbe","href":"https://static.observableusercontent.com/files/29938b8558566942932f47b514d540654c41117f83f1fcac79a9056e8914ddbf38d987012b5ac9ba870d844cdda1e95c886fb38a91cff7c0e8f059f2e5ca5dbe","name":"versionnement.png","type":"image/png","lastModified":1697187081970.872,"size":1313},{"id":"d238929c50e899bb9b97629f77c3710a807f16eb7a988cf5518c918d65d32dc76d6c96468d4f527d35eae4edb9974f7e2343587c838e21969ced1e41082e438f","href":"https://static.observableusercontent.com/files/d238929c50e899bb9b97629f77c3710a807f16eb7a988cf5518c918d65d32dc76d6c96468d4f527d35eae4edb9974f7e2343587c838e21969ced1e41082e438f","name":"fork.png","type":"image/png","lastModified":1697187102065.559,"size":1176},{"id":"2cc0927bc00c6a6a4c5ed090b1e081ca6acad4b982cbdf2659a727a262bad32a2365f16635f3494280082f78e9f5f69d8dd82730eabcfca46e21c5c98bad328e","href":"https://static.observableusercontent.com/files/2cc0927bc00c6a6a4c5ed090b1e081ca6acad4b982cbdf2659a727a262bad32a2365f16635f3494280082f78e9f5f69d8dd82730eabcfca46e21c5c98bad328e","name":"attach.png","type":"image/png","lastModified":1697187325429,"size":1860},{"id":"d8ea56833d15df6fab77244f296a5f1a5e1c635e81601b3902cfe35b7681f59968827b70f2aa2e16ec5341fa6e2e1ddd50bf7a78cf12912ff361026e63392ab3","href":"https://static.observableusercontent.com/files/d8ea56833d15df6fab77244f296a5f1a5e1c635e81601b3902cfe35b7681f59968827b70f2aa2e16ec5341fa6e2e1ddd50bf7a78cf12912ff361026e63392ab3","name":"logo_small.png","type":"image/png","lastModified":1697188471529.979,"size":71840},{"id":"43f3d6751a064d6078d02111b53273aa01b6db7b588ee0b189c12cce2ed2bd2991b56bb0901358ee37a9a91ea0b24e00ee4534f9364948746be82c2e46f327f6","href":"https://static.observableusercontent.com/files/43f3d6751a064d6078d02111b53273aa01b6db7b588ee0b189c12cce2ed2bd2991b56bb0901358ee37a9a91ea0b24e00ee4534f9364948746be82c2e46f327f6","name":"bertinimages.png","type":"image/png","lastModified":1697188894697.846,"size":153584},{"id":"0b6e76dd161a0c376c7bc0b6bb76c877fd6ce17d6957e1cbea76891e33527622dc2526d84109da7356bb920bd4f3c635248f96738fc57a7f38f8ed541b09c471","href":"https://static.observableusercontent.com/files/0b6e76dd161a0c376c7bc0b6bb76c877fd6ce17d6957e1cbea76891e33527622dc2526d84109da7356bb920bd4f3c635248f96738fc57a7f38f8ed541b09c471","name":"ecma.png","type":"image/png","lastModified":1696927535722.246,"size":2302},{"id":"94847cc89a418e9b3a7189b6480d63c4ffe56d178cd92745393601362e3d4fff5e14cad9ae083ddff89f5cade95d9526e24d8ee329e693ebc29c3dd170dd39e4","href":"https://static.observableusercontent.com/files/94847cc89a418e9b3a7189b6480d63c4ffe56d178cd92745393601362e3d4fff5e14cad9ae083ddff89f5cade95d9526e24d8ee329e693ebc29c3dd170dd39e4","name":"node.png","type":"image/png","lastModified":1696927574248.079,"size":4460},{"id":"e073b16a94539586efdbd819d64df6e594d57eae5774253d8156dc8182eea350eb423066640ab91e4b1f5263c950a8d9b830c9dcdd64b27bec290842bda66be6","href":"https://static.observableusercontent.com/files/e073b16a94539586efdbd819d64df6e594d57eae5774253d8156dc8182eea350eb423066640ab91e4b1f5263c950a8d9b830c9dcdd64b27bec290842bda66be6","name":"pxNpmLogoSvg.png","type":"image/png","lastModified":1696927595897.677,"size":1650},{"id":"52fe9015ae4249f0c5433405198bbd846a49ef3e92e4c9beaef0c8a6aee03a7959c87d410a22c86469af970ac7aef9eccc652a09c39a6ca9d555e2aa90763dc7","href":"https://static.observableusercontent.com/files/52fe9015ae4249f0c5433405198bbd846a49ef3e92e4c9beaef0c8a6aee03a7959c87d410a22c86469af970ac7aef9eccc652a09c39a6ca9d555e2aa90763dc7","name":"obsbanner.png","type":"image/png","lastModified":1696927709264.995,"size":34930},{"id":"ac522440e8f0e34ead1dacec9655affedebe6ee8db0f5334c32d457e64cae81c5c1ed7932ae24f9159b69c2b19730e69b98ba862ccd533713524c2409d92a24a","href":"https://static.observableusercontent.com/files/ac522440e8f0e34ead1dacec9655affedebe6ee8db0f5334c32d457e64cae81c5c1ed7932ae24f9159b69c2b19730e69b98ba862ccd533713524c2409d92a24a","name":"countries.json","type":"application/json","lastModified":1695902352715.878,"size":278391},{"id":"d2855d3e9abf61feceffe806eba7cb2a23cd8d04b7949bdd8f07454b46c0bbeae5ee7db0c0c3126f69faf299a94bf387f25dba70fc765670f6e7f15d5d6a6125","href":"https://static.observableusercontent.com/files/d2855d3e9abf61feceffe806eba7cb2a23cd8d04b7949bdd8f07454b46c0bbeae5ee7db0c0c3126f69faf299a94bf387f25dba70fc765670f6e7f15d5d6a6125","name":"teams.png","type":"image/png","lastModified":1695901509647.754,"size":14498},{"id":"42b2eedbd8af6427050ac874341b9721fb82d2ae345e5d42aabc1a03db1740da234fba6e4ea2e59caca5553cee20a4bc4a2d8796d65b6d14520b3755bff4e887","href":"https://static.observableusercontent.com/files/42b2eedbd8af6427050ac874341b9721fb82d2ae345e5d42aabc1a03db1740da234fba6e4ea2e59caca5553cee20a4bc4a2d8796d65b6d14520b3755bff4e887","name":"frise.png","type":"image/png","lastModified":1695886880937.913,"size":60522},{"id":"3ed7d603329e9f1b19cfd6e39691306a1de9b874d95f76b7f7186b6bed268ff33027ab7d7b5aa6655284b6970343b26c518df59707037aaf423f1b394c797b0e","href":"https://static.observableusercontent.com/files/3ed7d603329e9f1b19cfd6e39691306a1de9b874d95f76b7f7186b6bed268ff33027ab7d7b5aa6655284b6970343b26c518df59707037aaf423f1b394c797b0e","name":"notebooks.jpg","type":"image/jpeg","lastModified":1697123365517.28,"size":79032}] 2c:{"id":"4f99ffa8a0c27237","slug":"bosphore-observable","title":"Geovisualisation avec Observable","thumbnail":"fd31d2d9ce6c212ec4d9453b8a90bfcc8aa23619bd4b4382231da9291f35ee15","access_level":"public","create_time":"$D2023-09-27T13:54:05.164Z","update_time":"$D2023-10-17T12:30:28.387Z","view_time":null,"first_public_time":"$D2023-09-28T12:30:52.071Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":835,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"}],"comments":[{"id":"d0e1d4858bea78e0","reply_to_id":null,"content":"Ceci est un commentaire","create_time":"$D2023-10-04T10:29:54.216Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"d3c9113d57c69291","slug":"bosphore","title":"Bosphore","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"title":"Geovisualisation avec Observable","cells":[{"id":0,"value":"# Geovisualisation avec `Observable`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":666,"value":"**Géovisualisation** et **programmation lettrée** pour le **Web**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":527,"value":"De nombreux langages ont le vent en poupe pour faire de l'analyse de données. On parle beaucoup de **Python** et de **R**. Il y a pourtant un autre candidat sérieux : le **JavaScript**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"## 1 - Le JavaScript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"javascriptLogo = FileAttachment(\"JavaScript-logo.png\").image({ width: 200 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"**1995** - Le JavaScript est un langage de programmation qui a presque 30 ans. 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. Attention, Javascript n’est pas JAVA !","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"**1997** - Le langage Javascript est normalisé depuis 1997 par la commission TC39 de l’organisation ECMA International","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":505,"value":"ecma = FileAttachment(\"ecma.png\").image({ height: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"**2008** - 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 (dernière version 31 janvier 2022). Il y a aussi **SpiderMonkey** pour Firefox, **Chakra** pour Microsoft Edge et **JavaScriptCore** pour Safari","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"**2009** - 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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":509,"value":"node = FileAttachment(\"node.png\").image({ height: 60 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"**2015** - Depuis la version **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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"**Aujourd'hui** - 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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":513,"value":"pxnpmlogosvg = FileAttachment(\"pxNpmLogoSvg.png\").image({ height: 40 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"## 2 - L'Observable JavaScript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":630,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"frise = FileAttachment(\"frise.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"💡 *__Observable en dehors d'Observable__. La technonogie ojs est implémentée dans d'autres environnements, nottament danns Quarto (développé par rstudio). Cela permet par exemple d'articuler différents langages (R, Python, Julia, ojs) dans un même document. Voir par exemple : https://riatecom.github.io/sageo-2023/*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"## 3 - Principes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"Observable ressemble à du JavaScript mais ce n'est pas vraiment du JavaScript.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"### 👉 Les bibliothèques pré-chargées","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":209,"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"### 👉 Les notebooks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":251,"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":599,"value":"notebooks = FileAttachment(\"notebooks.jpg\").image({ width: 200 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"### 👉 Les cellules","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"Les notebooks Observable sont composés de cellules.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"### 👉 Les cellules de texte (markdown)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"Voici du texte en *italic* ou en __gras__ avec un [lien](https://observablehq.com/).","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"### 👉 Les cellules html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"

ceci est du texte surligné en rouge.

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"

","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":555,"value":"### 👉 Les formules","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"tex`_{n+1} = 2^{n+1}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"c = \\pm\\sqrt{a^2 + b^2}","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"### 👉 Les cellules de code (ojs)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"a = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"b = 6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"c = a + b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"x = {\n let val1 = 8;\n let val2 = 7;\n return val1 * val2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"function sum(a, b) {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"sum(10, 30)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"multi = (a, b) => a * b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"multi(3, 8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"### 👉 Relation topologique","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"L'ordre des cellules n'a pas d'importance.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":285,"value":"e + d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"d = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"e = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"### 👉 Tout est réactif","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":295,"value":"viewof color = Inputs.color({ label: \"Couleur\", value: \"#4ab58c\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"viewof radius = Inputs.range([1, 50], {\n label: \"Rayon\",\n step: 1,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"viewof position = Inputs.range([50, 950], {\n label: \"Position\",\n step: 1,\n value: 50\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":686,"value":"### 👉 Cliquer/coder","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":683,"value":"Dans Observable, beaucoup de code peut s’écrire par simple clic.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":711,"value":"screenshotFrom20231013104313 = FileAttachment(\n \"Screenshot from 2023-10-13 10-43-13.png\"\n).image({ width: 400 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"On peut aussi aller copier les code des autres notebooks et l'adapter à ses données.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":696,"value":"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce = FileAttachment(\n \"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4.jpeg\"\n).image({ width: 400 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"### 👉 Versionnement","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":720,"value":"versionnement = FileAttachment(\"versionnement.png\").image({ width: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":308,"value":"### 👉 *Forks*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":722,"value":"fork = FileAttachment(\"fork.png\").image({ width: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"### 👉 Commentaires","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":316,"value":"### 👉 Travailler à plusieurs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":324,"value":"On peut travailler à plusieurs en même temps sur un notebook","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":319,"value":"teams = FileAttachment(\"teams.png\").image({ width: 250 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"### 👉 Ajouter des données tabulaires","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":728,"value":"attach = FileAttachment(\"attach.png\").image({ width: 30 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"Les données sont ajoutées comme des fichiers attachés.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":335,"value":"data = FileAttachment(\"stats.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"Inputs.table(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"Ou","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"data2 = await FileAttachment(\"stats.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"data2","database":"$undefined"},{"id":752,"value":"data2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"On peut aller chercher des données en ligne directement via leur url.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"cities = d3\n .csv(\n \"https://raw.githubusercontent.com/neocarto/resources/master/datasets/simplemaps_worldcities_basicv1.73/worldcities.csv\",\n d3.autoType\n )\n .then((r) => r.filter((d) => +d.population > 1000000))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"On peut aussi aller les chercher sur notre ordinateur en local.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"file = Inputs.file({ label: \"Data\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"### 👉 Ajouter des données géométriques","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":355,"value":"Pour les fonds de carte, on privilégie le format geojson car le format json est intimement lié au langage javascript.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":822,"value":"world = FileAttachment(\"countries.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"Et on peut le visualiser rapidement.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"Plot.plot({ projection: \"equal-earth\", marks: [Plot.geo(world)] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"### 👉 Les bibliothèques","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":368,"value":"Il y a plus de 2 millions de bibliothèques disponibles sur **npm**. Dans Observable, on peut les ajouter avec la fonction **`require()`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":372,"value":"Ici, je charge par exemple la bibliothèque **`geotoolbox`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":374,"value":"geo = require(\"geotoolbox\")","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"geo","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"Je peux ensuite l'utiliser","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":378,"value":"africa = geo.union(geo.filter(world, (d) => d.region == \"Africa\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"buffer = geo.buffer(africa, { dist: k })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"countries_clip = geo.clip(world, { clip: buffer })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"viewof k = Inputs.range([100, 5000], { label: \"Distance\", step: 100 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"bertin.draw({\n layers: [\n { geojson: countries_clip, fill: \"red\", stroke: \"none\", fillOpacity: 0.3 },\n { geojson: buffer, fill: \"none\", stroke: \"red\", strokeWidth: 2 },\n { geojson: world, fill: \"#CCC\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"### 👉 La bibliothèque `bertin`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":759,"value":"logo_small = FileAttachment(\"logo_small.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"[bertin.js](https://github.com/neocarto/bertin) est une librairie (un ensemble de fonctionnalités) qui permet de réaliser des cartes thématiques pour le web, **sans forcément connaitre le langage JavaScript**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":768,"value":"Elle permet de réaliser de nombreux types de cartes thématiques","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":765,"value":"bertinimages = FileAttachment(\"bertinimages.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"On charge la bibliothèque comme ceci :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":396,"value":"bertin = require(\"bertin\")","pinned":false,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"La fonction draw : ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":429,"value":"ed9b03b746abf7a9386d29470bf4a638463c5fc9131b0794a = FileAttachment(\"1ed9b03b746abf7a9386d29470bf4a638463c5fc9131b0794a5ef8c4a2c20937ee43f7df1d5b4fc9601fad9c3f6914b8224d60ebe17b22525800cd2a33675e16.svg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"Un exemple simple","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":433,"value":"bertin.draw({\n layers: [\n {\n geojson: world,\n fill: \"yellow\",\n stroke: \"red\"\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"Une représentation par cercles proportionnels","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":445,"value":"bertin.draw({\n layers: [\n {\n type: \"bubble\", // Essayer type = \"simple\", type = \"square\", type = \"spikes\"\n geojson: world,\n values: \"pop\", // <- données quantitatives absolues\n fill: \"red\",\n leg_x: 75,\n leg_y: 250,\n leg_round: -2\n },\n {\n geojson: world,\n fill: \"#CCC\"\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"Exemple de carte finalisée","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":452,"value":"viewof radiusmax = Inputs.range([30, 100], { label: \"Rayon max\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"Exemple de carte choroplèthe","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":487,"value":"bertin.draw({\n params: { projection: \"Eckert3\" }, // Paramètres généraux (marges, projection, etc.)\n layers: [\n { type: \"header\", text: \"La population mondiale\" }, // Titre\n { type: \"footer\", text: \"Fait avec bertin.js\", anchor: \"middle\" }, // Source\n // COUCHE 1 (pays)\n {\n geojson: world, // géométrie\n fill: {\n // choropleth\n type: \"choro\",\n values: \"gdppc\",\n method: \"q6\", // essayer \"jenks\", \"quantile\", \"geometric\", \"equal\"\n colors: \"Spectral\", // Essayer \"PuBuGn\"\n leg_x: 100,\n leg_y: 200,\n leg_title: \"GDP per capita\",\n leg_roubd: 0\n },\n tooltip: [\"$name\", \"$gdppc\"] // Infobulle\n },\n { type: \"graticule\" }, // Lignes de latitude et longitude\n { type: \"outline\" } // coutour de la Terre dans la projection\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"Quelques exemples de notebooks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":450,"value":"gallery","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"Un tuto","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":619,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"## Bibliographie","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"- Bostock M. (2021). Script for Data Analysis, https://towardsdatascience.com/javascript-for-data-analysis-2e8e7dbf63a7\n- Bostock M., Ogievetsky V., Heer J. (2011). D³ Data-Driven Documents, IEEE, Volume: 17, https://ieeexplore.ieee.org/abstract/document/6064996\n- Lambert N, Giraud T, Viry Matthieu and, Ysebaert R. Cartographier pour le web avec la bibliothèque JavaScript ‘bertin‘. In: SAGEO. 2023.\n- The Observable zealot, par Philippe Rivère. [[voir](https://observablehq.com/@fil/the-observable-zealot)]","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":634,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"import { gallery } from \"@neocartocnrs/hello-bertin-js\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":632,"value":"Reveal = require(\"reveal.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"import {ForceGraph} from \"@d3/force-directed-graph-component\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W30","stdlib":"1","titling":"auto"}} 2d:"$2c:body"