43:["$","title",null,{"children":"Télécharger et intégrer des Notebooks. | Malik Koné | Observable"}] 4b:T607,md`Ainsi donc vous avez écrit un opus magnifique: un notebook merveilleux plein de splendeur. Mais alors? Comment l'annoncer au monde? Comment intégrer ses précieux graphiques dans vos applications web? Comment le sauvegarder tout simplement sur votre disque dur afin de le conserver pour la postérité au côté de vos vieux documents word et vos photos de vacances? Comme vous avez probablement remarqué maintenant, les notebooks sont légèrements différents du vieux JavaScript que vous connaissez et adorez. Ils s'exécutent au [fil des données](/@observablehq/how-observable-runs) plutôt qu'en suivant séquentiellement une suite d'instructions, et en plus ils utilisent des primitivess réactives comme [viewof](/@observablehq/introduction-to-views) et [mutable](/@observablehq/introduction-to-mutable-state). Heureusement, Observable fournit une [machinerie (runtime) open-source](https://github.com/observablehq/runtime) qui organise les cellules du notebook selon leurs dépendences relatives et les évaluent adéquatement; Il s'agit [d'une bibliothèque standard](https://github.com/observablehq/stdlib), définissant un ensemble de fonctions pour travailler avec le HTML, SVG, les générateurs, fichiers et les promesses, [entre autres](/@observablehq/standard-library); et un [inspecteur](https://github.com/observablehq/inspector), qui implémente une stratégie par défaut pour produire le DOM et les valeurs javascript associées dans des pages webs dynamiques. Cela dit, vous êtes libre d'écrire le votre.`4c:T44e,md`### Afficher toutes les cellules du notebook Une façon évidente d'intégrer le notebook dans une page web est simplement de l'y copier en entier. Pour cela, le moteur (runtime) Observable inclus un [inspecteur standard](https://github.com/observablehq/inspector) qui récupère les données du notebook et les mets dans le HTML, là où vous les voulez. Par exemple, voici comment afficher un notebook en entier dans une page vide ([voir exemple en ligne](https://bl.ocks.org/mbostock/raw/1cf3e863b054aca0bc7061b5292120ab/)): ~~~html ~~~`4d:T4d6,md`## Écrire des valeur depuis JavaScript En plus de pouvoir observer les valeurs réactives, votre programme JavaScript peut en assigner, rendant ainsi effectif un flux bi-directionnel des données. Par exemple si vous avez un [diagramme en baton](/@d3/bar-chart), et vous souhaitez que votre application mette à jour vos données dynamiquement. Tout d'abords il faut garde en référence votre module principal: ~~~js const main = new Runtime().module(notebook, name => { if (name === "chart") { return new Inspector(container); } }); ~~~ Puis, à chaque fois que vous souhaiterez changer les données du diagramme il faudra appeler [*module*.redefine](https://github.com/observablehq/runtime/blob/master/README.md#module_redefine) comme suit: ~~~js main.redefine("data", newData); ~~~ Parce que Observable fonctionne avec des données en flux, le diagramme se mettra automatiquement à jour et l'inspecteur se chargera de remplacer son contenu dans le DOM/ Vous pouvez passer à *module*.redefine une constante, une fonction qui fait référence à d'autres cellules -- ou même un [générateur](/@observablehq/introduction-to-generators) qui envoies de façon répétitive des valeurs afin de créer une animation.`4e:T469,md`## Les Notebooks tel des module npm Observable fournit aussi une copy de vos notebooks sous la forme d'un module npm qui peut s'installer comme un tarball:

En cliquant à droite et en copiant le lien, vous aurez un truc comme ci-dessous: ~~~ https://api.observablehq.com/@jashkenas/my-neat-notebook.tgz?v=3 ~~~ Utiliser cette URL avec **npm** ou **Yarn** pour installer la dernière version de votre notebook des \`node_modules\` en utilisant le nom (\`@jashkenas/my-neat-notebook\`), au côté de la copy du moteur (runtime) d'Observable. ~~~sh npm install @observablehq/runtime@4 npm install https://api.observablehq.com/@jashkenas/my-neat-notebook.tgz?v=3 ~~~ Le packet (tarball) utilise le même format des module ES que celui décrit précédement. Selon votre version de Node, vous devrez soit utiliser le drapeau \`--experimental-modules\` de Node [esm](https://github.com/standard-things/esm), ou votre l'empaquetteur de votre choix.`4f:[] 47:{"id":"349afd63fc072e89","slug":"telecharger-et-integrer-des-notebooks","title":"Télécharger et intégrer des Notebooks.","thumbnail":"2168a276ba349fa6757673781519f2fe867e11d07d5ac2afd5c5c16408baaaf3","access_level":"public","create_time":"$D2019-08-19T11:18:47.007Z","update_time":"$D2019-11-15T05:59:32.763Z","view_time":null,"first_public_time":"$D2019-09-05T08:24:26.558Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":"starter_2024","bio":"seed, teach, grow","followed_by_you":false,"follows_you":false},"version":1030,"publish_version":1030,"role":null,"authored":false,"authors":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"bio":"seed, teach, grow","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"d3108f8c2ef2e746","login":"maliky","name":"Malik Koné","avatar_url":"https://avatars-next.observableusercontent.com/7674a5e40b2a6edaa5a2d627bbb5013cbe6fb6986b4d053167e52cfed5441c55","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"94dddef164ca86e1","slug":"translations","title":"Translations","owner":{"id":"67e45a130f28cdf9","login":"maliky","name":"Malik Koné"}},"type":"notebook","body":{"titling":"auto","title":"Télécharger et intégrer des Notebooks.","cells":[{"id":577,"value":"md`# Télécharger et intégrer des Notebooks.\n

