2d:null 2e:["$","title",null,{"children":"C'est quoi un notebook ? | Philippe Deschaseaux | Observable"}] 33:[] 31:{"id":"7284c77936853bbd","slug":"cest-quoi-un-notebook","title":"C'est quoi un notebook ?","thumbnail":"b7f6f050bdf88064adc2222f21a0c46b9b74cfbb018f6f521f6fc7ce59b44a96","access_level":"public","create_time":"$D2018-10-12T08:50:12.816Z","update_time":"$D2025-03-20T16:47:03.483Z","view_time":null,"first_public_time":"$D2018-10-17T09:41:23.053Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"cf2a83be2759e071","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":"starter_2024"},"version":549,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null}],"members":[{"type":"individual","id":"7c1eebd3c1c51af1","login":"ehouais","name":"Philippe Deschaseaux","avatar_url":"https://avatars-next.observableusercontent.com/59e97a66cd990ae4d696ee6feb742004d97f024d9bc0db66fbc4b60357d0005f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"C'est quoi un notebook ?","cells":[{"id":0,"value":"md`# C'est quoi un notebook ?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"md`## Bases\n* Un notebook est composé de cellules.\n* Une cellule contient du javascript (expression ou bloc).\n* Une cellule affiche le résultat de l'évaluation de son code.\n* Toute cellule peut-être repliée ou dépliée (code visible).\n* Toute cellule peut-être modifiée ou supprimée -> publish/fork.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"2 * 3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"{\n return 2 + 3;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"\"te\" + \"st\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"({ a: 6 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"x => x * x","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"md`## Cas particulier: DOM nodes\n* Les noeuds DOM sont directement insérés dans le document.\n* Pour produire du HTML, des helpers sont fournis (markdown, HTML, TeX)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"html`

Je suis un paragraphe !

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md`Moi aussi je suis un *paragraphe* !`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"tex`\\Delta = b^2-4ac, x_1 = \\frac{-b = \\sqrt{\\Delta}}{2a}, x_2 = \\frac{-b + \\sqrt{\\Delta}}{2a}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"md`* canvas 2D`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":278,"value":"{\n const [W, H] = [200, 200];\n const context = DOM.context2d(W, H);\n\n context.fillStyle = \"green\";\n context.fillRect(20, 20, 50, 50);\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"md`* canvas 3D`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":371,"value":"{\n var scene = new THREE.Scene();\n var camera = new THREE.PerspectiveCamera(65, 1, 0.6, 1000);\n\n var renderer = new THREE.WebGLRenderer();\n renderer.setSize(200, 200);\n\n var geometry = new THREE.BoxGeometry(1, 1, 1);\n var material = new THREE.MeshBasicMaterial({ color: \"green\" });\n var cube = new THREE.Mesh(geometry, material);\n scene.add(cube);\n\n camera.position.z = 2;\n\n var animate = function() {\n requestAnimationFrame(animate);\n\n cube.rotation.x += 0.01;\n cube.rotation.y += 0.01;\n\n renderer.render(scene, camera);\n };\n\n animate();\n\n yield renderer.domElement;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"md`* Graphviz (langage DOT)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"{\n const dot = await require(\"@observablehq/graphviz@0.2\");\n return dot`digraph \"in(graphe)\" {\n ceci -> graphe\n est -> graphe\n un -> graphe\n }`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"md `* charts`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"{\n const vegalite = await require(\"@observablehq/vega-lite@0.1\");\n const cars = await require(\"@observablehq/cars\");\n return vegalite({\n data: { values: cars },\n mark: \"point\",\n width,\n height: 200,\n autosize: \"fit\",\n encoding: {\n x: { field: \"Horsepower\", type: \"quantitative\" },\n y: { field: \"Miles_per_Gallon\", type: \"quantitative\" }\n }\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"{\n const VegaLite =\n await require(\"https://cdn.jsdelivr.net/npm/vega-lite@5/build/vega-lite.min.js\");\n const cars = await require(\"@observablehq/cars\");\n const spec = VegaLite.compile({\n data: { values: cars },\n mark: \"point\",\n width,\n height: 200,\n autosize: \"fit\",\n encoding: {\n x: { field: \"Horsepower\", type: \"quantitative\" },\n y: { field: \"Miles_per_Gallon\", type: \"quantitative\" }\n }\n }).spec;\n const Vega =\n await require(\"https://cdn.jsdelivr.net/npm/vega@5/build/vega.min.js\");\n const view = new Vega.View(Vega.parse(spec));\n const div = html`

`;\n await view.initialize(div).runAsync();\n return div;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`## Cellules nommées\n* Nommer une cellule (nom unique !) permet d'utiliser sa valeur dans une autre cellule.\n* Le graphe des dépendances permet de ne réévaluer que les cellules impactées par un changement.\n* L'ordre des cellules n'a aucune importance`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"b = {\n let v = 2 + 3;\n return v;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"c = a + b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"a = 2 * 4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"`${a} + ${b} = ${c}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"square = x => x*x","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"square(a)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":266,"value":"md`* Variables prédéfinies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"md`## Générateurs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":394,"value":"md`Observable utilise les générateurs pour representer les valeurs qui changent au cours du temps. Les générateurs rendent possibles l'interactivité, les animation, les flux de données temps réel, et tout ce qui rend les notebooks Observable vraiment intéressants.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"yield 42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"gen = function*(n) {\n let current = 0;\n let next = 1;\n let index = 0;\n while (index++ < n) {\n yield current;\n [current, next] = [next, current + next];\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"[...gen(10)]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"md`## Générateurs asynchrones`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"{\n let i = 0;\n while (true) {\n yield Promises.delay(1000, i++);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"gen2 = async function*(n) {\n let i = 0;\n while (i < n) {\n await Promises.delay(1000);\n yield i++;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"{\n for await (let value of gen2(10)) {\n yield value;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":425,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"md`## viewof`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"input = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"viewof value = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"md`## mutable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"md`Voici un compteur qui s'incrémente toutes les secondes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"compteur1 = {\n let i = 0;\n while (true) yield Promises.delay(1000, ++i);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"md `La cellule suivante n'affiche que les valeurs paires du compteur.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"pair1 = {\n yield compteur1 % 2 === 0 ? compteur1 : this;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"md`Le même résultat sans mise à jour inutile en utilisant mutable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"compteur2 = {\n let i = 0;\n while (true) {\n await Promises.delay(1000);\n if (i%2 == 0) mutable pair2 = i;\n yield i++;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"mutable pair2 = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":439,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"md`## imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.96/build/three.min.js\");\n await require(\"three@0.96/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"import {diamonds} from \"@ehouais/discrete-voronoi-diagrams-generation-strategies\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"diamonds","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"