Hello, world!

2f:[{"id":"7218d58f8a005dda347736b2651327121212dab8bd9ad204d94cba83cbb77f14dce2422bd8c3b842c144841861c7c6cfee2dc8475feba6c64d22c001d0ffe9ce","href":"https://static.observableusercontent.com/files/7218d58f8a005dda347736b2651327121212dab8bd9ad204d94cba83cbb77f14dce2422bd8c3b842c144841861c7c6cfee2dc8475feba6c64d22c001d0ffe9ce","name":"quartoojs.png","type":"image/png","lastModified":1776411648837.854,"size":128028},{"id":"f8bebc1989379f0c701bd0e624943c54fc6ac3d765a43de30b9eacae7385149ccc2b6a9c1008a330f8737fd9c3f67f14b58bb7c9311d555e76b9d47a61382239","href":"https://static.observableusercontent.com/files/f8bebc1989379f0c701bd0e624943c54fc6ac3d765a43de30b9eacae7385149ccc2b6a9c1008a330f8737fd9c3f67f14b58bb7c9311d555e76b9d47a61382239","name":"dashboard.png","type":"image/png","lastModified":1776411648837.854,"size":287533},{"id":"d238929c50e899bb9b97629f77c3710a807f16eb7a988cf5518c918d65d32dc76d6c96468d4f527d35eae4edb9974f7e2343587c838e21969ced1e41082e438f","href":"https://static.observableusercontent.com/files/d238929c50e899bb9b97629f77c3710a807f16eb7a988cf5518c918d65d32dc76d6c96468d4f527d35eae4edb9974f7e2343587c838e21969ced1e41082e438f","name":"fork.png","type":"image/png","lastModified":1776411648837.854,"size":1176},{"id":"29938b8558566942932f47b514d540654c41117f83f1fcac79a9056e8914ddbf38d987012b5ac9ba870d844cdda1e95c886fb38a91cff7c0e8f059f2e5ca5dbe","href":"https://static.observableusercontent.com/files/29938b8558566942932f47b514d540654c41117f83f1fcac79a9056e8914ddbf38d987012b5ac9ba870d844cdda1e95c886fb38a91cff7c0e8f059f2e5ca5dbe","name":"versionnement.png","type":"image/png","lastModified":1776411648837.854,"size":1313},{"id":"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4","href":"https://static.observableusercontent.com/files/bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4","name":"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4.jpeg","type":"image/jpeg","lastModified":1776411648837.854,"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":1776411648837.854,"size":70776},{"id":"d850b6e291848ee8a3e15122f2057670d63155e58f3206117744f142fedb426d8910e71d6d0693a1793c5ce9ea25bd5e324b791b16351d793f81d23cf3f0d471","href":"https://static.observableusercontent.com/files/d850b6e291848ee8a3e15122f2057670d63155e58f3206117744f142fedb426d8910e71d6d0693a1793c5ce9ea25bd5e324b791b16351d793f81d23cf3f0d471","name":"huma.png","type":"image/png","lastModified":1776411648837.854,"size":219391},{"id":"d2855d3e9abf61feceffe806eba7cb2a23cd8d04b7949bdd8f07454b46c0bbeae5ee7db0c0c3126f69faf299a94bf387f25dba70fc765670f6e7f15d5d6a6125","href":"https://static.observableusercontent.com/files/d2855d3e9abf61feceffe806eba7cb2a23cd8d04b7949bdd8f07454b46c0bbeae5ee7db0c0c3126f69faf299a94bf387f25dba70fc765670f6e7f15d5d6a6125","name":"teams.png","type":"image/png","lastModified":1776411648837.854,"size":14498},{"id":"42b2eedbd8af6427050ac874341b9721fb82d2ae345e5d42aabc1a03db1740da234fba6e4ea2e59caca5553cee20a4bc4a2d8796d65b6d14520b3755bff4e887","href":"https://static.observableusercontent.com/files/42b2eedbd8af6427050ac874341b9721fb82d2ae345e5d42aabc1a03db1740da234fba6e4ea2e59caca5553cee20a4bc4a2d8796d65b6d14520b3755bff4e887","name":"frise.png","type":"image/png","lastModified":1776411648837.854,"size":60522},{"id":"a2a201157757caab34fcc6ce80fa64abec5e2aa520b51def2c145ec066783004e561e7429a17a02f291ce77bb0f4b82b5531324b9d84ca19c9519f0ca180bc5b","href":"https://static.observableusercontent.com/files/a2a201157757caab34fcc6ce80fa64abec5e2aa520b51def2c145ec066783004e561e7429a17a02f291ce77bb0f4b82b5531324b9d84ca19c9519f0ca180bc5b","name":"observable.png","type":"image/png","lastModified":1776411648837.854,"size":22025},{"id":"9d3904fa12baa09ed02a86894c0b24ff5407b024e0a3aac4fa53e3884e8c79f9d91a60e3d5a0e09c627e19b5f6157878c0f46b790b4048fa50d67e25676912e2","href":"https://static.observableusercontent.com/files/9d3904fa12baa09ed02a86894c0b24ff5407b024e0a3aac4fa53e3884e8c79f9d91a60e3d5a0e09c627e19b5f6157878c0f46b790b4048fa50d67e25676912e2","name":"trendings.png","type":"image/png","lastModified":1776411648837.854,"size":745089},{"id":"2d02269f009c8e9fd351b93f4344ae2f42d267e3577a3bbaf1d0d320c973e54f2de95ad6bd2c6f8bfd6b40c29ef9d11df00dd4110119824de51157b74e80a664","href":"https://static.observableusercontent.com/files/2d02269f009c8e9fd351b93f4344ae2f42d267e3577a3bbaf1d0d320c973e54f2de95ad6bd2c6f8bfd6b40c29ef9d11df00dd4110119824de51157b74e80a664","name":"notebook.png","type":"image/png","lastModified":1776411648837.854,"size":358027},{"id":"37a9ac7e0150c5785a8bb5ad16b97e510950fc4a0471c3a51392cd69ce3b91318b444e25d5dc95b8702583f77f9c1da4cc6b975aa2b07c0c0fee2616dfc2cfb5","href":"https://static.observableusercontent.com/files/37a9ac7e0150c5785a8bb5ad16b97e510950fc4a0471c3a51392cd69ce3b91318b444e25d5dc95b8702583f77f9c1da4cc6b975aa2b07c0c0fee2616dfc2cfb5","name":"topo.png","type":"image/png","lastModified":1776411648837.854,"size":187102},{"id":"13e7b5ddc541b5662270974abc21ea25d6365886f19ba1d5b460d37130ab94e7169f6713e9327c59f145763253964dfa21b2d7025a4294875e48a3dc2e2ca457","href":"https://static.observableusercontent.com/files/13e7b5ddc541b5662270974abc21ea25d6365886f19ba1d5b460d37130ab94e7169f6713e9327c59f145763253964dfa21b2d7025a4294875e48a3dc2e2ca457","name":"obs2.png","type":"image/png","lastModified":1776411648837.854,"size":34851},{"id":"adcfe40816049f4e7fa5e261edd67747a2aa8b97a25fbc887c3ecdfbd61aed882c8ba73bf34e29ce26abacdbada5ea75b075f20c6f01ee8fe53794316028bf4e","href":"https://static.observableusercontent.com/files/adcfe40816049f4e7fa5e261edd67747a2aa8b97a25fbc887c3ecdfbd61aed882c8ba73bf34e29ce26abacdbada5ea75b075f20c6f01ee8fe53794316028bf4e","name":"Screenshot from 2025-11-26 10-36-34.png","type":"image/png","lastModified":1776411648837.854,"size":15822},{"id":"7e69f3293eaaf471d7f1c0d92844e1737fb97d1e6fdab8b9243e46557b2a3d1ba004bd0f4ee9504a68049a644d2397a91c8233e8dbf4dd51c431a762db4041b8","href":"https://static.observableusercontent.com/files/7e69f3293eaaf471d7f1c0d92844e1737fb97d1e6fdab8b9243e46557b2a3d1ba004bd0f4ee9504a68049a644d2397a91c8233e8dbf4dd51c431a762db4041b8","name":"quarto.jpg","type":"image/jpeg","lastModified":1776411648837.854,"size":32671},{"id":"dfd755da145b0d3b9aedefb2fe9d95f9f5cb3ba4d17b2cb2471ab08d22bc15273210665cdc3aa41b9f2fe63741827ea71850c00eae589f0ea3acccff1ebad756","href":"https://static.observableusercontent.com/files/dfd755da145b0d3b9aedefb2fe9d95f9f5cb3ba4d17b2cb2471ab08d22bc15273210665cdc3aa41b9f2fe63741827ea71850c00eae589f0ea3acccff1ebad756","name":"data.csv","type":"text/csv","lastModified":1776411648837.854,"size":3814},{"id":"219f79f194262aaf9cf5a1639574eecdc5f8dbc2244608e4dbbc04308e4730f01e34978dfb2fbe88e7c50b807e088455cc79346333ec52092f3b2707d9626849","href":"https://static.observableusercontent.com/files/219f79f194262aaf9cf5a1639574eecdc5f8dbc2244608e4dbbc04308e4730f01e34978dfb2fbe88e7c50b807e088455cc79346333ec52092f3b2707d9626849","name":"cities.json","type":"application/json","lastModified":1776411648837.854,"size":144791},{"id":"9499efa92eeb6259145349c236483338c8cc76128e1417f69f5e0ba4f3a5a147fc53f41d4643f307c2ba7f0191156cf6dfbe7ee7f4fce5f7b4a5713337b5056f","href":"https://static.observableusercontent.com/files/9499efa92eeb6259145349c236483338c8cc76128e1417f69f5e0ba4f3a5a147fc53f41d4643f307c2ba7f0191156cf6dfbe7ee7f4fce5f7b4a5713337b5056f","name":"maddison.csv","type":"text/csv","lastModified":1776411648837.854,"size":9810},{"id":"e4bf25d0b710a3ff7151d8e442c045a1769b29d0afe6cd180c495a24ae493cd90e6e44ac6a90a4011139e38900118767a97777b7193498b01cc2f44ebd41680a","href":"https://static.observableusercontent.com/files/e4bf25d0b710a3ff7151d8e442c045a1769b29d0afe6cd180c495a24ae493cd90e6e44ac6a90a4011139e38900118767a97777b7193498b01cc2f44ebd41680a","name":"e4bf25d0b710a3ff7151d8e442c045a1769b29d0afe6cd180c495a24ae493cd90e6e44ac6a90a4011139e38900118767a97777b7193498b01cc2f44ebd41680a.png","type":"image/png","lastModified":1776411648837.854,"size":107179}] 2d:{"title":"Observable kezako ?","cells":[{"id":0,"value":"# Observable kezako ?","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":516,"value":"Observable est accessible à l'adresse https://observablehq.com. Vous n'avez qu'à créer un compte gratuitement.","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":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** ou **privé**. 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":511,"value":"Voir https://observablehq.com/trending","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":712,"value":"L","pinned":true,"hidden":false,"mode":"ojs"},{"id":721,"value":"map = {\n const container = yield htl.html`

`;\n const map = L.map(container).setView([37.774, -122.423], 13);\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution:\n \"© OpenStreetMap contributors\"\n }).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"dot`digraph { a -> b; }`","pinned":true,"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 scripts séparés les uns des autres. elles s’exécutent 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":false,"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 à la 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 = 50","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"b = 100","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":80,"value":"

LA PROGRAMMATION LETTRÉE

","pinned":false,"hidden":false,"mode":"md"},{"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":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 = 15","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"e = 20","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":728,"value":"

GESTION ET MANIPULATION DES DONNÉES

","pinned":false,"hidden":false,"mode":"md"},{"id":737,"value":"Le moyen de plus simple d'ajouter des données dans Observable, est de les attacher comme une piece jointe via l'épingle à droite de l'écran.","pinned":false,"hidden":false,"mode":"md"},{"id":733,"value":"screenshotFrom20251126103634 = FileAttachment(\n \"Screenshot from 2025-11-26 10-36-34.png\"\n).image({ width: 500 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":740,"value":"Puis, on utilise l'instruction [**`FileAttachment(\"nom-du-fichier\")`**](https://observablehq.com/@observablehq/file-attachments). Puis, en fonction du format du fichier, on utilisera différentes instructions.","pinned":false,"hidden":false,"mode":"md"},{"id":742,"value":"data = FileAttachment(\"data.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":747,"value":"On peut ensuite manipuler les données directement en JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":751,"value":"data.filter((d) => d.name == \"Gabon\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":749,"value":"newdata = data.map((d) => ({\n id: d.iso3,\n nom: d.name,\n population: Math.round(d.POP * 1000) // on convertit en milliers et on arrondi\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":730,"value":"Avec **`arquero`** (proche du package R dplyr) ou **`duckdb`**, de nombreux outils sont proposés pour manupiler les données","pinned":false,"hidden":false,"mode":"md"},{"id":769,"value":"aq\n .from(data)\n .select(\"iso3\", \"name\", \"POP\", \"PIB\")\n .orderby(\"POP\")\n .filter((d) => d[\"POP\"] > 50)\n .relocate(\"PIB\", { before: \"POP\" })\n .objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":775,"value":"DuckDB est un système de gestion de bases de données relationnelles (SGBDR) en mémoire, conçu pour être ultra-rapide pour l'analyse de données. Elle fonctionne directement dans la mémoire de l'ordinateur sans serveur dédié.","pinned":false,"hidden":false,"mode":"md"},{"id":785,"value":"database = DuckDBClient.of({\n cities: FileAttachment(\"cities.json\"),\n maddison: FileAttachment(\"maddison.csv\")\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":787,"value":"maincities = database.query(`\nSELECT *\nFROM cities\nWHERE population > 10000\n`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":789,"value":"PopulationByCountries = database.query(`\nSELECT\n iso3,\nSUM(TRY_CAST(population AS DOUBLE)) AS total_population\nFROM cities\nGROUP BY iso3;\n`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":791,"value":"Une autre façon très pratique de manipuler les données, est d'utiliser les data table d'Observable. Avec un fichier csv, il suffit juste cliquer sur le bouton ci-dessous pour insérer les données dans le notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":793,"value":"mydata = await FileAttachment(\"data.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":795,"value":"mydata","pinned":true,"hidden":false,"mode":"ojs"},{"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":807,"value":"url = \"https://data.geopf.fr/altimetrie/1.0/calcul/alti/rest/elevation.json?lon=2.3430894611004986&lat=48.88685856740631&resource=ign_lidar_hd_mnx_multi_wld\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":805,"value":"console.log(d3.json(url)) // renvoie une promise","pinned":true,"hidden":false,"mode":"ojs"},{"id":803,"value":"d3.json(url) // la promesse est résolue","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"

LES INPUTS

","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"Observable propose de nombreux composants web permettant d'interagir avec l'utilisateur. Ce sont les **Inputs**.","pinned":false,"hidden":false,"mode":"md"},{"id":441,"value":"Inputs","pinned":true,"hidden":false,"mode":"ojs"},{"id":1091,"value":"Grace au mot clé `viewof`, on récupère directement la valeur","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":472,"value":"radios","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\", \"Toulouse\"], {\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":1096,"value":"viewof slider = Inputs.range([1, 1000], { label: \"slider\", step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1099,"value":"slider","pinned":true,"hidden":false,"mode":"ojs"},{"id":1101,"value":"md`la valeur de mon slider est ${slider}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"viewof years = Inputs.range([2, 120], { label: \"Age\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":827,"value":"function ageToEmoji(age) {\n if (age <= 2) {\n return \"👶\";\n } else if (age <= 16) {\n return \"🧒\";\n } else if (age <= 65) {\n return \"🧑\";\n } else if (age < 100) {\n return \"👴\";\n } else {\n return \"☠️\";\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"md` # Je m'appelle Nicolas et j'ai **${years}** ans ${ageToEmoji(years)}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"Voici un autre exemple avec 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 git. 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":845,"value":"e4bf25d0b710a3ff7151d8e442c045a1769b29d0afe6cd180c = FileAttachment(\n \"e4bf25d0b710a3ff7151d8e442c045a1769b29d0afe6cd180c495a24ae493cd90e6e44ac6a90a4011139e38900118767a97777b7193498b01cc2f44ebd41680a.png\"\n).image({ width: 700 })","pinned":false,"hidden":false,"mode":"ojs"},{"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'import 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":1166,"value":"import { IWD } from \"@neocartocnrs/strikes\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":207,"value":"import { IWD as premiermai } from \"@neocartocnrs/strikes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"Ou si on souhaite récupérer directement le graphique","pinned":false,"hidden":false,"mode":"md"},{"id":450,"value":"import { chart1 } from \"@neocartocnrs/strikes\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":452,"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\", 5)","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).\n- Voir la [carte seule](https://observablehq.com/embed/@neocartocnrs/la-retraite-avant-larthrite?cells=viewof+indic%2Cviewof+toggle%2Cmap).\n- Et voir 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). ","pinned":false,"hidden":false,"mode":"md"},{"id":853,"value":"quarto = FileAttachment(\"quarto.jpg\").image({ width: 200 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"quartoojs = FileAttachment(\"quartoojs.png\").image({ width: 900 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":858,"value":"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). 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":482,"value":"

Observable 2.0

","pinned":false,"hidden":false,"mode":"md"},{"id":484,"value":"Depuis juillet 2025, Observable a lancé Observable 2.0 qui permet de travailler en local et d'héberger vous mêmes vos notebooks pour les déployer ou vous voulez.","pinned":false,"hidden":false,"mode":"md"},{"id":863,"value":"obs2 = FileAttachment(\"obs2.png\").image({ width: 400 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":874,"value":"Dans un fichier texte, on écrit ce genre de code","pinned":false,"hidden":false,"mode":"md"},{"id":868,"value":"```js\n\n\n Hello, world!\n \n \n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":699,"value":"Voir [https://observablehq.com/notebook-kit/](https://observablehq.com/notebook-kit/) et [un exemple](https://neocarto.github.io/observable-notebooks2.0/index.html)","pinned":false,"hidden":false,"mode":"md"},{"id":701,"value":"

Observable Framework

","pinned":false,"hidden":false,"mode":"md"},{"id":697,"value":"Il existe aussi Observable Framework qui est plutôt déstiné à créer des dashboards.","pinned":false,"hidden":false,"mode":"md"},{"id":490,"value":"dashboard = FileAttachment(\"dashboard.png\").image({ width: 900 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"Par exemple : https://neocarto.github.io/observable-sandbox/bars","pinned":false,"hidden":false,"mode":"md"},{"id":705,"value":"

Observable Canvases

","pinned":false,"hidden":false,"mode":"md"},{"id":886,"value":"Il existe aussi [Observable Canvases](https://observablehq.com/blog/introducing-canvases-early-access) qui permet d'explorer, de visualiser et d'analyser des données. En combinant des requêtes, des tableaux, des graphiques, des croquis à main levée, des surlignages, des notes et bien plus encore, le tout enrichi d'une IA contextuelle","pinned":false,"hidden":false,"mode":"md"},{"id":707,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":892,"value":"

En résumé

","pinned":false,"hidden":false,"mode":"md"},{"id":894,"value":"En résumé, Observable est un formidable outil pour faire de l'analyse interactive de données et construire des représentations graphiques. Cela permet de faire de la veille et de travailler à plusieurs de façon collaborative.","pinned":false,"hidden":false,"mode":"md"},{"id":899,"value":" De plus, vous n'êtes pas prisonniers de la Plateforme Observablehq !","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":1056,"value":"

Aller plus loin

","pinned":false,"hidden":false,"mode":"md"},{"id":1061,"value":"Qu'est ce que la réactivité ?","pinned":false,"hidden":false,"mode":"md"},{"id":1058,"value":"

\n \n

","pinned":false,"hidden":false,"mode":"html"},{"id":1063,"value":"Qu'est ce qu'est observable ?","pinned":false,"hidden":false,"mode":"md"},{"id":1065,"value":"

\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"### *Appendix*","pinned":false,"hidden":false,"mode":"md"},{"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":952,"value":"import {Pack} from \"@d3/pack\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1034,"value":"import {ForceGraph} from \"@d3/force-directed-graph\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1042,"value":"import {Sunburst} from \"@d3/sunburst\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1049,"value":"import {Treemap} from \"@d3/treemap\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W2f","stdlib":"1","titling":"auto"}