31:T5bf,chart = { 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; }32: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)33:[{"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}] 2f:{"title":"Premiers pas dans Observable","cells":[{"id":0,"value":"# Premiers pas dans Observable","pinned":false,"hidden":false,"mode":"md"},{"id":482,"value":"

Support de cours pour les étudiants 2025-2026 de 3ème année du BUT Science des données de l'IUT2 (Université Grenoble Alpes).

\n\nIntervenant : Matthieu Viry

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

","pinned":false,"hidden":false,"mode":"html"},{"id":161,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"## Qu'est-ce qu'Observable ?","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":451,"value":"

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

","pinned":false,"hidden":false,"mode":"html"},{"id":476,"value":"Vous pouvez par ailleurs consulter les différents notebooks accessibles sur la plateforme sur la page [explore](https://observablehq.com/explore) (et vous en inspirer, les *forker* si vous le souhaitez, etc.).","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"## Cellules","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"Un 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":false,"hidden":false,"mode":"md"},{"id":10,"value":"Ceci est une *cellule* **Markdown** ! Cliquez sur l'icône avec 4 lignes pour changer son type !","pinned":true,"hidden":false,"mode":"md"},{"id":13,"value":"a = 'Ceci est une cellule JavaScript !'","pinned":true,"hidden":false,"mode":"ojs"},{"id":409,"value":"// Une autre cellule JavaScript\nfunction add(a, b) {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"

Ceci est une cellule HTML","pinned":true,"hidden":false,"mode":"html"},{"id":266,"value":"","pinned":true,"hidden":false,"mode":"html"},{"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"},{"id":35,"value":"## Le JavaScript dans Observable","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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":"ojs"},{"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"},{"id":544,"value":"dot`digraph \"d3-bar-chart\" {\n${edges.map(([i, o]) => `${i} -> ${o}`).join(\"\\n\")}\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"result = n1 + n2","pinned":true,"hidden":false,"mode":"ojs"},{"id":78,"value":"n1 = 123","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"n2 = 100","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"Par extension, les références circulaires ne sont pas autorisées :","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"c1 = c2 + 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"c2 = c1 + 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":386,"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"},{"id":387,"value":"dd = 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"dd = 19","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":89,"value":"randomVal = Math.random()","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"result2 = randomVal * 2 // Mis à jour automatiquement quand \"randomVal\" change","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":507,"value":"Ainsi :","pinned":false,"hidden":false,"mode":"md"},{"id":124,"value":"fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"Revient au même que :","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"await fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json())","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":144,"value":"// Sans await\nfetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json()).title","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"// Avec await\n(await fetch('https://jsonplaceholder.typicode.com/todos/1').then((d) => d.json())).title","pinned":true,"hidden":false,"mode":"ojs"},{"id":181,"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"},{"id":182,"value":"'Ceci est une chaine de caractères'.split(' ')","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"... ou une affectation, comme ci-dessous...","pinned":false,"hidden":false,"mode":"md"},{"id":194,"value":"variable = 'Ceci est une chaine de caractères'.split(' ')","pinned":true,"hidden":false,"mode":"ojs"},{"id":196,"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"},{"id":199,"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"},{"id":209,"value":"Avec une affectation :","pinned":false,"hidden":false,"mode":"md"},{"id":210,"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"},{"id":213,"value":"Cela entraine 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 paranthèses. Ainsi la création de l'objet suivant :\n\n```js\npier = {\n age: 12,\n name: 'Pier',\n}\n```\n\ndevient","pinned":false,"hidden":false,"mode":"md"},{"id":216,"value":"pier = ({\n age: 12, \n name: 'Pier'\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":218,"value":"Cela ne s'applique bien entendu pas au sein d'un bloc de code définis avec des accolades, vous pouvez y définir vos *Object*s normalement.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":228,"value":"function sum(a, b) {\n return a + b\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":343,"value":"width","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"viewof range = Inputs.range([10, 80], {label: \"Age max\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":605,"value":"`La valeur vaut ${range}`","pinned":false,"hidden":false,"mode":"md"},{"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 Vanilla JavaScript mais introduisent un mot clé spécifique à observable pour utiliser, de manière réactive, la valeur qui leur est associé : `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"},{"id":348,"value":"viewof n = Inputs.range([0, 255], {step: 1, label: \"A number to be squared\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"`n au carré = ${n ** 2}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"viewof s = Inputs.select(['Entry 1', 'Entry 2', 'Entry 3'], {step: 1, label: \"Select one item\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"The current item is: *${s}*","pinned":true,"hidden":false,"mode":"md"},{"id":416,"value":"viewof checkboxes = Inputs.checkbox([\"A\", \"B\"], {label: \"Select some\", value: [\"A\"]})","pinned":true,"hidden":false,"mode":"ojs"},{"id":418,"value":"checkboxes.map((d) => `La boite ${d} est sélectionnée`)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":414,"value":"Inputs.table(olympians)","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"olympians","pinned":true,"hidden":false,"mode":"ojs"},{"id":512,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":521,"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"},{"id":531,"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"},{"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"},{"id":374,"value":"Par exemple pour utiliser les éléments de la bibliothèque `D3.js` :\n","pinned":false,"hidden":false,"mode":"md"},{"id":242,"value":"d3.schemeBuPu[5]","pinned":true,"hidden":false,"mode":"ojs"},{"id":376,"value":"Ou pour utiliser les éléments de la bibliothèque `Plot` :","pinned":false,"hidden":false,"mode":"md"},{"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":"ojs"},{"id":98,"value":"## Plus de ressources\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) et en particulier le [notebook \"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"},{"id":548,"value":"### *Appendix*","pinned":false,"hidden":false,"mode":"md"},{"id":541,"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"}],"files":"$W33","stdlib":"1","titling":"auto"}