Les Notesbooks peuvent être intégrés et personnalisés n'importe où... en ligne ou hors ligne.

\n\n

\n\nL'URL ressemblera à quelque chose comme ça:\n\n~~~\nhttps://api.observablehq.com/@jashkenas/my-neat-notebook.js?v=3\n~~~\n\nVous pouvez faire tourner ce module dans n'importe quel environnement Javascript. Sous cet forme les notebooks sont des programmes standard de JavaScript. Vous pouvez ainsi les manipuler et les intégrer entièrement dans votre application. \n\nVoyez les exemples ci-dessous:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"md`L'inspecteur n'inclus pas de style dans le code, mais il y a une [feuille de style par défaut](https://cdn.jsdelivr.net/npm/@observablehq/inspector@3/dist/inspector.css) (voir [le source](https://github.com/observablehq/inspector/blob/master/src/style.css)) si vous le désirez.\n\nPour intégrer de façon très esthétique votre notebook en utilisant des framework CSS. Essayez notre framework CSS préféré [Tachyons](http://tachyons.io/) ou encore [Primer](https://primer.style/css) de Github. Il y en a aussi plein d'autres sur le web.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"md`Si vous ne voulez pas afficher le notebook entièrement, définissez une fonction qui contrôle quelles cellules afficher et où les afficher. Par exemple, pour afficher uniquement la cellule nommée \"chart\", nous l'inserons dans l'élément du DOM ayant pour id \"chart\" avec:\n~~~js\nnew Runtime().module(notebook, name => {\n if (name === \"chart\") {\n return new Inspector(document.querySelector(\"#chart\"));\n }\n});\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"md`## Lire des valeurs depuis JavaScript\n\nSi l'inspecteur standard est utile pour afficher des notebooks tels quels, en entier ou en partie, il n'en reste pas moins que ce sont des programmes \"reactifs\" a part entière et vous pouvez les intégrer au coeur de vos programmes Javascript classiques grâce aux *Observateur*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"md`Un *Observateur* est un objet défini et implémenté pour observer les valeurs d'une cellule en directe. Ces méthodes sont appelées répétitivement au moment de l'exécution comme suit:\n\n* juste avant chaque évaluation --> *observer*.pending();\n* quand l'évaluation finie, en récupérant la nouvelle *valeur* --> *observer*.fulfilled(*valeur*);\n* et si l'évaluation échoue en récupérant l'erreur rejetée --> *observer*.rejected(*error*). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":770,"value":"md`Par exemple, voici un observer qui ne touche pas au DOM et qui à la place, note toutes les évaluations sur la console:\n\n~~~js\nnew Runtime().module(notebook, name => {\n return {\n pending() { console.log(\\`\\${name} is running…\\`); },\n fulfilled(value) { console.log(name, value); },\n rejected(error) { console.error(error); }\n };\n});\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":793,"value":"md`Et, ci-dessous c'est un observeur qui écoute une cellule \"selection\" pour appeler la fonction \"setSelection\" afin de faire quelque chose de sa nouvelle valeur. Par exemple le [hook d'un état React](https://reactjs.org/docs/hooks-state.html). Cet technique peut être utilisée avec les [graphiques brossables](/@d3/brushable-scatterplot) pour faire réagir votre application avec vos données. \n\n~~~js\nnew Runtime().module(notebook, name => {\n switch (name) {\n case \"viewof selection\": return new Inspector(container);\n case \"selection\": return {fulfilled(value) { setSelection(value); }};\n }\n});\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":772,"value":"md`Parfois vous voulez juste vérifier la valeur courante d'une cellule. Et pour cela vous n'avez pas besoin d'un *observer* de plein pied; à la place utilisez le [*module*.value](https://github.com/observablehq/runtime/blob/master/README.md#module_value) pour obtenir la valeur promise de la cellule avec le nom spécifié.\n\n~~~js\nconst module = new Runtime().module(notebook);\nconst value = await module.value(\"chart\");\ndocument.querySelector(\"#chart\").appendChild(value);\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"md`Une autre façon de modifier le comportement des notebooks actifs, c'est d'écraser la [bibliothèque standard](https://github.com/observablehq/stdlib) d'Observable. Ces variables intégrées sont fournit à tous les notebooks. Par exemple pour définir une largeur fixe de 640px à la place de la largeur responsive, importer[Library](https://github.com/observablehq/runtime/blob/master/README.md#Library), et re-attribuer la valeur de la largeur comme suit:\n\n~~~js\nimport {Runtime, Inspector, Library} from \"https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js\";\n\nconst runtime = new Runtime(Object.assign(new Library, {width: 640}));\nconst main = runtime.module(notebook, …);\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":910,"value":"md`## Fixer le numéro de version\n\nPour fixer votre notebook avec une version specifique, trouver la version voulu dans [l'historique](/@observablehq/history) et ajoutez-la à l'URL. Les module ES et les packet tar (tarball) supportent tous les deux le versionning. Par exemple:\n\n~~~\nhttps://api.observablehq.com/@jashkenas/my-neat-notebook@42.js?v=3\nhttps://api.observablehq.com/@jashkenas/my-neat-notebook@365.tgz?v=3\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"demo = md`## Une démo amusante ✨\n\nVoici un exemple d'un site externe qui intègre un notebook [Breakout!](https://ashkenas.com/breakout). Il utilise [ce notebook](/@jashkenas/breakout), et utilise l'inspecteur standard pour afficher le canvas du jeu, le bouton, le score actuel et maximun.\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"md`D'autres exemples: \n- [Un CodePen](https://codepen.io/jashkenas/pen/gzZXPG) intègre un [simple notebook](/@jashkenas/tick) qui tic à chaque seconde. \n- le [tutoriel](https://visionscarto.net/observable-jekyll/) de [Philippe Rivière](/@fil) qui démontre comment intégrer [Tissot’s indicatrix](/@fil/tissots-indicatrix) dans un blog. \n- Et finalement pour illuster la magie de l'intégration récursive voici [un notebook qui s'intègre *lui même!*](/@jashkenas/ouroboros-a-notebook-embeds-itself) 🤯`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"md`Nous oeuvrons grâce à vous, à rendre l'intégration des notesbooks toujours plus \"puissante\". Si vous aves des cas d'école intéressant, de procédure de publication, des idées de modules npm, des technique d'intégation dans les site internet, ou si vous voulez simplement voir autre chose dans les notebook intégrés, n'hésitez pas à nous rejoindre sur [talk.observablehq.com](https://talk.observablehq.com/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`*Merci pour la pile de livre, [ClipArt ETC](http://etc.usf.edu/clipart/54200/54238/54238_book_pile.htm). et à toute l'équipe d'observable.*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 42:null