2c:null 2d:["$","title",null,{"children":"Présentation d'Observable | Geovis-M2-GEOMAS | Observable"}] 32:T5c4,chartIntro = { const k = width / 120; const r = d3.randomUniform(k, k * 4); const n = 4; const data = Array.from({length: 100}, (_, i) => ({r: r(), group: i && (i % n + 1)})); const height = width / 3; const color = d3.scaleOrdinal(d3.schemeTableau10); const context = DOM.context2d(width, height); const nodes = data.map(Object.create); const simulation = d3.forceSimulation(nodes) .alphaTarget(0.3) .velocityDecay(0.1) .force("x", d3.forceX().strength(0.01)) .force("y", d3.forceY().strength(0.01)) .force("collide", d3.forceCollide().radius(d => d.r + 1).iterations(3)) .force("charge", d3.forceManyBody().strength((d, i) => i ? 0 : -width * 2 / 3)) .on("tick", ticked); d3.select(context.canvas) .on("touchmove", event => event.preventDefault()) .on("pointermove", pointermoved); invalidation.then(() => simulation.stop()); function pointermoved(event) { const [x, y] = d3.pointer(event); nodes[0].fx = x - width / 2; nodes[0].fy = y - height / 2; } function ticked() { context.clearRect(0, 0, width, height); context.save(); context.translate(width / 2, height / 2); for (let i = 1; i < nodes.length; ++i) { const d = nodes[i]; context.beginPath(); context.moveTo(d.x + d.r, d.y); context.arc(d.x, d.y, d.r, 0, 2 * Math.PI); context.fillStyle = color(d.group); context.fill(); } context.restore(); } return context.canvas; }33:T5aa,## Qu'est-ce qu'Observable ?
**ObservableHQ** est une société, fondée par Mike Bostock (le créateur de D3.js) et Melody Meckfessel en 2016, proposant une solution 100% en ligne pour concevoir, partager et diffuser des notebooks JavaScript, avec un focus sur la visualisation de données. Un des objectifs de la plateforme est de faire collaborer une communauté autour de la visualisation de données. En 2017 Mike Bostock a écrit un article décrivant les objectifs d'une telle plateforme : [A better way to code](https://medium.com/@mbostock/a-better-way-to-code-2b1d2876a3a0) (vous pouvez aussi en savoir plus [ici](https://observablehq.com/about)). Pour résumer : 1. Réactivité 2. Visibilité 3. Réutilisabilité 4. Portabilité Comme les autres solutions de notebooks, les notebooks Observable permettent donc de faire de la [programmation lettrée](https://fr.wikipedia.org/wiki/Programmation_lettr%C3%A9e) (*literate programming*), c'est à dire notamment de combiner code et éléments en langage naturel dans un même document. Par ailleurs, un des avantages de la plateforme et de ces notebooks est de pouvoir modifier et adapter facilement le code des notebooks consultés (et même importer du code depuis des notebooks existants). Au cours de ce cours, même lorsque qu'il ne s'agit pas d'un exercice, n'hésitez pas à modifier les différents codes que vous rencontrez afin de bien comprendre leur fonctionnement.34:T431,## Les cellules itèrent implicitement sur les générateurs Ce n'est pas une fonctionnalité que nous exploiterons réellement, mais les cellules itèrent implicitement sur les [générateurs](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/function*#description). Si une cellule utilise le mot clé [**`yield`**](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/yield), toute cellule qui s'y réfère verra la plus récente valeur retournée avec `yield`.

À titre d'exemple, considérez la cellule qui suit. La valeur envoyée avec `yield` est "reçue" par la cellule au fur et à mesure que le code est exécuté. La cellule garde la dernière valeur renvoyée par `yield` (ou celle retournée par return à la fin de la cellule si c'est le cas). Ré-exécutez le code de la cellule suivante (en cliquant sur le triangle bleu à droite de la cellule ou en mettant votre curseur dans la cellule et en appuyant sur Shift + Enter)35:T7df,### Versionnement L'historique des modifications effectuées sur le notebook est sauvegardée et il est possible de retourner à une version précédente. Cet historique peut être consulté en cliquant sur le bouton 🕒 à droite du notebook :

