30:Ta67,slides = { var dom = html`

`; var shadow = dom.shadowRoot || dom.attachShadow({ mode: "open" }); var reveal = html`

Javascript en bref

${await FileAttachment( "js.png" ).image()}

Javascript IS NOT Java!

Le langage Javascript a été créé en dix jours en mai 1995 pour la Netscape Communications Corporation par Brendan Eich.

Le langage Javascript est normalisé depuis 1997 par l'organisation ECMA International.

Depuis 2015 (ES6 ou ES2015), le langage est mature. Il est implémenté de manière harmonisée dans tous les navigateurs.

C'est un langage qui s'exécute du côté client (Front-End) mais aussi côté serveur (back-End) avec node.js.

C'est un langage multi-paradigme mais toujours très fonctionnel (Cf. podcast JS en forêt).

C'est aussi un langage événementiel (interactivité)

👎

JavaScript n'a pas été conçu comme un langage pour l'analyse de données

Il a parfois mauvaise réputation chez les developpeurs

👍

JavaScript est le langage du web. Il tourne partout (compilation just in time)

L'implémentation de Javascript dans les navigateurs est de plus en plus rapide

Le langage est aujourd'hui strandardisé (ECMA)

👍

Grande communauté. Beaucoup beaucoup Beaucoup de ressources, tutos sur le web

Beaucoup de choses déjà développées : plus de 1,793,275 sur npm

Faire de l'analyse de données avec JS ?
${await FileAttachment("bostock.png").image()}
https://towardsdatascience.com/javascript-for-data-analysis-2e8e7dbf63a7

`; shadow.appendChild(reveal); var deck = new Reveal(reveal, { embedded: true }); deck.initialize(); return dom; }31:T8d4,slide = { function slide() { const container = document.createElement("div"); container.className = "slide"; container.appendChild(md.apply(this, arguments)); return container; } function end() { const container = document.createElement("div"); container.className = "end"; return container; } slide.end = end; function iframe(strings) { const container = document.createElement("div"); container.innerHTML = ""; container.className = "slide"; return container; } slide.iframe = iframe; function html(strings) { const container = document.createElement("div"); container.innerHTML = strings; container.className = "slide slide--html"; return container; } slide.html = html; function htmldark(strings) { const container = document.createElement("div"); container.innerHTML = strings; container.className = "slide slide--html dark"; return container; } slide.htmldark = htmldark; function code(strings) { const container = document.createElement("div"); const pre = container.appendChild(document.createElement("pre")); const code = pre.appendChild(document.createElement("code")); let string = strings[0] + "", i = 0, n = arguments.length; while (++i < n) string += arguments[i] + "" + strings[i]; code.textContent = string.trim(); container.className = "slide slide--code"; return container; } slide.code = code; slide.js = function () { const container = code.apply(this, arguments); const content = container.firstChild.firstChild; content.className = "js hljs javascript"; hl.highlightBlock(content); return container; }; slide.img = function (strings) { const img = new Image(); let string = strings[0] + "", i = 0, n = arguments.length; while (++i < n) string += arguments[i] + "" + strings[i]; img.src = string.trim(); img.className = "slide slide--img"; return img; }; return slide; }32:T481,slide_style = html``33:[{"id":"f27e78d82ecea3233ddc14fc3814ae53119731f081db456ab6948d389032f0dd7e730d631be2a661e41fa7a0a7254c453b6d06927eaa77579518089aabae72fa","href":"https://static.observableusercontent.com/files/f27e78d82ecea3233ddc14fc3814ae53119731f081db456ab6948d389032f0dd7e730d631be2a661e41fa7a0a7254c453b6d06927eaa77579518089aabae72fa","name":"1_gCWUibmQ8rszKxI3G19KmA.jpeg","type":"image/jpeg","lastModified":1767879691491.419,"size":102662},{"id":"a01b2acbf32e1f54a30c8da4ca35fbf62b10406954f215c1e419e9b64d2f0778003fa2e9268ca7b837b3d6486755ae6bbed6a49f088cf58c5305c83570054cc7","href":"https://static.observableusercontent.com/files/a01b2acbf32e1f54a30c8da4ca35fbf62b10406954f215c1e419e9b64d2f0778003fa2e9268ca7b837b3d6486755ae6bbed6a49f088cf58c5305c83570054cc7","name":"bostock.png","type":"image/png","lastModified":1767879691491.419,"size":257620},{"id":"cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","href":"https://static.observableusercontent.com/files/cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","name":"js.png","type":"image/png","lastModified":1767879691491.419,"size":1991},{"id":"721bcf04f3c72fd27a9786968bf494d306a2827b7929883ece586893a6fe433e274230ea532641f355e70392e8cd8f9fe89eae0e9274492f5f9fcc38627b49cc","href":"https://static.observableusercontent.com/files/721bcf04f3c72fd27a9786968bf494d306a2827b7929883ece586893a6fe433e274230ea532641f355e70392e8cd8f9fe89eae0e9274492f5f9fcc38627b49cc","name":"timeline.png","type":"image/png","lastModified":1767879691491.419,"size":27297},{"id":"9c2da79b856ae72514cabd91008026c1d456433a17541b4435db78f91b1734e40ba6b642cb21232ab6fa81724010ace33b32051dae64eaaa6c12cff09f8a8725","href":"https://static.observableusercontent.com/files/9c2da79b856ae72514cabd91008026c1d456433a17541b4435db78f91b1734e40ba6b642cb21232ab6fa81724010ace33b32051dae64eaaa6c12cff09f8a8725","name":"untitled.png","type":"image/png","lastModified":1767879691491.419,"size":43596}] 2e:{"title":"Observable intro","cells":[{"id":0,"value":"md`# Observable intro`","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"FileAttachment(\"untitled.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":3656,"value":"slide `Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3372,"value":"**This notebook is a fork of https://observablehq.com/@neocartocnrs/tuto a ormation support from @neocarto for the consortium [Imageo](https://imageo.hypotheses.org/). Video available here ⤵️**","pinned":false,"hidden":false,"mode":"md"},{"id":3404,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"slide`🤖 Javascript`","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"fullscreen = {\n const button = html``;\n button.onclick = () => slides.parentElement.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":965,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1022,"value":"## Ressources\n- https://towardsdatascience.com/javascript-for-data-analysis-2e8e7dbf63a7\n- https://javascript-en-foret.lepodcast.fr/\n- https://www.youtube.com/watch?v=PIU_2SBSZgw&list=PLjwdMgw5TTLVzD9Jq_WBd1crqDwXRn4cw","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"slide`📚 Observable Javascript and a little bit more`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"## 👉Observable?","pinned":false,"hidden":false,"mode":"md"},{"id":441,"value":"Observable is a startup founded by Mike Bostock and Melody Meckfessel, offering a 100% online platform for designing, sharing, and distributing data visualizations.","pinned":false,"hidden":false,"mode":"md"},{"id":423,"value":"FileAttachment(\"timeline.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"At first glance, Observable appears to be vanilla JavaScript. This is intentional: by relying on the native language of the web, Observable seems familiar at first glance and allows you to use the usual JavaScript libraries. However, Observable is not really JavaScript.\n","pinned":false,"hidden":false,"mode":"md"},{"id":456,"value":"## 👉 Notebooks ?","pinned":false,"hidden":false,"mode":"md"},{"id":835,"value":"Notebooks are like blog posts. They contain text, images, and multimedia content. They can be organized into collections. They are available online via a URL. As you might expect, they also contain lines of code. The goal is to enable literate programming, i.e., to provide a document containing both the code and an explanation of the code. See, for example, trending notebooks.","pinned":false,"hidden":false,"mode":"md"},{"id":845,"value":"See: https://www.nature.com/articles/d41586-021-01174-w","pinned":false,"hidden":false,"mode":"md"},{"id":478,"value":"## 👉 Cells ?\n","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"A notebook consists of a set of cells that communicate with each other.","pinned":false,"hidden":false,"mode":"md"},{"id":511,"value":"** ➡️ Javascript**","pinned":false,"hidden":false,"mode":"md"},{"id":3270,"value":"mavariable = 27","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"montableau = [\"a\", \"b\", \"c\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":518,"value":"{\n let a = 15;\n let b = 12;\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":858,"value":"montableau.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":2520,"value":"toto1 = function (a, b) {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":829,"value":"toto2 = (a, b) => a + b","pinned":true,"hidden":false,"mode":"ojs"},{"id":3311,"value":"toto2(2, 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":822,"value":"** ➡️ LaTex**","pinned":false,"hidden":false,"mode":"md"},{"id":3285,"value":"\\textit{Hello World}","pinned":true,"hidden":false,"mode":"tex"},{"id":520,"value":"\\sqrt[4]{x^4} = |x|","pinned":true,"hidden":false,"mode":"tex"},{"id":3278,"value":"\\sum_{n=1}^{+\\infty} \\frac{1}{n^2} = \\frac{\\pi^2}{6}","pinned":true,"hidden":false,"mode":"tex"},{"id":481,"value":"** ➡️ Markdown**","pinned":false,"hidden":false,"mode":"md"},{"id":494,"value":"Example if *markdown* text with link [lien](https://daringfireball.net/projects/markdown/) and **bold** text.","pinned":true,"hidden":false,"mode":"md"},{"id":501,"value":"** ➡️ html**","pinned":false,"hidden":false,"mode":"md"},{"id":504,"value":"

Milk
Cheese\n
- Blue cheese
- Feta
\n

","pinned":true,"hidden":false,"mode":"html"},{"id":3358,"value":"** ➡️ sql**","pinned":false,"hidden":false,"mode":"md"},{"id":3363,"value":"Voir https://observablehq.com/@observablehq/sql-cells","pinned":false,"hidden":false,"mode":"md"},{"id":864,"value":"** ➡️ CANVAS**","pinned":false,"hidden":false,"mode":"md"},{"id":867,"value":"

","pinned":true,"hidden":false,"mode":"html"},{"id":654,"value":"** ➡️ SVG**","pinned":false,"hidden":false,"mode":"md"},{"id":646,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":530,"value":"** ➡️ And thanks to backticks, you can easily re-use previous celles results **","pinned":false,"hidden":false,"mode":"md"},{"id":1102,"value":"result = {\n let a = 10;\n let b = 18;\n return a * b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"html`The result is ${result} !`","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"** ➡️ Cells order does not matter 🤯**","pinned":false,"hidden":false,"mode":"md"},{"id":1121,"value":"And that's great, because it allows us to place the figure we created with code at the top of the page. We can organize the content exactly how we want.","pinned":false,"hidden":false,"mode":"md"},{"id":567,"value":"c = a * b","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"a = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":565,"value":"b = 5","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"## 👉 Inputs","pinned":false,"hidden":false,"mode":"md"},{"id":595,"value":"button = Inputs.button(\"Click me\", {})","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"checkboxes = Inputs.checkbox([\"A\", \"B\"], { label: \"Select some\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"range = Inputs.range([0, 100], { label: \"Amount\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"textarea = Inputs.textarea({ placeholder: \"Type here\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":604,"value":"Documentation => https://observablehq.com/@observablehq/inputs","pinned":false,"hidden":false,"mode":"md"},{"id":589,"value":"## 👉 Re-activity !! 🔥","pinned":false,"hidden":false,"mode":"md"},{"id":619,"value":"viewof range2 = Inputs.range([0, 100], { label: \"Amount\", step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"The value of my slider is ${range2}","pinned":true,"hidden":false,"mode":"md"},{"id":682,"value":"viewof w = Inputs.range([1, 1000], { label: \"Width\", value: 250, step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":735,"value":"viewof h = Inputs.range([1, 300], { label: \"Height\", value: 100, step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1208,"value":"viewof color = Inputs.color({ label: \"Color\", value: \"#6ddf95\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2457,"value":"viewof mytext = Inputs.text({\n value: \"C'est trop cool, hein ?\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":679,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":716,"value":"## 👉 Imports","pinned":false,"hidden":false,"mode":"md"},{"id":746,"value":"import { bars } from \"@thetylerwolf/day-5-our-first-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"bars","pinned":false,"hidden":false,"mode":"ojs"},{"id":1144,"value":"mydata = [\n { year: 2005, value: 10 },\n { year: 2006, value: 20 },\n { year: 2007, value: 30 },\n { year: 2008, value: 40 },\n { year: 2009, value: 50 },\n { year: 2010, value: 60 },\n { year: 2011, value: 70 },\n { year: 2012, value: 80 },\n { year: 2013, value: 90 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1136,"value":"import { bars as bars2 } with { mydata as data } from \"@thetylerwolf/day-5-our-first-bar-chart\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1140,"value":"bars2","pinned":false,"hidden":false,"mode":"ojs"},{"id":3254,"value":"Note: This method is no longer recommended. It is better to use ready-to-use functions into which you can simply enter your data. See https://observablehq.com/@d3/bar-chart?collection=@d3/charts ","pinned":false,"hidden":false,"mode":"md"},{"id":1175,"value":"## 👉 You can collaborate","pinned":false,"hidden":false,"mode":"md"},{"id":1179,"value":"Up to 5 people can work on a notebook at the same time. And you can add comments.","pinned":false,"hidden":false,"mode":"md"},{"id":770,"value":"## 👉 Fork","pinned":false,"hidden":false,"mode":"md"},{"id":1190,"value":"## 👉 Versioning","pinned":false,"hidden":false,"mode":"md"},{"id":722,"value":"## 👉 Save and export","pinned":false,"hidden":false,"mode":"md"},{"id":1199,"value":"You can save your code at any time. And above all, you can export your visualizations to make them accessible on a website or blog.","pinned":false,"hidden":false,"mode":"md"},{"id":791,"value":"- Notebook : https://observablehq.com/@neocartocnrs/black-lives-matter-in-the-mediterranean?collection=@neocartocnrs/migrations\n- Export pour un site web : https://www.comeetie.fr/galerie/","pinned":false,"hidden":false,"mode":"md"},{"id":1085,"value":"## 👉 Ressources ?","pinned":false,"hidden":false,"mode":"md"},{"id":1235,"value":"- Tutoriels & templates : https://observablehq.com/tutorials\n- Documentation : https://observablehq.com/@observablehq/documentation\n- Forum : https://talk.observablehq.com/","pinned":false,"hidden":false,"mode":"md"},{"id":1082,"value":"FileAttachment(\"1_gCWUibmQ8rszKxI3G19KmA.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2905,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md `# Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2911,"value":"import { zoom } from \"@d3/versor-zooming\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"hl = require(\"@observablehq/highlight.js@1.0.0/highlight.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":832,"value":"Reveal = require(\"reveal.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"import { previews } from \"@d3/gallery\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1485,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\", \"d3-geo-voronoi@1\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}