31:[{"id":"0121fb7b1107cb84f05457853bdc8b1d07bb5a6f9f76984a9b8c11ae1faca39d3e2726de04a4f5a56c24a56c285b26b0101b06825fa5d5d70cf9af5b9e591a1c","href":"https://static.observableusercontent.com/files/0121fb7b1107cb84f05457853bdc8b1d07bb5a6f9f76984a9b8c11ae1faca39d3e2726de04a4f5a56c24a56c285b26b0101b06825fa5d5d70cf9af5b9e591a1c","name":"javascript.png","type":"image/png","lastModified":1728639792544.246,"size":1992},{"id":"7218d58f8a005dda347736b2651327121212dab8bd9ad204d94cba83cbb77f14dce2422bd8c3b842c144841861c7c6cfee2dc8475feba6c64d22c001d0ffe9ce","href":"https://static.observableusercontent.com/files/7218d58f8a005dda347736b2651327121212dab8bd9ad204d94cba83cbb77f14dce2422bd8c3b842c144841861c7c6cfee2dc8475feba6c64d22c001d0ffe9ce","name":"quarto.png","type":"image/png","lastModified":1728640483876.534,"size":128028},{"id":"f8bebc1989379f0c701bd0e624943c54fc6ac3d765a43de30b9eacae7385149ccc2b6a9c1008a330f8737fd9c3f67f14b58bb7c9311d555e76b9d47a61382239","href":"https://static.observableusercontent.com/files/f8bebc1989379f0c701bd0e624943c54fc6ac3d765a43de30b9eacae7385149ccc2b6a9c1008a330f8737fd9c3f67f14b58bb7c9311d555e76b9d47a61382239","name":"dataapps.png","type":"image/png","lastModified":1728640484016.343,"size":287533},{"id":"2d02269f009c8e9fd351b93f4344ae2f42d267e3577a3bbaf1d0d320c973e54f2de95ad6bd2c6f8bfd6b40c29ef9d11df00dd4110119824de51157b74e80a664","href":"https://static.observableusercontent.com/files/2d02269f009c8e9fd351b93f4344ae2f42d267e3577a3bbaf1d0d320c973e54f2de95ad6bd2c6f8bfd6b40c29ef9d11df00dd4110119824de51157b74e80a664","name":"notebook.png","type":"image/png","lastModified":1700566556890.335,"size":358027},{"id":"37a9ac7e0150c5785a8bb5ad16b97e510950fc4a0471c3a51392cd69ce3b91318b444e25d5dc95b8702583f77f9c1da4cc6b975aa2b07c0c0fee2616dfc2cfb5","href":"https://static.observableusercontent.com/files/37a9ac7e0150c5785a8bb5ad16b97e510950fc4a0471c3a51392cd69ce3b91318b444e25d5dc95b8702583f77f9c1da4cc6b975aa2b07c0c0fee2616dfc2cfb5","name":"topo.png","type":"image/png","lastModified":1698069437952.018,"size":187102},{"id":"29938b8558566942932f47b514d540654c41117f83f1fcac79a9056e8914ddbf38d987012b5ac9ba870d844cdda1e95c886fb38a91cff7c0e8f059f2e5ca5dbe","href":"https://static.observableusercontent.com/files/29938b8558566942932f47b514d540654c41117f83f1fcac79a9056e8914ddbf38d987012b5ac9ba870d844cdda1e95c886fb38a91cff7c0e8f059f2e5ca5dbe","name":"versionnement.png","type":"image/png","lastModified":1698069437952.018,"size":1313},{"id":"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4","href":"https://static.observableusercontent.com/files/bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4","name":"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4.jpeg","type":"image/jpeg","lastModified":1698069437952.018,"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":1698069437952.018,"size":70776},{"id":"d850b6e291848ee8a3e15122f2057670d63155e58f3206117744f142fedb426d8910e71d6d0693a1793c5ce9ea25bd5e324b791b16351d793f81d23cf3f0d471","href":"https://static.observableusercontent.com/files/d850b6e291848ee8a3e15122f2057670d63155e58f3206117744f142fedb426d8910e71d6d0693a1793c5ce9ea25bd5e324b791b16351d793f81d23cf3f0d471","name":"huma.png","type":"image/png","lastModified":1698069437952.018,"size":219391},{"id":"d2855d3e9abf61feceffe806eba7cb2a23cd8d04b7949bdd8f07454b46c0bbeae5ee7db0c0c3126f69faf299a94bf387f25dba70fc765670f6e7f15d5d6a6125","href":"https://static.observableusercontent.com/files/d2855d3e9abf61feceffe806eba7cb2a23cd8d04b7949bdd8f07454b46c0bbeae5ee7db0c0c3126f69faf299a94bf387f25dba70fc765670f6e7f15d5d6a6125","name":"teams.png","type":"image/png","lastModified":1698069437952.018,"size":14498},{"id":"42b2eedbd8af6427050ac874341b9721fb82d2ae345e5d42aabc1a03db1740da234fba6e4ea2e59caca5553cee20a4bc4a2d8796d65b6d14520b3755bff4e887","href":"https://static.observableusercontent.com/files/42b2eedbd8af6427050ac874341b9721fb82d2ae345e5d42aabc1a03db1740da234fba6e4ea2e59caca5553cee20a4bc4a2d8796d65b6d14520b3755bff4e887","name":"frise.png","type":"image/png","lastModified":1698069437952.018,"size":60522},{"id":"a2a201157757caab34fcc6ce80fa64abec5e2aa520b51def2c145ec066783004e561e7429a17a02f291ce77bb0f4b82b5531324b9d84ca19c9519f0ca180bc5b","href":"https://static.observableusercontent.com/files/a2a201157757caab34fcc6ce80fa64abec5e2aa520b51def2c145ec066783004e561e7429a17a02f291ce77bb0f4b82b5531324b9d84ca19c9519f0ca180bc5b","name":"observable.png","type":"image/png","lastModified":1698069437952.018,"size":22025},{"id":"9d3904fa12baa09ed02a86894c0b24ff5407b024e0a3aac4fa53e3884e8c79f9d91a60e3d5a0e09c627e19b5f6157878c0f46b790b4048fa50d67e25676912e2","href":"https://static.observableusercontent.com/files/9d3904fa12baa09ed02a86894c0b24ff5407b024e0a3aac4fa53e3884e8c79f9d91a60e3d5a0e09c627e19b5f6157878c0f46b790b4048fa50d67e25676912e2","name":"trendings.png","type":"image/png","lastModified":1699951720988.581,"size":745089},{"id":"e4bf25d0b710a3ff7151d8e442c045a1769b29d0afe6cd180c495a24ae493cd90e6e44ac6a90a4011139e38900118767a97777b7193498b01cc2f44ebd41680a","href":"https://static.observableusercontent.com/files/e4bf25d0b710a3ff7151d8e442c045a1769b29d0afe6cd180c495a24ae493cd90e6e44ac6a90a4011139e38900118767a97777b7193498b01cc2f44ebd41680a","name":"Screenshot from 2025-10-01 11-31-47.png","type":"image/png","lastModified":1759311143727.281,"size":107179},{"id":"13e7b5ddc541b5662270974abc21ea25d6365886f19ba1d5b460d37130ab94e7169f6713e9327c59f145763253964dfa21b2d7025a4294875e48a3dc2e2ca457","href":"https://static.observableusercontent.com/files/13e7b5ddc541b5662270974abc21ea25d6365886f19ba1d5b460d37130ab94e7169f6713e9327c59f145763253964dfa21b2d7025a4294875e48a3dc2e2ca457","name":"Screenshot from 2025-11-07 11-02-52.png","type":"image/png","lastModified":1762509785673.073,"size":34851}] 2f:{"title":"Observable kezako ?","cells":[{"id":0,"value":"# Observable kezako ?","pinned":false,"hidden":false,"mode":"md"},{"id":310,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"observable = FileAttachment(\"observable.png\").image({ width: 240 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"## Les notebooks Observable","pinned":false,"hidden":false,"mode":"md"},{"id":350,"value":"**Observablehq** est une plateforme 100% en ligne hébergeant des **notebooks** (carnet numériques) dédiés à l'analyse et le représentation de données pour le web, basées sur le langage **JavaScript**. ","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":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":583,"value":"## Pourquoi le JavaScript ?","pinned":false,"hidden":false,"mode":"md"},{"id":588,"value":"javascript = FileAttachment(\"javascript.png\").image({ width: 100 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":592,"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. ","pinned":false,"hidden":false,"mode":"md"},{"id":595,"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":597,"value":"Aujourd'hui, il existe **une grande communauté** qui utilise ce langage. JavaScript est à ce jour un des langages les plus utilisé par les développeurs informatiques. Il y a à ce jour plus de 2 millions de packages disponibles sur npm.","pinned":false,"hidden":false,"mode":"md"},{"id":601,"value":"## JavaScript pour les sciences de l'information géographique","pinned":false,"hidden":false,"mode":"md"},{"id":603,"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. Mais certains pensent que le bon candidat, c'est le javascript. C'est le cas de __Mike Bostock__ (*Université Stanford, New York Times, Observable*). Il avance les arguments suivants : ","pinned":false,"hidden":false,"mode":"md"},{"id":605,"value":"- C'est le langage du **web**.\n- Tout le monde a JavaScript qui tourne sur sa machine. **Rien à installer**. Il suffit d'un 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.","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":651,"value":"En savoir plus sur le langage JavaScript : https://observablehq.com/@sd-progwebdataviz/rappels-javascript?collection=@sd-progwebdataviz/guide-et-exemples","pinned":false,"hidden":false,"mode":"md"},{"id":320,"value":"## L'Observable JavaScript (ojs)","pinned":false,"hidden":false,"mode":"md"},{"id":616,"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":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":42,"value":"## Des 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é.","pinned":false,"hidden":false,"mode":"md"},{"id":398,"value":"La plupart sont en anglais, mais il n'y a pas de règle.","pinned":false,"hidden":false,"mode":"md"},{"id":395,"value":"trendings = FileAttachment(\"trendings.png\").image({ width: 700 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":621,"value":"Voir https://observablehq.com/trending","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"## 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":401,"value":"// Ceci est une cellule","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"## Les cellules Markdown","pinned":false,"hidden":false,"mode":"md"},{"id":707,"value":"# Bonjour jkxlkjdlkj lkles *amis*","pinned":true,"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":403,"value":"Dessin raster (canvas)","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"

","pinned":true,"hidden":false,"mode":"md"},{"id":406,"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":89,"value":"a = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"b = 46","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"c = a + b","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"x = {\n let val1 = 8;\n let val2 = 7;\n return val1 * val2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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":"## 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":499,"value":"notebook = FileAttachment(\"notebook.png\").image({ width: 600 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"## Relation topologique","pinned":false,"hidden":false,"mode":"md"},{"id":110,"value":"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":457,"value":"e * d","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"d = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":845,"value":"e = 468990809","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":118,"value":"## Les Inputs","pinned":false,"hidden":false,"mode":"md"},{"id":120,"value":"Observable propose de nombreux Inputs clé en main","pinned":false,"hidden":false,"mode":"md"},{"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([\"carto\", \"SIG\", \"Jazz\", \"Classique\"], {\n label: \"Ma musique\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":126,"value":"viewof search = Inputs.search(cars)","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"search","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"## Tout est réactif 🔥","pinned":false,"hidden":false,"mode":"md"},{"id":374,"value":"Voici un cercle dessiné en SVG","pinned":false,"hidden":false,"mode":"md"},{"id":376,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":381,"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":901,"value":"","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":307,"value":"## Forks","pinned":false,"hidden":false,"mode":"md"},{"id":658,"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":791,"value":"screenshotFrom20251001113147 = FileAttachment(\n \"Screenshot from 2025-10-01 11-31-47.png\"\n).image({ width: 670 })","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","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":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":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":432,"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":624,"value":"## Ojs en dehors des notebooks Observable","pinned":false,"hidden":false,"mode":"md"},{"id":797,"value":"Depuis juillet 2025, il est possible d'utiliser Observable en dehors de la plateforme, ce qui permet de travailler hors ligne et de déployer le notebook où on veut. C'est totalement Open Source.","pinned":false,"hidden":false,"mode":"md"},{"id":799,"value":"screenshotFrom20251107110252 = FileAttachment(\n \"Screenshot from 2025-11-07 11-02-52.png\"\n).image({ width: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":803,"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":785,"value":"Il existe aussi [Observable Framework](https://observablehq.com/framework/), basé sur le même principe, qui permet de réaliser des dashboards. ","pinned":false,"hidden":false,"mode":"md"},{"id":642,"value":"dataapps = FileAttachment(\"dataapps.png\").image({ width: 800 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"La technologie **ojs** est également 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). 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":637,"value":"quarto = FileAttachment(\"quarto.png\").image({ width: 800 })\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"En résumé, vous n'êtes pas prisonniers de la Plateforme Observablehq ! ","pinned":false,"hidden":false,"mode":"md"},{"id":428,"value":"### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":417,"value":"import {Treemap} from \"@d3/treemap-component\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"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":579,"value":"import { disclaimer } from \"d41fbc44e11a58e6\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":913,"value":"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}