31:Tb79,intro = { var dom = html`

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

Observable en bref

Webinaire Interroger les données
Nicolas Lambert, 31 Mars 2023

Startup

Observable est une startup située à San Francisco, fondée par Mike Bostock (auteur de d3.js) et Melody Meckfessel, qui compte actuellement une quarantaine de développeurs à plein temps.

Techno

L’Observable JavaScript (ojs) est un ensemble d’améliorations apportées à vanilla JavaScript pour en faire un langage dédié aux data sciences (visual analytics). Observable JS se distingue par son exécution réactive, qui convient particulièrement bien à l’exploration et à l’analyse interactives des données.

Plateforme

C’est aussi une plateforme web qui héberge des notebooks sur la visualisation de données. Les notebooks sont comme des billets de blog. Ils contiennent du texte, des images, du contenu multimédia et du code.

Collaborer

Observable propose un outil qui permet de travailler dans le navigateur web, seul ou à plusieurs (teams). Objectif : faire collaborer une communauté autour de la visualisation de données.

Chaque notebook a une url. Chaque element de chaque notebook fonctionne comme une api qu'il est possible d'embarquer dans un site web.

Reproductibilité

Observable est un outil qui vient enrichir la famille des notebooks (quarto, jupyter, ...) permettant de partager des traitements et des textes dans un seul et même document - literate programming.

Interopérabilité

Le runtime d'Observable est open source et peut fonctionner ailleurs qu'ici. Il est par exemple implémenté dans Quarto.

References

Reactive, reproducible, collaborative: computational notebooks evolve, par Jeffrey M. Perkel. https://www.nature.com/articles/d41586-021-01174-w

Javascript for data Analysis, par Mike Bostock https://towardsdatascience.com/javascript-for-data-analysis-2e8e7dbf63a7

`; shadow.appendChild(reveal); var deck = new Reveal(reveal, { embedded: true }); deck.initialize(); return dom; }32:[{"id":"4f8c955b5f2bd674c1f1c5f71493fe9058e1ce974ad2952bfaf6a0e4f0eb90e1e11116758cefff398b1c327a3a130cfcaba4e9677b9f34f023a51cf7cf229241","href":"https://static.observableusercontent.com/files/4f8c955b5f2bd674c1f1c5f71493fe9058e1ce974ad2952bfaf6a0e4f0eb90e1e11116758cefff398b1c327a3a130cfcaba4e9677b9f34f023a51cf7cf229241","name":"d3.png","type":"image/png","lastModified":1680094089778.052,"size":15230},{"id":"b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","href":"https://static.observableusercontent.com/files/b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","name":"maddison.csv","type":"text/csv","lastModified":1680162729532.264,"size":562020},{"id":"bb2a1e4ffa8fc621d48b5c19887bd3c03a1b9722c7847d7d724bf1d8c98b22ed963edbda0492ee3cc6e5a491aa8918428dd9ffe74bd81818602084bf651bd098","href":"https://static.observableusercontent.com/files/bb2a1e4ffa8fc621d48b5c19887bd3c03a1b9722c7847d7d724bf1d8c98b22ed963edbda0492ee3cc6e5a491aa8918428dd9ffe74bd81818602084bf651bd098","name":"talk.png","type":"image/png","lastModified":1680162091343.907,"size":4940},{"id":"9c2da79b856ae72514cabd91008026c1d456433a17541b4435db78f91b1734e40ba6b642cb21232ab6fa81724010ace33b32051dae64eaaa6c12cff09f8a8725","href":"https://static.observableusercontent.com/files/9c2da79b856ae72514cabd91008026c1d456433a17541b4435db78f91b1734e40ba6b642cb21232ab6fa81724010ace33b32051dae64eaaa6c12cff09f8a8725","name":"topo.png","type":"image/png","lastModified":1679905836478.72,"size":43596},{"id":"dee3b74eb62cd95f9b81924e8883f444742ee23ccf8563f7175f97a045443d1cd1ffe8fd57ccdd6324179c4d89aee72d7b66c8825b4c0e45016a32e7f8c2a8b2","href":"https://static.observableusercontent.com/files/dee3b74eb62cd95f9b81924e8883f444742ee23ccf8563f7175f97a045443d1cd1ffe8fd57ccdd6324179c4d89aee72d7b66c8825b4c0e45016a32e7f8c2a8b2","name":"logo.png","type":"image/png","lastModified":1679905077848.967,"size":22025},{"id":"a888e470954ee5d9a255560cebf579f96f5393cb22a9017cb915dcf9d5eeee165653345515d41bc8f8c42ece162b1c48049c4babee80b7459c438cc0d89422d2","href":"https://static.observableusercontent.com/files/a888e470954ee5d9a255560cebf579f96f5393cb22a9017cb915dcf9d5eeee165653345515d41bc8f8c42ece162b1c48049c4babee80b7459c438cc0d89422d2","name":"world.json","type":"application/json","lastModified":1680077984702.667,"size":278391},{"id":"3a32346a3cf08b372e24efdbc8d1c92a19236811f5ca5abfd8b584fd24c34aedd2dd62a28b84f0694caee0ed7e1e18c41b65b58635735b761455673146802adb","href":"https://static.observableusercontent.com/files/3a32346a3cf08b372e24efdbc8d1c92a19236811f5ca5abfd8b584fd24c34aedd2dd62a28b84f0694caee0ed7e1e18c41b65b58635735b761455673146802adb","name":"manifs_retraites-2-1-1-1.csv","type":"text/csv","lastModified":1680077373774.09,"size":883},{"id":"253bccd929b7493936ef9d50252ac45044a97b9053897acc0116adf7c999a89aea5ce6982888eae7e2644c6ecbc3281f0e964760e2fcdcad57f1ab6be577bce8","href":"https://static.observableusercontent.com/files/253bccd929b7493936ef9d50252ac45044a97b9053897acc0116adf7c999a89aea5ce6982888eae7e2644c6ecbc3281f0e964760e2fcdcad57f1ab6be577bce8","name":"autralia.geojson","type":"application/geo+json","lastModified":1680090792731.951,"size":623543},{"id":"a888e470954ee5d9a255560cebf579f96f5393cb22a9017cb915dcf9d5eeee165653345515d41bc8f8c42ece162b1c48049c4babee80b7459c438cc0d89422d2","href":"https://static.observableusercontent.com/files/a888e470954ee5d9a255560cebf579f96f5393cb22a9017cb915dcf9d5eeee165653345515d41bc8f8c42ece162b1c48049c4babee80b7459c438cc0d89422d2","name":"data.json","type":"application/json","lastModified":1679906329454.996,"size":278391},{"id":"177761f1732a3583bd8b736e51e7617d35dc1334fc0d9fab3d6406830885af770d4e286a741ce56637d30d4316ec29dfe9fd53b68a4b28a94d5b19cfa19ed4d4","href":"https://static.observableusercontent.com/files/177761f1732a3583bd8b736e51e7617d35dc1334fc0d9fab3d6406830885af770d4e286a741ce56637d30d4316ec29dfe9fd53b68a4b28a94d5b19cfa19ed4d4","name":"plot.png","type":"image/png","lastModified":1680160760900.48,"size":2989},{"id":"c76c0d448d0c99b576bcad3af768ee4891e16f2a050574ca4a18a8931f62404bfb653e0c344fbe9a379f0c4b1b6220bfd41140357c488927f8b410f05b1515a8","href":"https://static.observableusercontent.com/files/c76c0d448d0c99b576bcad3af768ee4891e16f2a050574ca4a18a8931f62404bfb653e0c344fbe9a379f0c4b1b6220bfd41140357c488927f8b410f05b1515a8","name":"bertin.png","type":"image/png","lastModified":1680160933896.124,"size":71840},{"id":"dd44a326ae8a173e69ae457c79be6eac0559b6fcffe1a626acb3d07631bc84d02b46a945750f8649457159c06d4ea9d59e5114a1e1a1a06eb87dabd8b14594c0","href":"https://static.observableusercontent.com/files/dd44a326ae8a173e69ae457c79be6eac0559b6fcffe1a626acb3d07631bc84d02b46a945750f8649457159c06d4ea9d59e5114a1e1a1a06eb87dabd8b14594c0","name":"bertin_code.png","type":"image/png","lastModified":1680160995979.242,"size":212995},{"id":"d009b9e6d7439ddfa2ac6a8c2ada08c2c602284999242c264476538901ba5705a111096d08df0a8ccaa629b8426d8d2abe08fe0ec89977f3088bf7b415b932d9","href":"https://static.observableusercontent.com/files/d009b9e6d7439ddfa2ac6a8c2ada08c2c602284999242c264476538901ba5705a111096d08df0a8ccaa629b8426d8d2abe08fe0ec89977f3088bf7b415b932d9","name":"teams.png","type":"image/png","lastModified":1680161913034.374,"size":14498},{"id":"04b776ac337ad3dfcd18a21c6ccc2617a3e46440273b287f2e26e62488dfd52d6b56da1b6082753de5f5e654ae06c08841d6af1f803b3f77920b5cc4b3dc53c1","href":"https://static.observableusercontent.com/files/04b776ac337ad3dfcd18a21c6ccc2617a3e46440273b287f2e26e62488dfd52d6b56da1b6082753de5f5e654ae06c08841d6af1f803b3f77920b5cc4b3dc53c1","name":"mydata.csv","type":"text/csv","lastModified":1680163866415.032,"size":11101},{"id":"a06713be16e4e8f8e08dbfb8239c448bdfd55d73ae86cb4f27e25f37e2f8bbb9c0908480832e859dd170c85258dc8b40330e4dbdd1ce747155273df40a75dd36","href":"https://static.observableusercontent.com/files/a06713be16e4e8f8e08dbfb8239c448bdfd55d73ae86cb4f27e25f37e2f8bbb9c0908480832e859dd170c85258dc8b40330e4dbdd1ce747155273df40a75dd36","name":"npm.png","type":"image/png","lastModified":1680165142963.567,"size":2875}] 2f:{"title":"Webinaire Interroger les données","cells":[{"id":0,"value":"# Webinaire Interroger les données","pinned":false,"hidden":false,"mode":"md"},{"id":770,"value":"Support de présentation réalisé pour le webinaire “Interroger les données” organisé par le groupe de travail “Atelier Données” du CNRS. Pour en savoir plus : https://gt-atelier-donnees.miti.cnrs.fr/\n\n","pinned":false,"hidden":false,"mode":"md"},{"id":1305,"value":"","pinned":false,"hidden":false,"mode":"md"},{"id":1307,"value":"# Intro","pinned":false,"hidden":false,"mode":"md"},{"id":129,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"# 1 - Des cellules","pinned":false,"hidden":false,"mode":"md"},{"id":529,"value":"Les notebooks Observables sont composés de cellules. ","pinned":false,"hidden":false,"mode":"md"},{"id":80,"value":"## Cellules Markdown","pinned":false,"hidden":false,"mode":"md"},{"id":531,"value":"Voici du texte en *italic* ou en __gras__ avec un [lien](https://observablehq.com/).","pinned":true,"hidden":false,"mode":"md"},{"id":544,"value":"## Des formules en LaTeX","pinned":false,"hidden":false,"mode":"md"},{"id":542,"value":"c = \\pm\\sqrt{a^2 + b^2}","pinned":true,"hidden":false,"mode":"tex"},{"id":438,"value":"## Cellules HTML","pinned":false,"hidden":false,"mode":"md"},{"id":550,"value":"

ceci est du texte surligné en rouge.

","pinned":true,"hidden":false,"mode":"html"},{"id":556,"value":"

","pinned":true,"hidden":false,"mode":"html"},{"id":440,"value":"## Cellules JavaScript","pinned":false,"hidden":false,"mode":"md"},{"id":576,"value":"Ci-dessous, a et b définissent à la fois une variable et l'identifiant d'une cellule","pinned":false,"hidden":false,"mode":"md"},{"id":82,"value":"a = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"b = 20","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"c = a + b","pinned":true,"hidden":false,"mode":"ojs"},{"id":579,"value":"On peut écrire des bloc de codes dans une cellule avec des { }","pinned":false,"hidden":false,"mode":"md"},{"id":566,"value":"d = {\n let a = 8;\n let b = 7;\n return a * b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":585,"value":"En JavaScript, on va surtout écrire beaucoup de fonctions.","pinned":false,"hidden":false,"mode":"md"},{"id":568,"value":"function sum(a, b) {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":570,"value":"sum(10, 30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":572,"value":"multi = (a, b) => a * b","pinned":true,"hidden":false,"mode":"ojs"},{"id":574,"value":"multi(3, 8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"## L'ordre des cellules n'a pas d'importance 🤯","pinned":false,"hidden":false,"mode":"md"},{"id":455,"value":"result = val1 * val2","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"val1 = 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"val2 = 10","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":525,"value":"# 2 - Des bibliothèques préchargées ","pinned":false,"hidden":false,"mode":"md"},{"id":588,"value":"Observable c'est du JavaScript *augmenté* par de nombreuses bibliothèques préchargées.","pinned":false,"hidden":false,"mode":"md"},{"id":590,"value":"| Symbol | Name | Version |\n|----------|-------------------|--------------------|\n| \\_ | Lodash | 4.17.21 |\n| aq | Arquero | ${aq.version} |\n| Arrow | Apache Arrow | 4.0.1 |\n| d3 | D3.js | ${d3.version} |\n| dot | Graphviz | 0.2.1 |\n| htl | Hypertext Literal | ${htl.version} |\n| Inputs | Observable Inputs | ${Inputs.version} |\n| L | Leaflet | ${L.version} |\n| mermaid | Mermaid | 9.1.6 |\n| Plot | Observable Plot | ${Plot.version} |\n| SQLite | SQL.js | 1.7.0 |\n| topojson | TopoJSON Client | 3.1.0 |\n| vl | Vega, Vega-Lite | 5.22.1, 5.2.0 |","pinned":false,"hidden":false,"mode":"md"},{"id":601,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":592,"value":"L’OJS a été créé par Mike Bostock, qui est aussi le developpeur de la bibliothèque D3.js (ou D3). D3 a été dircetement intégrée à l’Observable JavaScript. \n\n- D3 est populaire (200 millions de téléchargements et 100 000 ⭐ sur Github)\n- D3 est flexible (approche bas niveau qui permet de tout faire)\n- D3 est réputé pour ses animations et ses interactions.\n- D3 compte plus de trente modules et un millier de méthodes.\n\nCette puissance a bien sûr un coût. Il y a beaucoup à apprendre.","pinned":false,"hidden":false,"mode":"md"},{"id":604,"value":"viewof anim = Inputs.button(\"Click me\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, 500, 60])\n .style(\"background-color\", \"#CCC\");\n\n let moncercle = svg\n .append(\"circle\")\n .attr(\"cx\", 50)\n .attr(\"cy\", 30)\n .attr(\"r\", 25)\n .attr(\"fill\", \"#e04a28\");\n\n if (anim) {\n moncercle\n .transition()\n .duration(2000)\n .attr(\"cx\", 450)\n .transition()\n .delay(2000)\n .duration(3000)\n .attr(\"cx\", 50)\n .attr(\"r\", 10)\n .attr(\"fill\", \"blue\")\n .transition()\n .attr(\"r\", 25)\n .attr(\"fill\", \"#e04a28\");\n }\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1036,"value":"NB : Bien évidemment, rien ne nous empêche de charger d'autres bibliothèques avec l'instruction **`require()`**","pinned":false,"hidden":false,"mode":"md"},{"id":1038,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1040,"value":"geo = require(\"geotoolbox\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":31,"value":"# 3 - Tout est réactif 🔥","pinned":false,"hidden":false,"mode":"md"},{"id":613,"value":"Observable met à disposition des **`Inputs`** qui permettent des interactions entre les visualisations et l'utilisateur","pinned":false,"hidden":false,"mode":"md"},{"id":1186,"value":"viewof button = Inputs.button(\"Click me\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1189,"value":"button","pinned":true,"hidden":false,"mode":"ojs"},{"id":622,"value":"viewof colors = Inputs.checkbox([\"red\", \"green\", \"blue\"], { label: \"color\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":625,"value":"colors","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"value":"viewof rayon = Inputs.range([0, 100], { label: \"Rayon du cercle\", step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":619,"value":"surface = Math.PI * rayon ** 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":627,"value":"viewof text = Inputs.text({ value: \"text\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":629,"value":"Voici mon texte (**${text}**) en gras et souligné en markdown ","pinned":true,"hidden":false,"mode":"md"},{"id":617,"value":"Et si on reprend le dessin de tout à l'heure :","pinned":false,"hidden":false,"mode":"md"},{"id":105,"value":"viewof col = Inputs.color({ label: \"couleur\", value: \"#4682b4\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"viewof cx = Inputs.range([50, 450], {label: \"position\", step: 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"viewof r = Inputs.range([10, 30], { label: \"rayon\", step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, 500, 60])\n .style(\"background-color\", \"#CCC\");\n\n svg\n .append(\"circle\")\n .attr(\"cx\", cx)\n .attr(\"cy\", 30)\n .attr(\"r\", r)\n .style(\"fill\", col);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"# 4. Importer des données","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"L'import des données se fait à la manière de pieces jointes (jusqu'à 50 Mo) avec l'instruction `FileAttachment`.","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"manifs = FileAttachment(\"manifs_retraites-2-1-1-1.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"On peut visualiser facilement les donnes avec `Inputs.table`","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"Inputs.table(manifs)","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"Plus facilement encore, on peut importer, typer et manipuler des données via une cellule de type **`datatable`**.","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"manifs_retraites2111 = await FileAttachment(\"manifs_retraites-2-1-1-1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":174,"value":"Pour les données géographiques, on les importe de la même façon.","pinned":false,"hidden":false,"mode":"md"},{"id":177,"value":"world = FileAttachment(\"world.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"Et on le visualise avec `leaflet`","pinned":false,"hidden":false,"mode":"md"},{"id":240,"value":"{\n const container = yield htl.html`

`;\n const map = L.map(container);\n const layer = L.geoJSON(world).addTo(map);\n map.fitBounds(layer.getBounds(), {maxZoom: 9});\n L.tileLayer(\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\", {\n attribution: \"© OpenStreetMap contributors\"\n }).addTo(map);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1217,"value":"Si besoin, on peut aussi aller chercher des données en local via l'Input file.","pinned":false,"hidden":false,"mode":"md"},{"id":1219,"value":"viewof csvfile = Inputs.file({\n label: \"CSV file\",\n accept: \".csv\",\n required: true\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1227,"value":"Inputs.table(csvfile.csv())","pinned":true,"hidden":false,"mode":"ojs"},{"id":1224,"value":"C'est aussi un moyen de proposer à l'utilisateur de reproduire un traitement avec ses propres données. ","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"# 5. Manipulation des données","pinned":false,"hidden":false,"mode":"md"},{"id":929,"value":"## vanilla js","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"On peut manipuler les données en vanilla Javascript. ","pinned":false,"hidden":false,"mode":"md"},{"id":252,"value":"nborg = manifs\n .map((d) => ({ date: d.date, nombre: +d.organisateurs }))\n .filter((d) => d.nombre > 1000)","pinned":true,"hidden":false,"mode":"ojs"},{"id":941,"value":"Inputs.table(nborg, { width: 250 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":938,"value":"## data table","pinned":false,"hidden":false,"mode":"md"},{"id":244,"value":"La manipulation des données est souvent un point de crispation pour les utilisateurs qui viennent d'Excel ou R. ","pinned":false,"hidden":false,"mode":"md"},{"id":273,"value":"Ceci peut être facilité avec les data table","pinned":false,"hidden":false,"mode":"md"},{"id":275,"value":"newmanifs = manifs","pinned":true,"hidden":false,"mode":"ojs"},{"id":1241,"value":"newmanifs","pinned":true,"hidden":false,"mode":"ojs"},{"id":931,"value":"## Arquero","pinned":false,"hidden":false,"mode":"md"},{"id":288,"value":"Ou encore, par la bibiothèque `Arquero` dont les principes sont un peu les mêmes que **R dplyr** (tidyverse)","pinned":false,"hidden":false,"mode":"md"},{"id":292,"value":"dt = aq.from(world.features.map((d) => d.properties))","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"dt.array(\"ISO3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":313,"value":"dt.rename({ ISO3: \"id\" }).objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"dt.select(\"NAMEen\", \"region\").objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"dt.derive({ pdppercapita: (d) => d.gdp / d.pop }).objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":316,"value":"dt.orderby(\"pop\").objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":328,"value":"summary = dt\n .rollup({\n min: (d) => aq.op.min(+d[\"pop\"]),\n max: (d) => aq.op.max(+d[\"pop\"]),\n mean: (d) => aq.op.mean(+d[\"pop\"]),\n median: (d) => aq.op.median(+d[\"pop\"]),\n sum: (d) => aq.op.sum(+d[\"pop\"]),\n stdev: (d) => aq.op.stdev(+d[\"pop\"]),\n count: (d) => aq.op.count()\n })\n .fold(aq.range(0, 7))","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"Inputs.table(summary, { width: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":933,"value":"## SQL","pinned":false,"hidden":false,"mode":"md"},{"id":894,"value":"On peut également se connecter à des bases de données et/ou manipuler en sql les données comme si c'était des bases de données","pinned":false,"hidden":false,"mode":"md"},{"id":897,"value":"select \"country\", \"pop\" from \"maddison.csv\" where \"year\" = 2010 order by \"pop\" desc","pinned":true,"hidden":false,"mode":"sql","output":"mydata","database":"maddison.csv"},{"id":959,"value":"mydata[0].toJSON()","pinned":true,"hidden":false,"mode":"ojs"},{"id":170,"value":"# 6. Visualisation des données","pinned":false,"hidden":false,"mode":"md"},{"id":148,"value":"Il existe de nombreuses bibliothèques JavaScript pour visualiser des données, à commencer par D3.js. La librairie plot développée par Mike Bostock (encore lui) et Philippe Rivière est en train de 🚀.","pinned":false,"hidden":false,"mode":"md"},{"id":809,"value":"## Observable Plot","pinned":false,"hidden":false,"mode":"md"},{"id":819,"value":"Observable Plot est une bibliothèque JavaScript open-source pour la visualisation de données. Comme ggplot, elle utilise une grammaire graphique qui se veut synthétique et facilement mémorisable.","pinned":false,"hidden":false,"mode":"md"},{"id":813,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":970,"value":"tbl = FileAttachment(\"mydata.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1021,"value":"Plot.plot({\n marks: [Plot.dotX(tbl, Plot.dodgeY({ x: \"gdppc\", fill: \"black\" }))],\n height: 450\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1012,"value":"Plot.plot({\n grid: true,\n marginLeft: 50,\n facet: {\n data: tbl,\n y: \"region\"\n },\n marks: [Plot.boxX(tbl, { x: \"gdppc\", fill: \"red\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1259,"value":"Pour crée des graphiques rapidement, on peut s'aider de l'interface d'observable et les aides en cliquant sur le **+** de création de cellule","pinned":false,"hidden":false,"mode":"md"},{"id":832,"value":"Depuis cette semaine, la création de graphiques avec Plot est facilitée encore davantage avec la création des **`chart cells`**","pinned":false,"hidden":false,"mode":"md"},{"id":740,"value":"Plot.plot({\n width: 1000,\n y: {\n grid: true\n },\n marks: [\n Plot.auto(manifs, {x: \"date\", y: \"organisateurs_paris\", color: \"#ff5375\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":634,"value":"## Bertin","pinned":false,"hidden":false,"mode":"md"},{"id":822,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":644,"value":"**`bertin`** est une bibliothèque JavaScript qui permet de réaliser des cartes thématiques pour le web. Son développement s’appuie en grande partie sur le librairie javascript d3.js.","pinned":false,"hidden":false,"mode":"md"},{"id":1065,"value":"On charge la bibliothèque avec `require`","pinned":false,"hidden":false,"mode":"md"},{"id":649,"value":"bertin = require(\"bertin\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1067,"value":"Une seule fonction permet de dessiner n'importe quel type de carte","pinned":false,"hidden":false,"mode":"md"},{"id":824,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":655,"value":"viewof nbreaks = Inputs.range([3, 9], { label: \"nbreaks\", step: 1, value: 7 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":657,"value":"viewof method = Inputs.select(\n [\"jenks\", \"q6\", \"quantile\", \"equal\", \"msd\", \"geometric\"],\n {\n label: \"method\",\n value: \"quantile\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"viewof pal = Inputs.select(\n [\n \"Blues\",\n \"Greens\",\n \"Greys\",\n \"Oranges\",\n \"Purples\",\n \"BuGn\",\n \"BuPu\",\n \"GnBu\",\n \"OrRd\",\n \"PuBuGn\",\n \"PuBu\",\n \"PuRd\",\n \"RdPu\",\n \"YlGnBu\",\n \"YlGn\",\n \"YlOrBr\",\n \"YlOrRd\",\n \"BrBG\",\n \"PRGn\",\n \"PiYG\",\n \"PuOr\",\n \"RdBu\",\n \"RdGy\",\n \"RdYlBu\",\n \"RdYlGn\",\n \"Spectral\"\n ],\n {\n label: \"colors\",\n value: \"RdYlGn\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"choro = bertin.draw({\n params: { projection: \"Eckert3\" },\n layers: [\n {\n type: \"layer\",\n geojson: world,\n fill: {\n type: \"choro\",\n values: \"gdppc\",\n nbreaks: nbreaks,\n method: method,\n //pal: pal,\n colors: pal,\n leg_round: -2,\n leg_title: `GDP per inh\n(in $)`,\n leg_x: 100,\n leg_y: 200\n },\n\n tooltip: [\"$name\", \"$gdppc\", \"(current US$)\"]\n },\n { type: \"graticule\" },\n { type: \"outline\" }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":667,"value":"Et on peut faire beaucoup d'autres choses","pinned":false,"hidden":false,"mode":"md"},{"id":638,"value":"gallery","pinned":false,"hidden":false,"mode":"ojs"},{"id":828,"value":"# 7 - Un espace de travail vraiment collaboratif","pinned":false,"hidden":false,"mode":"md"},{"id":882,"value":"Observable met le paquet sur l'aspect \"communauté\".","pinned":false,"hidden":false,"mode":"md"},{"id":851,"value":"## Les \"teams\"","pinned":false,"hidden":false,"mode":"md"},{"id":864,"value":"On peut travailler à plusieurs et en même temps sur un même notebook","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"

","pinned":false,"hidden":false,"mode":"md"},{"id":857,"value":"## Commentaires","pinned":false,"hidden":false,"mode":"md"},{"id":867,"value":"On peut discuter avec les autres en ajoutant des commentaires","pinned":false,"hidden":false,"mode":"md"},{"id":859,"value":"## Fork, merge et versionnement","pinned":false,"hidden":false,"mode":"md"},{"id":871,"value":"On peut cloner un notebook, le modifier, le comparer (diff) et proposer ses modifications. Comme avec `git`, tout ce qu'on fait est enregistré (versionnement). On peut revenir à n'importe quel état du document à tout moment. ","pinned":false,"hidden":false,"mode":"md"},{"id":875,"value":"## Un forum","pinned":false,"hidden":false,"mode":"md"},{"id":880,"value":"Un forum très actif où on a toujours une réponse dans la journée","pinned":false,"hidden":false,"mode":"md"},{"id":877,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":34,"value":"## Les imports","pinned":false,"hidden":false,"mode":"md"},{"id":670,"value":"Il est également possible d'importer n'importe quoi de n'importe quel autre notebook.","pinned":false,"hidden":false,"mode":"md"},{"id":394,"value":"autralia = FileAttachment(\"autralia.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"import { sketch } from \"@neocartocnrs/cartographic-doodles\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":408,"value":"viewof roughness = Inputs.range([1, 20], {\n label: \"roughness\",\n step: 1,\n value: 8\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"viewof bowing = Inputs.range([0, 20], {\n label: \"bowing\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":399,"value":"s = sketch(autralia, {\n paper: true,\n k: 0.05,\n stroke: \"none\",\n fill: \"#193c75\",\n overflow: true,\n roughness: roughness,\n hachureGap: 2.5,\n fillWeight: 0.5,\n fillStyle: \"zigzag\",\n bowing: bowing\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":672,"value":"Autre exemple : ","pinned":false,"hidden":false,"mode":"md"},{"id":419,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":432,"value":"SummaryTable(manifs)","pinned":true,"hidden":false,"mode":"ojs"},{"id":885,"value":"# Conclusion","pinned":false,"hidden":false,"mode":"md"},{"id":681,"value":"## Les points faibles 👎 ","pinned":false,"hidden":false,"mode":"md"},{"id":695,"value":"- L'outillage du JavaScript reste limité dans le domaine des statistiques et de la géomatique. Rappelons que le JS n'a pas été conçu à la base pour faire de l'analyse de données. \n- Observable est une société privée\n- Système de tarification/limitations (mais on peut aller dans Quarto)","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"## Les points forts 👍 ","pinned":false,"hidden":false,"mode":"md"},{"id":691,"value":"- Un outil super qui évolue jour après jour, adapté à l'exploration de données\n- Une communauté autour de la visualisation de données (que je ne retrouvais pas dans l’écosystème R)\n- Beaucoup de tutos, exemples...\n- Rien à installer\n- On peut embarquer facilement ses visus dans des site web\n","pinned":false,"hidden":false,"mode":"md"},{"id":1086,"value":"https://www.humanite.fr/en-debat/reforme-des-retraites/la-preuve-en-cartes-en-europe-fait-travailler-les-gens-jusqu-ce-qu-ils-soient-bons-jeter-779653","pinned":false,"hidden":false,"mode":"md"},{"id":131,"value":"# Annexes","pinned":false,"hidden":false,"mode":"md"},{"id":642,"value":"import { gallery } from \"@neocartocnrs/hello-bertin-js\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"import { previews } from \"@d3/gallery\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"Reveal = require(\"reveal.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}