### Forks En complément de la possibilité d'importer des éléments en provenance d'un notebook, il est possible de faire un *fork* d'un notebook. À la manière des outils de versionnement comme `git`, il est possible de modifier le *fork* créé et éventuellement de fusionner les modifications dans le notebook initial. ### Collaboration sur un notebook Il est possible de travailler à plusieurs sur un même notebook, en suivant en temps réel les modifications effectuées par les différents contributeurs.

Il est également possible de laisser des commentaires sur les cellules d'un notebook (cette fonctionnalité peut être désactivée si besoin). ### Interopérabilité Le *Observable JavaScript* (*`viewof`*, comportement réactif, la bibliothèque standard Observable avec les différents `Inputs`, etc.) n'est pas utilisable que dans les notebooks de la plateforme https://observablehq.com/. En effet, il est possible de l'utiliser au sein du système d'édition et de publication de documents [*Quarto*](https://quarto.org/) :

Il s'agit d'une solution populaire pour créer des documents computationnels mobilisant R, Python, Julia et Observable JavaScript qui est intégrée par défaut dans R studio. D'autres solutions existent ([plugin VS Code](https://marketplace.visualstudio.com/items?itemName=GordonSmith.js-notebook-extension-pack), avec JupyterLab, etc.) pour créer des notebook avec Observable JavaScript ailleurs que sur la plateforme https://observablehq.com/.36:T692,// Code from https://observablehq.com/@mthh/hatano-asymmetrical-equal-area-projection hatanoRaw = { // Below code was ported from Proj (v4.3, back in 2016) const NITER = 20, EPS = 1e-7, ONETOL = 1.000001, CN = 2.67595, CS = 2.43763, RCN = 0.37369906014686373063, RCS = 0.41023453108141924738, FYCN = 1.75859, FYCS = 1.93052, RYCN = 0.56863737426006061674, RYCS = 0.51799515156538134803, FXC = 0.85, RXC = 1.17647058823529411764, M_HALFPI = Math.PI / 2, sin = Math.sin, asin = Math.asin, abs = Math.abs, cos = Math.cos; function hatanoRaw(lambda, phi) { let th1, i; const c = sin(phi) * (phi < 0 ? CS : CN); for (i = NITER; i; --i) { phi -= th1 = (phi + sin(phi) - c) / (1 + cos(phi)); if (abs(th1) < EPS) break; } return [ FXC * lambda * cos((phi *= 0.5)), sin(phi) * (phi < 0 ? FYCS : FYCN) ]; } hatanoRaw.invert = function (x, y) { let th = y * (y < 0 ? RYCS : RYCN); if (abs(th) > 1) { if (abs(th) > ONETOL) { console.error( "Error: coordinate outside of projection domain" ); return [0, 0]; } else { th = th > 0 ? M_HALFPI : -M_HALFPI; } } else { th = asin(th); } x = (RXC * x) / cos(th); th += th; y = (th + sin(th)) * (y < 0 ? RCS : RCN); if (abs(y) > 1) { if (abs(y) > ONETOL) { console.error( "Error: coordinate outside of projection domain" ); return [x, y]; } else { y = y > 0 ? M_HALFPI : -M_HALFPI; } } else { y = asin(y); } return [x, y]; }; return hatanoRaw; }37:[{"id":"dd396cc044f9e041fd343c16a9e92e11d353dd784320d4130bde54009cec0a3491e4d18af3815fe9b97388c05995810c8d5a467a30379a11923b86c4fe7750b9","href":"https://static.observableusercontent.com/files/dd396cc044f9e041fd343c16a9e92e11d353dd784320d4130bde54009cec0a3491e4d18af3815fe9b97388c05995810c8d5a467a30379a11923b86c4fe7750b9","name":"Boogaloo-Regular.ttf","type":"font/ttf","lastModified":1738167161182.529,"size":31776},{"id":"5ee0d0c90b0e93f7167a3fe63d6fc6d5399967d9345d8196c9a2893fa7cb106067dba43adcdc3b7bdf7ea1f05db4676f1f3024eabde47f490338e5ffd75d20be","href":"https://static.observableusercontent.com/files/5ee0d0c90b0e93f7167a3fe63d6fc6d5399967d9345d8196c9a2893fa7cb106067dba43adcdc3b7bdf7ea1f05db4676f1f3024eabde47f490338e5ffd75d20be","name":"limites_communales_metro_epsg4326.geojson","type":"application/geo+json","lastModified":1738271201606.172,"size":1560021},{"id":"afbc196fb0b05d3e928d98e5fe7a413f920c32ed2cfbf7f6215a989fda4226a7311d9b9b66ffa7359bc5e136d7dcb8b609108e77b285bcda21a504aaef7f39d5","href":"https://static.observableusercontent.com/files/afbc196fb0b05d3e928d98e5fe7a413f920c32ed2cfbf7f6215a989fda4226a7311d9b9b66ffa7359bc5e136d7dcb8b609108e77b285bcda21a504aaef7f39d5","name":"Échirolles.csv","type":"text/csv","lastModified":1738272343186.211,"size":36938},{"id":"ee2058167c8e9757fe3c10e73fba5fbb5f5cad901ee86a8c113ee30a75a5e30707487d31ada91075f2a5ce9746e1651a58705088efa9d1de9550cb1b21e15336","href":"https://static.observableusercontent.com/files/ee2058167c8e9757fe3c10e73fba5fbb5f5cad901ee86a8c113ee30a75a5e30707487d31ada91075f2a5ce9746e1651a58705088efa9d1de9550cb1b21e15336","name":"observable-version.png","type":"image/png","lastModified":1738311996069.295,"size":44305},{"id":"56d24c3894585284673245b8f9d465cec825dd12af154fc70b48b2ef2b8161260aeb4a2cb6b9fce2a8c5b1498519441251195f9ac5714c85d539dd8266e8b225","href":"https://static.observableusercontent.com/files/56d24c3894585284673245b8f9d465cec825dd12af154fc70b48b2ef2b8161260aeb4a2cb6b9fce2a8c5b1498519441251195f9ac5714c85d539dd8266e8b225","name":"observable-other-user.png","type":"image/png","lastModified":1738312333781.354,"size":11283},{"id":"7edf64ed889d9bf6fdca09a3441bd3f86818b13053468f9321f33a8b78ec07820685f31ac23f0982fe574cc51960a434dd964299ee8d2c1a88d1b74c6f91ef35","href":"https://static.observableusercontent.com/files/7edf64ed889d9bf6fdca09a3441bd3f86818b13053468f9321f33a8b78ec07820685f31ac23f0982fe574cc51960a434dd964299ee8d2c1a88d1b74c6f91ef35","name":"quarto-page.png","type":"image/png","lastModified":1738312618315.585,"size":136193},{"id":"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4","href":"https://static.observableusercontent.com/files/bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4","name":"orly-cat.jpeg","type":"image/jpeg","lastModified":1738164721611.705,"size":102662},{"id":"3482aaa62b35970e5b3b09369c3ebbf4d8e2c71e6c8df6222aad576a5ddb276f779eb344c98674aa190c9b0395cac5672e1ac1e523bedf43df72d4d2025c55b7","href":"https://static.observableusercontent.com/files/3482aaa62b35970e5b3b09369c3ebbf4d8e2c71e6c8df6222aad576a5ddb276f779eb344c98674aa190c9b0395cac5672e1ac1e523bedf43df72d4d2025c55b7","name":"X4527.png","type":"image/png","lastModified":1738164721451.28,"size":4840},{"id":"0d277450ad648743c97b1a1163f13dbcdcef0867a353f4602b00766112ecf357202f15182dc1f67e1df83bad7ac7990294b310d25e401d99680458717c2f1312","href":"https://static.observableusercontent.com/files/0d277450ad648743c97b1a1163f13dbcdcef0867a353f4602b00766112ecf357202f15182dc1f67e1df83bad7ac7990294b310d25e401d99680458717c2f1312","name":"Roboto-Regular.ttf","type":"font/ttf","lastModified":1738167115267.698,"size":168260},{"id":"4c8f43064b5dddd58d20fd0c539ace4d4a4d601d77c722ccfbd284abe69be34abaf5300cebc954bff9a77b5695c394d310971cc9cdc5f9a3ea1a964c194fd49d","href":"https://static.observableusercontent.com/files/4c8f43064b5dddd58d20fd0c539ace4d4a4d601d77c722ccfbd284abe69be34abaf5300cebc954bff9a77b5695c394d310971cc9cdc5f9a3ea1a964c194fd49d","name":"Oswald-Medium.ttf","type":"font/ttf","lastModified":1738167105557.411,"size":87596}] 30:{"id":"f0f8be089734a4fb","slug":"presentation-observable","title":"Présentation d'Observable","thumbnail":"97d65433152d7aa3465b53a052fae9096cbd0bf4e83b9e235f193312b7d4374c","access_level":"public","create_time":"$D2025-01-29T15:24:26.920Z","update_time":"$D2026-01-14T10:36:29.833Z","view_time":null,"first_public_time":"$D2025-02-06T07:57:50.674Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS","avatar_url":"https://avatars-next.observableusercontent.com/8480906916f9dcdd46d764fb7c433c135aeb94fe0a4cf7ba198784851c520c5b","tier":"starter_2024","bio":""},"version":711,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null,"bio":""}],"members":[{"type":"individual","id":"8e230b124d25dec4","login":"mthh","name":"Matthieu Viry","avatar_url":"https://avatars-next.observableusercontent.com/911bd8720f0dbfd44850e291921253c0242ac77c4537d932fde7db5c82ebb267","tier":null,"role":"editor"},{"type":"team","id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS","avatar_url":"https://avatars-next.observableusercontent.com/8480906916f9dcdd46d764fb7c433c135aeb94fe0a4cf7ba198784851c520c5b","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"977152c873ca6766","slug":"cours","title":"Cours","owner":{"id":"cbfb1a463d2459af","login":"geovis-m2-geomas","name":"Geovis-M2-GEOMAS"}},"type":"notebook","body":{"titling":"auto","title":"Présentation d'Observable","cells":[{"id":0,"value":"# Présentation d'Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"

