2c:null 2d:["$","title",null,{"children":"Premiers pas dans Observable | BUT SD - Cours Programmation Web Dataviz | Observable"}] 32:T564, 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(); } display(context.canvas)33:T4e2,**`display`** : affiche une valeur (un nœud DOM tel quel, ou toute autre valeur JS, alors inspectée/formatée automatiquement) au-dessus de la cellule, sans rien changer au fonctionnement réactif de la cellule. On peut l'appeler plusieurs fois dans une même cellule pour afficher plusieurs choses, et il retourne la valeur qu'on lui passe (pratique pour l'enchaîner dans une expression). **`view`** sert à la fois à *afficher* un élément d'interface (par exemple `Inputs.range(...)`, `Inputs.select(...)`, ou tout élément DOM émettant des événements `"input"`) et à exposer sa *valeur courante de façon réactive*. Concrètement, `view(el)` : 1. Affiche l'élément `el` (comme le ferait `display`) ; 2. Retourne un générateur asynchrone qui produit une nouvelle valeur chaque fois que l'utilisateur interagit avec `el` (clic, saisie, déplacement du slider, etc.) ; 3. Assigné à une variable top-level, ce générateur permet à toutes les cellules qui la référencent de se réexécuter automatiquement dès que l'utilisateur change la valeur. En résumé : `display` = montrer une valeur ; `view` = montrer un contrôle interactif **et** rendre sa valeur réactive pour le reste du notebook. Démonstration ci-dessous 👇34:[{"id":"bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4","href":"https://static.observableusercontent.com/files/bd9d48f5f7d6de9965bbfae246c585d13d6cff1bab749e3cce9c22a851a31b8a2dc92339401e5d6446fb6200ed7cd4f5dc94a1444c00d3c5fa2fb851c181f2f4","name":"orly-cat.jpeg","type":"image/jpeg","lastModified":1693987311989.339,"size":102662},{"id":"3482aaa62b35970e5b3b09369c3ebbf4d8e2c71e6c8df6222aad576a5ddb276f779eb344c98674aa190c9b0395cac5672e1ac1e523bedf43df72d4d2025c55b7","href":"https://static.observableusercontent.com/files/3482aaa62b35970e5b3b09369c3ebbf4d8e2c71e6c8df6222aad576a5ddb276f779eb344c98674aa190c9b0395cac5672e1ac1e523bedf43df72d4d2025c55b7","name":"X4527.png","type":"image/png","lastModified":1694249936803.894,"size":4840}] 30:{"id":"738d9873234ba209","slug":"premiers-pas-dans-observable","title":"Premiers pas dans Observable","thumbnail":"78452760cb22e6e60edc294ddcc9fa760b9e84e1e3b844e8bc2fa9a4a50eb54c","access_level":"public","create_time":"$D2023-08-23T20:12:48.262Z","update_time":"$D2026-09-07T10:25:36.707Z","view_time":null,"first_public_time":"$D2023-09-08T14:34:05.844Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz","avatar_url":"https://avatars-next.observableusercontent.com/9abf99c7291a1bcb0c0549771e1476593088700d797bd36ff146f1e5ff3035e7","tier":"starter_2024","bio":"Voir la page Web du cours pour retrouver l'ensemble des supports."},"version":834,"publish_version":834,"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":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz","avatar_url":"https://avatars-next.observableusercontent.com/9abf99c7291a1bcb0c0549771e1476593088700d797bd36ff146f1e5ff3035e7","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"fcbf8027d5457b45","slug":"guide-et-exemples","title":"Guide et exemples","owner":{"id":"daf0693188c7d3b6","login":"sd-progwebdataviz","name":"BUT SD - Cours Programmation Web Dataviz"}},"type":"notebook","body":{"titling":"auto","title":"Premiers pas dans Observable","cells":[{"id":0,"value":"# Premiers pas dans Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":482,"value":"banner","pinned":false,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":638,"value":"$32","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"## Qu'est-ce qu'Observable ?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"**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.\n\nEn 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)).\nPour résumer : \n1. Réactivité\n2. Visibilité\n3. Réutilisabilité\n4. Portabilité\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":440,"value":"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ément en langage naturel dans un même document.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":446,"value":"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 comprendre leur fonctionnement.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":451,"value":"

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

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"Vous pouvez par ailleurs consulter les différents notebooks accessibles sur la plateforme sur la page [public](https://observablehq.com/public?sort=stars) (et vous en inspirer, les *forker* si vous le souhaitez, etc.).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":624,"value":"## Documentation officielle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"- [Notebook user guide](https://observablehq.com/@observablehq/notebooks-user-guide) (présentation de l'interface de la fenêtre d'édition des notebooks)\n- [Notebook systeme guide](https://observablehq.com/@observablehq/notebooks-system-guide) (présentation du fonctionnement d'un notebook en lui même : cellules, bibliothèque standard, etc.)\n- L'ensemble de la doc : https://observablehq.com/@observablehq/-/collection/documentation","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"## Cellules","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"Un notebook Observable est une suite de cellules. Le contenu des cellules peut être de plusieurs types :\n- TypeScript / JavaScript\n- Markdown\n- HTML\n- TeX\n- etc.\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":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":10,"value":"Ceci est une *cellule* **Markdown** ! Cliquez sur l'icône \"md\" en haut à droite de la cellule pour changer son type !","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"const a = 'Ceci est une cellule JavaScript !'","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":610,"value":"const b = 'Ceci est une cellule TypeScript ! On peut aussi utiliser ce type pour écrire du JavaScript car TypeScript sur-ensemble syntaxique strict de JavaScript (i.e., tout code JavaScript correct est valide en TypeScript).'","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"// Une autre cellule JavaScript\nfunction add(a, b) {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"

Ceci est une cellule HTML","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":266,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"Le contenu des notebook que vous consultez sur Observable (comme celui-ci) a donc été définis au sein de ces cellules.\n\nVous avez peut-être constaté que parfois vous voyez le code de la cellule (comme les 3 cellules ci-dessus) parfois non (comme la cellule actuelle). C'est l'auteur du notebook qui choisi, pour chaque cellule, si le cellule est épinglée (directement visible) ou non (en sélectionnant *Pin* ou *Unpin*).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"## Le JavaScript dans Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":54,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":61,"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":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":544,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"const result = n1 + n2","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":613,"value":"result","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"const n1 = 123","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"const n2 = 100","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"Par extension, les références circulaires ne sont pas autorisées :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"const c1 = c2 + 1","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"const c2 = c1 + 1","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":386,"value":"Enfin, il n'est pas possible d'avoir deux cellules contenant des variables nommées de la même manière :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":387,"value":"let dd = 12","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"let dd = 19","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":611,"value":"dd","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":89,"value":"const randomVal = Math.random()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"randomVal * 2 // Mis à jour automatiquement quand \"randomVal\" change","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":507,"value":"Ainsi :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":124,"value":"fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"Revient au même que :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"await fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json())","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"Dans certains cas, vous écrirez tout-de-même `await`, pour pouvoir chaîner des opérations au résultat attendu avec `await` :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":144,"value":"// Sans await\nfetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json()).title","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"// Avec await\n(await fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json())).title","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"- **Il existe deux types de cellule**, les __*expression cells*__ et les __*program cells*__ :\n\nUne cellule d'expression contient une seule expression JavaScript (notez l'absence de point-virgule) et affiche implicitement sa valeur :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":614,"value":"12 + 30","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"Une cellule de programme, en revanche, contient des instructions (généralement séparées par des points-virgules) et des déclarations, et n'affiche rien par défaut :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"const foo = 1 + 2;\nconst bar = 3 + 4;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"On peut toutefois utiliser la fonction `display` de Observable pour afficher une valeur au dessus de la cellule :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"const baz = 12;\nconst result = foo + bar + baz;\ndisplay(result);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"De plus, il est possible de définir des fonctions normalement au sein d'une cellule :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"function sum(a, b) {\n return a + b;\n}\n\nfunction sub(a, b) {\n return a - b;\n}\n\nconst mult = (a, b) => a * b;","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"const baz = 100;\nconst result = baz + 1;\ndisplay(result)","pinned":true,"hidden":false,"mode":"ts","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":343,"value":"width","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"- **Variable `now` réactive**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"now","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":631,"value":"- **Fonctions `display` et `view`**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"// display() : affiche plusieurs valeurs, sans aucune interactivité\ndisplay(\"Un simple texte\");\ndisplay(42);\ndisplay(html`Un élément DOM affiché via display`);","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"// view() : affiche le slider ET expose sa valeur courante, de façon réactive\nconst demoValue = view(Inputs.range([0, 100], {label: \"Déplacez-moi\", step: 1, value: 50}));","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"// Cette cellule référence \"demoValue\" : elle se réexécute automatiquement\n// chaque fois que vous déplacez le slider ci-dessus.\nmd`La valeur actuelle du slider est **${demoValue}**, son carré vaut **${demoValue ** 2}**.`","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":345,"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\nIl sont plus facile à créer que leurs équivalents en natifs HTML / JavaScript mais nécessite l'utilisation de la fonction `view` (cf. section précédente) pour exposer leur valeur courante dans la variable à laquelle ils sont assignés.\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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":348,"value":"const n = view(Inputs.range([0, 255], {step: 1, label: \"A number to be squared\"}))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"`n au carré = ${n ** 2}`","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":360,"value":"const s = view(Inputs.select(['Entry 1', 'Entry 2', 'Entry 3'], {step: 1, label: \"Select one item\"}))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"The current item is: *${s}*","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":416,"value":"const checkboxes = view(Inputs.checkbox([\"A\", \"B\"], {label: \"Select some\", value: [\"A\"]}))","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"checkboxes.map((d) => `La boite ${d} est sélectionnée`)","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":370,"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.)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":412,"value":"Un autre élément particulièrement utile est la possibilité d'ajouter un tableau avec `Inputs.table` :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"Inputs.table(olympians)","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"olympians","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":374,"value":"Par exemple pour utiliser les éléments de la bibliothèque `D3.js` :\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":242,"value":"d3.schemeBuPu[5]","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"Ou pour utiliser les éléments de la bibliothèque `Plot` :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":250,"value":"Plot.plot({\n inset: 10,\n title: 'Un graphique',\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":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"### *Appendix*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":541,"value":"const 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":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"import { banner } from 'observable:@sd-progwebdataviz/banner-template'","pinned":false,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"2"}} 31:"$30:body"