Support de cours pour les étudiants 2025-2026 de 2ème année du Master GAED - parcours GEOMAS de l'IUGA - Université Grenoble Alpes.

\n\nIntervenant : Matthieu Viry

\nVoir l'ensemble des notebooks ici.\n\n

Source: https://twitter.com/ThePracticalDev/status/720257210161311744

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"Vous pouvez par ailleurs consulter les différents notebooks accessibles sur la plateforme sur la page [explore](https://observablehq.com/explore) ainsi que sur la page [trending]() (et vous en inspirer, les *forker* si vous le souhaitez, etc.).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"## Cellules\n\nUn notebook Observable est une suite de cellules. Le contenu des cellules peut être de 3 principaux types :\n- JavaScript\n- Markdown\n- HTML\n\nVous pouvez voir et modifier le type de cellule en cliquant sur l'icone, à gauche de la cellule. Le résultat de la cellule apparaît au dessus de la cellule.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"### Javascript\n\n⚠️ Attention il y a quelques petites subtilités par rapport au JavaScript *vanilla*. Elles seront évoquées plus bas dans ce notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"a = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"b = 12000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"c = a + b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"d = 'Ceci est une cellule JavaScript'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"// Une autre cellule JavaScript\nfunction somme(a, b) {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"somme(a, b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"### Markdown","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"Ceci est une *cellule* **Markdown** ! Cliquez sur l'icône avec 4 lignes pour changer son type si vous le souhaitez !","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":59,"value":"Une autre cellule Markdown, avec un [lien](https://magrit.cnrs.fr).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":65,"value":"Comme vous pouvez le constater, il est possible (quel que soit le type de cellule : HTML, JavaScript ou Markdown) d'afficher ou non le \"code\" correspondant, ceci est possible en cliquant sur l'épingle (📌) à gauche de la cellule.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"### HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":85,"value":"

Ceci est une cellule HTML","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"### Les autres types de cellules","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"- Il est également possible d'insérer facilement des formules mathématiques en utilisant le formalisme de TeX :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"c = \\sqrt{a^2 + b^2}","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"- D'insérer facilement des éléments de saisi (*Inputs*) :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":121,"value":"viewof checkboxes = Inputs.checkbox([\"A\", \"B\"], {\n label: \"Select some\",\n value: \"A\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"viewof radios = Inputs.radio([\"A\", \"B\"], {label: \"Select one\", value: \"A\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":663,"value":"radios","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"viewof form = Inputs.form({\n option1: Inputs.checkbox([\"A\", \"B\"], {label: \"Select some\"}),\n option2: Inputs.range([0, 100], {label: \"Amount\", step: 1}),\n option3: Inputs.radio([\"A\", \"B\"], {label: \"Select one\"}),\n option4: Inputs.select([\"A\", \"B\"], {label: \"Select one\"})\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"Notez la présence du mot-clé `viewof` (qui n'est pas standard en JavaScript - cette syntaxe n'est d'ailleurs pas valide en *vanilla* JavaScript).\n\nDe manière générale une vue (*view*) est un élément de l'interface utilisateur qui contrôle directement une valeur dans le notebook. Une vue se compose de deux parties :\n\n- La vue, qui est typiquement un élément DOM interactif (comme le *slider* ci-dessous ou les *checkboxes* au dessus),\n- La valeur, qui est une valeur JavaScript quelconque, renvoyée par la vue (par l'élément DOM interactif).\n\nPour en savoir plus sur ce mécanisme de *vue*, vous pouvez consulter le notebook Introduction to views.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":134,"value":"### Tout est réactif dans Observable ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":137,"value":"viewof slider1 = Inputs.range([0, 100], {\n label: \"Choisissez une valeur\",\n step: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"slider1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"La valeur choisie est **${slider1}**. Trop cool, n'est-ce pas ?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"viewof rectwidth = Inputs.range([10, 1000], {\n label: \"Largeur\",\n step: 1,\n value: 100\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"viewof rectheight = Inputs.range([50, 150], {\n label: \"Hauteur\",\n step: 1,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"viewof color = Inputs.color({label: \"Couleur\", value: \"#4682b4\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":170,"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"viewof position = Inputs.range([50, 950], {\n label: \"Position\",\n step: 1,\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"## Les spécificités du JavaScript dans Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"- **Les cellules sont** (en quelque sorte) **des 'scripts' séparés** : Chaque cellule du notebook s'exécute indépendamment. Une erreur (de syntaxe ou de quelque autre type que ce soit) dans une cellule n’empêche pas les autres cellules de s'exécuter. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":189,"value":"// Cette instruction va renvoyer l'erreur \"SyntaxError: Unexpected token\", mais n'empêche pas les autres cellules de fonctionner\n,dfksdhgffgghfujfy","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"- **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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":196,"value":"dot`digraph \"d3-bar-chart\" {\n${edges.map(([i, o]) => `${i} -> ${o}`).join(\"\\n\")}\n}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"result = n1 + n2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"n1 = 212","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"n2 = 93","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":216,"value":"Par extension, les références circulaires ne sont pas autorisées :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":219,"value":"c1 = c2 + 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"c2 = c1 + 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"Enfin, il n'est pas possible d'avoir deux cellules nommées de la même manière :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":226,"value":"dd = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"dd = 49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"- **Les cellules sont réexécutées lorsqu'une cellule référencée est modifiée** : Il n'est pas nécessaire d'exécuter les cellules explicitement lorsque vous les modifiez ou interagissez : le notebook se met à jour automatiquement. Exécutez la cellule ci-dessous en cliquant sur le bouton de lecture, ou en mettant le curseur dans la cellule puis en appuyant sur Shift-Entrée. Seules les cellules de référence sont exécutées, puis leurs cellules de référence, et ainsi de suite - les autres cellules ne sont pas affectées.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"randomVal = Math.random()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"result2 = randomVal * 2 // Mis à jour automatiquement quand \"randomVal\" change","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"- **Les cellules attendent implicitement les [promesses](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Using_promises)** : Vous pouvez définir une cellule dont la valeur est une promesse, sans utiliser le mot clé `await` (rien ne vous empêche toutefois de l'utiliser).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":240,"value":"Ainsi :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"Revient au même que :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"await fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":253,"value":"Dans certains cas, vous écrirez tout-de-même `await`, par exemple pour pouvoir chaîner des opérations au résultat attendu avec `await` :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"// Sans await\nfetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json()).title","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"// Avec await\n(await fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json())).title","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"- **Les suites d'expressions doivent être entourées d'accolades et d'une valeur de retour : ** Dans Observable, une cellule correspond à une expression, comme ci-dessous...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":262,"value":"'Ceci est une chaine de caractères'.split(' ')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"... ou une affectation, comme ci-dessous...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"variable = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"... pour écrire une suite d'expressions dans une cellule, il faut les entourer d'accolades, et spécifier la valeur de retour, avec `return` (c'est la valeur qui sera affichée comme résultat de la cellule) :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":271,"value":"{\n const v = 'Ceci est une chaine de caractères';\n let result = 0;\n v.split('').forEach((char) => {\n if (char === 'e') {\n result += 1;\n }\n });\n return `Il y a ${result} fois la lettre 'e'`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"Avec une affectation :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":277,"value":"res = {\n const v = 'Ceci est une chaine de caractères';\n let result = 0;\n v.split('').forEach((char) => {\n if (char === 'e') {\n result += 1;\n }\n });\n return `Il y a ${result} fois la lettre 'e'`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"Cela entraîne une spécificité liée à Observable : pour créer un `Object` dans une cellule (afin de distinguer les cellules contenant des blocs de codes avec des accolades), il faut entourer ses accolades de parenthèses. Ainsi la création de l'objet suivant :\n\n```javascript\npier = {\n age: 12,\n name: 'Pier',\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":701,"value":"pier2 = ({\n age: 12,\n name: 'Pier',\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"devient","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"pier = ({\n age: 12, \n name: 'Pier'\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"Enfin, il est possible de définir des fonctions normalement au sein d'une cellule, et cela en utilisant les différentes écritures usuelles en JavaScript ([expression de fonction anonyme ou non](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Operators/function), [fonction fléchée](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions)) :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"function sum(a, b) {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"pow = function (x, n) {\n return x ** n;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":585,"value":"mult = (a, b) => a * b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":675,"value":"mult2 = function (a, b) { return a * b }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"- **le cellules sont immuables par défaut** c'est à dire qu'il n'est pas possible de modifier la valeur assignée à une cellule nommée sans l'utilisation d'une syntaxe spécifique.\n Considérons les cellules suivantes :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":603,"value":"foo = 12","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"// Cette cellule essaye de modifier la valeur de 'foo', ce n'est pas possible par défaut :\n{\n // Some other code here...\n foo = 15\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"On peut toutefois définir une cellule comme étant muable avec le mot clé `mutable` :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":611,"value":"mutable bar = 18","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"// Cette cellule essaye de modifier la valeur de 'bar', c'est possible grâce au mot-clé mutable\n{\n // Some other code here...\n mutable bar = 32\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"De manière générale, c'est assez rare d'en avoir vraiment besoin (l'écrasante majorité des notebooks que je réalise - idem pour mes collègues - n'en ont pas besoin).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":632,"value":"- **il est possible d'importer des bibliothèque avec `require` ou avec `import`** :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":634,"value":"BERTIN = require('bertin@1.7.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"_ = import(\"https://cdn.skypack.dev/lodash-es@4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"_.camelCase('Ceci est un test')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"Sans rentrer dans les détails, on utilisera généralement `require(\"nom_de_la_lib_sur_npm\")` mais occasionnellement le format de certaines bibliothèques peut nécessiter d'utiliser `import()`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":299,"value":"## La bibliothèque standard 'Observable'\n\nDes fonctionnalités propres à Observables sont proposées dans les notebooks. Nous allons ici évoquer seulement les plus utiles, celles qui vous seront utiles pour ce TP.\n\n- **Variable `width` réactive**\n\nUne variable nommée `width` est présente et contient la largeur des cellules du notebook. Quand la taille de la fenêtre change, cette variable est automatique mise-à-jour. Cela peut vous être utile pour déterminer la bonne taille de certains graphiques par exemple (pour conserver une proportionnalité entre la hauteur et la largeur).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":303,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"- **Éléments de saisie**\n\nObservable met à disposition plusieurs éléments de saisie ([`Inputs`](https://observablehq.com/@observablehq/inputs)) tels que :\n- Boutons\n- Checkbox\n- Range slider\n- Select\n- etc.\n\nNous les avons déjà rencontré plus haut dans ce notebook.\nIld sont plus facile à créer que leurs équivalents en vanilla JavaScript mais introduisent un mot clé spécifique à Observable pour utiliser, de manière réactive, la valeur qui leur est associée : `viewof`.\n\nDans l'exemple qui suit, cela va permettre de récupérer directement dans la variable `n` la valeur actuellement sélectionnée dans l'élément.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"viewof n = Inputs.range([0, 255], {step: 1, label: \"A number to be squared\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":313,"value":"`n` au carré = ${n ** 2}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":315,"value":"viewof s = Inputs.select(['Entry 1', 'Entry 2', 'Entry 3'], {step: 1, label: \"Select one item\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"The current item is: *${s}*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":321,"value":"viewof cbx = Inputs.checkbox([\"A\", \"B\"], {label: \"Select some\", value: [\"A\"]})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"cbx.map((d) => `La boite ${d} est sélectionnée`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":337,"value":"Ces éléments vous permettrons de proposer des options à l'utilisateur (choix d'un sous-groupe d'individus à visualiser, choix d'un individu à mettre en avant dans la visualisation, etc.)\n\nUn autre élément particulièrement utile est la possibilité d'ajouter un tableau avec `Inputs.table` :\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":341,"value":"Inputs.table(olympians)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"olympians","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":342,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":345,"value":"{\n // On retourne 1 mais le code continue d'être exécuté ensuite\n yield 1;\n // On attend 1.5s\n await Promises.delay(1500);\n // Etc..\n yield 2;\n await Promises.delay(1500);\n yield 3;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":350,"value":"Dans Observable, on rencontre parfois cette technique pour retourner le conteneur d'une visualisation ou d'une carte interactive avant d'y avoir ajouté les différentes marques qui la compose :\n\n```js\n{\n const container = document.createElement('div');\n container.style = 'height: 400px';\n\n // on retourne tout de suite le conteneur\n yield container;\n\n // Le reste du code qui instancie la visualisation et y ajoute les différentes marques\n L.map(container)\n .setView([45.19278, 5.77344], 13);\n\n // Le reste du code ...\n}\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":351,"value":"## Les bibliothèques disponibles par défaut dans Observable\n\nPlusieurs bibliothèques JavaScript fréquemment utilisées pour l'analyse et la visualisation de données sont importées par défaut dans les notebooks Observable : `d3`, `Plot`, `Leaflet` (cartes interactives), `topojson`, `Arquero`, etc.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":356,"value":"Par exemple pour utiliser les éléments de la bibliothèque `D3.js` :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":359,"value":"d3.schemeBuPu[5]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"topojson","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"Ou pour utiliser les éléments de la bibliothèque `Plot` :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":364,"value":"Plot.plot({\n inset: 10,\n title: 'Un scatter plot',\n marks: [\n Plot.dot([[1, 2], [1.4, 5], [2, 4], [2.5, 8], [3, 6], [3.5, 3], [4, 6], [5, 9]], { stroke: 'red' }),\n Plot.frame()\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"Remarquez que ni `d3`, ni `topojson`, ni `Plot` n'ont été importés explicitement : ces bibliothèques sont bien présentes par défaut dans l'environnement des notebooks Observable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":399,"value":"## Les avantages d'Observable pour créer des rapports, des visualisations de données, etc.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":402,"value":"### La possibilité d'importer des éléments provenant d'autres notebooks\n\nIl est possible d'importer des cellules nommées en provenance d'un autre notebook :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"import { chart } from \"@d3/contours\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"Puis d'utiliser cette variable :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":486,"value":"chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"C'est ce qui permet de facilement construire une visualisation de données sans avoir à copier / coller du code inutile ou dupliquer des données. Par exemple dans le notebook suivant : https://observablehq.com/@mthh/gapminder-like-with-plot j'importe à la fois les données d'un notebook, et un composant réutilisable provenant d'un autre notebook, en me concentrant seulement sur la rédaction du code de la visualisation de données.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":424,"value":"Il est également possible d'importer une cellule nommée en la renommant, comme ici si on avait voulu importer `chart` mais en le renommant `chartContour` : \n\n```js\nimport { chart as chartContour } from \"@d3/contours\"\n```\n\nEnfin il est possible d'importer une cellule nommée, mais en remplaçant une des variables dont cette cellule dépend.\n\nRegardez le notebook suivant : https://observablehq.com/@d3/world-map. \nIl définit une cellule `map` qui dépend d'une cellule `projection`. Il est possible d'importer la cellule `map` mais en définissant une projection personnalisée dans notre notebook.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":441,"value":"projHatano = d3.geoProjection(hatanoRaw).rotate([-10.2, 0, 0]) // Le code de hatanoRaw est défini en annexe à la fin du notebook","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"import { map } with { projHatano as projection } from \"@d3/world-map\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"map","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"### La possibilité de créer des visualisations de données sans saisir de code\n\nLorsque qu'une cellule contient un tableau de données (sous la forme `Array` d'`Object`s) il est possible de cliquer, en bas à gauche de la cellule, sur le bouton +... en bas à gauche de la cellule pour rapidement créer une cellule contenant un tableau ou une visualisation.\n\nCliquez sur le contenu de la cellule suivante pour faire apparaître ce bouton et essayer de créer une visualisation à partir de ces données. Il est ensuite possible d'afficher le code correspondant pour continuer de personnaliser la visualisation créée.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"data1 = FileAttachment(\"Échirolles.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"data1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":708,"value":"Plot.plot({\n marks: [\n Plot.auto(data1, {x: \"prix\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":710,"value":"Plot.plot({\n marks: [\n Plot.rectY(data1, Plot.binX({ y: \"count\" }, { x: \"prix\", tip: true })),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"Plot.plot({\n marks: [\n Plot.auto(data1, {x: \"surface\", y: \"prix\", fx: \"type\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":690,"value":"Plot.plot({\n marks: [\n Plot.frame({ strokeOpacity: 0.1 }),\n Plot.dot(data1, { fx: \"type\", x: \"surface\", y: \"prix\", tip: true })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"data1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":474,"value":"Il en est de même pour les jeux de données au format GeoJSON.\n\nCliquez sur le contenu de la cellule suivante puis sur +... pour créer rapidement une carte Leaflet affichant ces données :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":470,"value":"data = FileAttachment(\"limites_communales_metro_epsg4326.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"{\n const container = yield htl.html`

`;\n const map = L.map(container);\n const layer = L.geoJSON(data).addTo(map);\n map.fitBounds(layer.getBounds(), {maxZoom: 9});\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"Plot.plot({ projection: { type: \"equal-earth\", domain: data }, marks: [Plot.geo(data)] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":551,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":366,"value":"## Plus de ressources\n\nLa documentation officielle : https://observablehq.com/documentation/notebooks/\n\n\nPour en savoir plus sur les possibilités offertes par les notebooks Observable :\n\n- [Observable: Fundamentals](https://observablehq.com/collection/@observablehq/notebook-fundamentals)\n- [Collection \"Videos series: Learning Observable\"](https://observablehq.com/collection/@observablehq/learning-observable)\n- [Collection \"JavaScript in Observable\"](https://observablehq.com/collection/@observablehq/javascript-in-observable) ainsi que la documentation propre à [\"Observable JavaScript\"](https://observablehq.com/@observablehq/observable-javascript)\n- [Collection \"Learning Observable\"](https://observablehq.com/@observablehq/learning-observable-introduction)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"## *Appendix*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":204,"value":"edges = [\n [\"d3\", \"chart\"],\n [\"DOM\", \"chart\"],\n [\"width\", \"chart\"],\n [\"height\", \"chart\"],\n [\"data\", \"chart\"],\n [\"x\", \"chart\"],\n [\"y\", \"chart\"],\n [\"xAxis\", \"chart\"],\n [\"yAxis\", \"chart\"],\n [\"require\", \"data\"],\n [\"d3\", \"x\"],\n [\"data\", \"x\"],\n [\"margin\", \"x\"],\n [\"width\", \"x\"],\n [\"d3\", \"y\"],\n [\"data\", \"y\"],\n [\"height\", \"y\"],\n [\"margin\", \"y\"],\n [\"d3\", \"xAxis\"],\n [\"height\", \"xAxis\"],\n [\"margin\", \"xAxis\"],\n [\"x\", \"xAxis\"],\n [\"d3\", \"yAxis\"],\n [\"margin\", \"yAxis\"],\n [\"y\", \"yAxis\"],\n [\"require\", \"d3\"]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":379,"value":"addFonts([\n {\n fontFamily: \"Oswald\",\n url: await FileAttachment(\"Oswald-Medium.ttf\").url(),\n style: \"normal\",\n weight: \"normal\",\n stretch: \"normal\"\n },\n {\n fontFamily: \"Roboto\",\n url: await FileAttachment(\"Roboto-Regular.ttf\").url(),\n style: \"normal\",\n weight: \"normal\",\n stretch: \"normal\"\n },\n {\n fontFamily: \"Boogaloo\",\n url: await FileAttachment(\"Boogaloo-Regular.ttf\").url(),\n style: \"normal\",\n weight: \"normal\",\n stretch: \"normal\"\n }\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"import { addFonts } from '@jakoblistabarth/load-custom-fonts'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1"}} 31:"$30:body"