30:Ta74,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 : 1,870,956 sur npm le 10 février 2022.

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:T499,{ let width = 500; let height = 75; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("background-color", "#CCC"); let tooltip = svg.append("g").append("text").text(""); svg .append("g") .attr("fill", "#e04a28") .selectAll("circle") .data(myData) .join("circle") .attr("cx", (d, i) => 50 + i * 100) .attr("cy", height / 2) .attr("r", (d) => d) .attr("fill", "#e04a28") .on("touchmove mousemove", function (e, d) { d3.select(this) .transition() .duration(500) .attr("fill", "#26374a") .attr("r", 25); d3.select("#info").text(`Le cercle sélectionné a un rayon de ${d}`); }) .on("touchend mouseleave", function (event, d) { d3.select(this) .transition() .attr("fill", "#e04a28") .attr("r", (d) => d); d3.select("#info").text(""); }); // Tooltip let info = svg .append("g") .append("text") .attr("id", "info") .attr("font-family", "sans-serif") .attr("font-size", 7) .attr("fill-opacity", 1) .attr("x", 2) .attr("y", 8) .text(""); return svg.node(); }32:T490,{ const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto"); // La sphère svg .append("g") .append("path") .datum(sphere) .attr("fill", " #a9daeb") .attr("d", path); // Les graticules svg .append("g") .append("path") .datum(d3.geoGraticule10()) .attr("d", path) .style("fill", "none") .style("stroke", "white") .style("stroke-width", 0.8) .style("stroke-opacity", 0.5) .style("stroke-dasharray", 2); // Les pays svg .append("g") .selectAll("path") .data(world.features) .join("path") .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("fill", "#d6b987") .attr("d", path); // Les cercles svg .append("g") .attr("fill", "#e04a28") .attr("fill-opacity", 0.9) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .selectAll("circle") .data(gdp.sort((a, b) => d3.descending(a.pib2018, b.pib2018))) .join("circle") .attr("transform", (d) => `translate(${coordsbyid.get(d.id)})`) .attr("r", (d) => radius(d.pib2018)); return svg.node(); }33:T456,{ const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto"); let path = d3.geoPath(newproj); var defs = svg.append("defs"); defs .append("path") .datum({ type: "Sphere" }) .attr("id", "sphere") .attr("d", path); defs .append("clipPath") .attr("id", "clip") .append("use") .attr("xlink:href", "#sphere"); // La sphère svg .append("g") .append("path") .datum(sphere) .attr("fill", " #a9daeb") .attr("d", path); // Les graticules svg .append("g") .append("path") .datum(d3.geoGraticule10()) .attr("d", path) .style("fill", "none") .style("stroke", "white") .style("stroke-width", 0.8) .style("stroke-opacity", 0.5) .style("stroke-dasharray", 2); // Les pays svg .append("g") .selectAll("path") .data(world.features) .join("path") .attr("stroke", "white") .attr("stroke-width", 0.5) .attr("fill", "#e3876b") .attr("d", path) .attr("clip-path", "url(#clip)"); return svg.node(); }34:T69d,{ const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto") .style("background-color", "white"); let projection = d3.geoOrthographic().rotate([103, 0]).clipAngle(90); let path = d3.geoPath(projection); var defs = svg.append("defs"); var radialGradient = defs .append("radialGradient") .attr("id", "radial-gradient"); radialGradient .append("stop") .attr("offset", "85%") .attr("stop-color", "#b6e1f0"); radialGradient .append("stop") .attr("offset", "100%") .attr("stop-color", "#8fcce3"); const water = svg .append("g") .append("path") .datum(sphere) .style("fill", "url(#radial-gradient)"); const graticule = svg .append("g") .append("path") .datum(d3.geoGraticule10()) .style("fill", "none") .style("stroke", "white") .style("stroke-width", 0.8) .style("stroke-opacity", 0.5) .style("stroke-dasharray", 2); const land = svg .append("path") .datum(world) .attr("fill", "white") .attr("fill-opacity", 0.5); const voronoi = svg .append("g") .attr("id", "map") .selectAll("path") .data(polygons.features) .join("path") .attr("class", "dpt") .attr("stroke", "white") .attr("stroke-width", 0.75) .attr("stroke", "#652e70") .attr("fill", "none") .attr("stroke-width", 0.3) .attr("d", path); function render() { land.attr("d", path); water.attr("d", path); graticule.attr("d", path); voronoi.attr("d", path); } return svg .call(zoom(projection).on("zoom.render end.render", render)) .call(render) .node(); }35:T8b7,conclusion = { var dom = html`

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

🏁

Conclusion

🙂

On peut faire beaucoup des choses avec D3 et Observable. Des posssibilités graphiques géniales.

Tout est traçable, reproductible, versionné, collaboratif, partageable, "embedable", modulable... Un environnement de travail qui pousse au partage, aux interactions, à la transparence, à la clareté.

🙂

Une approche et une réflexion vraiment centrée sur la visualisation de données

Une communauté réactive qui cause sémiologie graphique

Fonctionne partout. Rien à installer

😬

Le coût d'entrée est assez élevé

javascript + d3.js + Plot + Observable

+ markdown + html + svg +css + LaTeX + ...

😬

Une grande communauté mais assez peu accadémique et avec encore assez peu de géographes

🤔

Observable est une startup qui repose sur une tête d'épingle : la tête de mike Bostock...

Quel avenir à 10 ans ?

(Open source. Tout ce qui est développé fonctionne en dehors d'Observable)

😍

C'est quand même vraiment un outil génial

Ca vaut le cout de s'y plonger

Des librairies (Plot, bertinjs) pour vous simplifier la vie

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

`; shadow.appendChild(reveal); var deck = new Reveal(reveal, { embedded: true }); deck.initialize(); return dom; }36:T976,md`${previews([ { path: "@neocartocnrs/dotdensity-map", thumbnail: "62f6a1fda968ec4e49478e7e5d052761620d42aa132c63813dadd0809f3884c6", title: "Cartes par point", author: "@neocarto" }, { path: " @neocartocnrs/mapping-discontinuities", thumbnail: "8504c68b8514d761d4835c4635f018ae63c566995b9d4ab9a3f5aadb806ee58f", title: "Discontinuités", author: "@neocarto" }, { path: "@neocartocnrs/bars-pubs-in-paris", thumbnail: "c14ad9d8a458f600b460a5b3e9817c9884b08a15fb38b659ab9493a91b49c625", title: "Lissage", author: "@neocarto" }, { path: "@neocartocnrs/paris-by-road-osrm", thumbnail: "a1be7164788a85fabf433269c8837a40208795edc848905596b56b2db99f73e9", title: "Acessibilité", author: "@neocarto" }, { path: " @neocartocnrs/passeports-colors", thumbnail: "e3464b83849ff71ee3fb0a0cf5410f0ebaa402fbccbf9f1fe6a3072dbc3bce9b", title: "Passeports", author: "@neocarto" }, { path: " @neocartocnrs/rectangle-cartogram", thumbnail: "18022570caa0673fbf138f17bac3c4d8595b1cbd96255a9a8b24af83d07a3172", title: "Recmap", author: "@neocarto" }, { path: " @neocartocnrs/world-elevation-line-map", thumbnail: "3b1d8240d18ba5fe76550304654aaa77e84e83717412580ab43e275e9ebd9be8", title: "LineMap", author: "@neocarto" }, { path: " @neocartocnrs/dorling-cartogram", thumbnail: "623547d97c3bd2acd81bb9e6e4c3dcb04bcb76484d5fbe6db3d23686562c6a9c", title: "Dorling", author: "@neocarto" }, { path: " @neocartocnrs/mashroom-map", thumbnail: "d320c996932d720e0aa2cf53519ef27b172dddf198e75eb4900a33ac8751dcbf", title: "Champignons", author: "@neocarto" }, { path: "@neocartocnrs/the-organization-of-cartographers-for-social-equality", thumbnail: "2a691ec7f823812d27deda14adafc9955c7ed1589f69641a9d114f21c33b094d", title: "Projection transition", author: "@neocarto" }, { path: "@neocartocnrs/elevation", thumbnail: "237890b83c26dadd45f4947befb444c6c906ff66f0bb16c15cd19836d35f01eb", title: "Elevation Scan", author: "@neocarto" }, { path: "@neocartocnrs/mapping-a-route-from-some-gps-coordinates", thumbnail: "f3391f8f5ffab30b415f5c91ba74e55258bbedd275213339c30522d265fe1daf", title: "La vie de Julienne", author: "@neocarto" } ])} `37: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; }38:T481,slide_style = html``39:[{"id":"721bcf04f3c72fd27a9786968bf494d306a2827b7929883ece586893a6fe433e274230ea532641f355e70392e8cd8f9fe89eae0e9274492f5f9fcc38627b49cc","href":"https://static.observableusercontent.com/files/721bcf04f3c72fd27a9786968bf494d306a2827b7929883ece586893a6fe433e274230ea532641f355e70392e8cd8f9fe89eae0e9274492f5f9fcc38627b49cc","name":"timeline.png","type":"image/png","lastModified":1642147729238.092,"size":27297},{"id":"a01b2acbf32e1f54a30c8da4ca35fbf62b10406954f215c1e419e9b64d2f0778003fa2e9268ca7b837b3d6486755ae6bbed6a49f088cf58c5305c83570054cc7","href":"https://static.observableusercontent.com/files/a01b2acbf32e1f54a30c8da4ca35fbf62b10406954f215c1e419e9b64d2f0778003fa2e9268ca7b837b3d6486755ae6bbed6a49f088cf58c5305c83570054cc7","name":"bostock.png","type":"image/png","lastModified":1642147729238.092,"size":257620},{"id":"928ade4f29340680eec5095d9addbd9a0eaa8eb41e647b197f54f5ccd6019c35201c429dbcbbabbe34a0e4e10ad93b5302983c5ed9a8ebf16f46f1284cb443e3","href":"https://static.observableusercontent.com/files/928ade4f29340680eec5095d9addbd9a0eaa8eb41e647b197f54f5ccd6019c35201c429dbcbbabbe34a0e4e10ad93b5302983c5ed9a8ebf16f46f1284cb443e3","name":"continants.csv","type":"text/csv","lastModified":1642147729238.092,"size":5383},{"id":"26726e0e3120a4cf8bba85b6d5c4658d5d8de5c75e774616edd6abe6909e292772a86763ea33c7331563cc4fca63d4ca686cbafd930b70d72ce32a54e1f43196","href":"https://static.observableusercontent.com/files/26726e0e3120a4cf8bba85b6d5c4658d5d8de5c75e774616edd6abe6909e292772a86763ea33c7331563cc4fca63d4ca686cbafd930b70d72ce32a54e1f43196","name":"gdpppc.csv","type":"text/csv","lastModified":1642147729238.092,"size":4247},{"id":"9c2da79b856ae72514cabd91008026c1d456433a17541b4435db78f91b1734e40ba6b642cb21232ab6fa81724010ace33b32051dae64eaaa6c12cff09f8a8725","href":"https://static.observableusercontent.com/files/9c2da79b856ae72514cabd91008026c1d456433a17541b4435db78f91b1734e40ba6b642cb21232ab6fa81724010ace33b32051dae64eaaa6c12cff09f8a8725","name":"untitled.png","type":"image/png","lastModified":1642147729238.092,"size":43596},{"id":"cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","href":"https://static.observableusercontent.com/files/cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","name":"js.png","type":"image/png","lastModified":1642147729238.092,"size":1991},{"id":"a28d62b3079fce11aa748427d38b8edba3b462885306e34340834a769358e6600a21764b3855b92dc87209aca805c6e5088afbb9ea866363922da6b9c51a7454","href":"https://static.observableusercontent.com/files/a28d62b3079fce11aa748427d38b8edba3b462885306e34340834a769358e6600a21764b3855b92dc87209aca805c6e5088afbb9ea866363922da6b9c51a7454","name":"countries.json","type":"application/json","lastModified":1642147729238.092,"size":278433},{"id":"6f559142c9cb7c11af102efb099c4763ed647c6b4d17d4a4fca1ffdb7771c71e3de63df23b59480d72def8f98ea9604636774574b2f08c2907971319ce3783f2","href":"https://static.observableusercontent.com/files/6f559142c9cb7c11af102efb099c4763ed647c6b4d17d4a4fca1ffdb7771c71e3de63df23b59480d72def8f98ea9604636774574b2f08c2907971319ce3783f2","name":"gdp2018.csv","type":"text/csv","lastModified":1642147729238.092,"size":5300},{"id":"20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","href":"https://static.observableusercontent.com/files/20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","name":"d3jsgithub.png","type":"image/png","lastModified":1642147729238.092,"size":204966},{"id":"f27e78d82ecea3233ddc14fc3814ae53119731f081db456ab6948d389032f0dd7e730d631be2a661e41fa7a0a7254c453b6d06927eaa77579518089aabae72fa","href":"https://static.observableusercontent.com/files/f27e78d82ecea3233ddc14fc3814ae53119731f081db456ab6948d389032f0dd7e730d631be2a661e41fa7a0a7254c453b6d06927eaa77579518089aabae72fa","name":"1_gCWUibmQ8rszKxI3G19KmA.jpeg","type":"image/jpeg","lastModified":1642147729238.092,"size":102662},{"id":"949b606c6e3ca2c3452b18e4234d09a266af97083248e31d946b3457c2889aa2910987ede323284b1b176a35a61735fb5cbb59042faa8c8569bb922b17ce8c56","href":"https://static.observableusercontent.com/files/949b606c6e3ca2c3452b18e4234d09a266af97083248e31d946b3457c2889aa2910987ede323284b1b176a35a61735fb5cbb59042faa8c8569bb922b17ce8c56","name":"E-CW4dEXsAUZlBP.jpeg","type":"image/jpeg","lastModified":1644486007692.234,"size":610821},{"id":"31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","href":"https://static.observableusercontent.com/files/31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c","name":"athletes.csv","type":"text/csv","lastModified":1644483481116.756,"size":841836},{"id":"cabf69db7ec8301417f9791c3c3b13d384a73b55d6b48484671221411a6a3baf78d4f12bb53d6ad6d4e42051a078a3d514b3669f7093aa57ccce5535b6acdf08","href":"https://static.observableusercontent.com/files/cabf69db7ec8301417f9791c3c3b13d384a73b55d6b48484671221411a6a3baf78d4f12bb53d6ad6d4e42051a078a3d514b3669f7093aa57ccce5535b6acdf08","name":"books.png","type":"image/png","lastModified":1644480097050.621,"size":1597155},{"id":"a74e78f06e4e461427de4a5ac21ca479696f9f45b01c1925daa3d10000876d6b4b7c832446272c09e74d44730d6cf99fba216e75ae717544126f7109e3df9c5a","href":"https://static.observableusercontent.com/files/a74e78f06e4e461427de4a5ac21ca479696f9f45b01c1925daa3d10000876d6b4b7c832446272c09e74d44730d6cf99fba216e75ae717544126f7109e3df9c5a","name":"tweet.png","type":"image/png","lastModified":1644488546670.854,"size":410380},{"id":"e22d787bbb370584f4f67f4e4b67d19fe2e4f5f46ecab1decde415987860030f5f7bce2a9c2c311e16ec20bacb261616185f54183b0736d6c4a603b061f661b8","href":"https://static.observableusercontent.com/files/e22d787bbb370584f4f67f4e4b67d19fe2e4f5f46ecab1decde415987860030f5f7bce2a9c2c311e16ec20bacb261616185f54183b0736d6c4a603b061f661b8","name":"840fc43054ae7a8e21f6e442c12a64ab7ba5fe0f8941ff685db2f6f1e24ae821.jpg","type":"image/jpeg","lastModified":1644490909551.232,"size":15253},{"id":"82121a33f331271bd90669ea65d521d037ddfc4cffda30038725faab21fcea72cac51337b81d46c5305373c1194fdb2a47ec6f6e97ee8c96a8d3192d14110b19","href":"https://static.observableusercontent.com/files/82121a33f331271bd90669ea65d521d037ddfc4cffda30038725faab21fcea72cac51337b81d46c5305373c1194fdb2a47ec6f6e97ee8c96a8d3192d14110b19","name":"carthageo20212022.png","type":"image/png","lastModified":1665731897207.248,"size":249008}] 2e:{"title":"Observable pour les M2 Carthagéo","cells":[{"id":0,"value":"md`# Observable pour les M2 Carthagéo`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3710,"value":"### Faire des cartes en Javascript ? Challenge accepted!","pinned":false,"hidden":false,"mode":"md"},{"id":4057,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":3429,"value":"***Ce notebook est le support d'un cours réalisé pour les étudiants de Master 2 [Carthagéo](https://formations.pantheonsorbonne.fr/fr/catalogue-des-formations/master-M/master-geographie-KBUW66GE/master-parcours-carthageo-KBUW66XE.html) le 11 février 2022. Ce notebook est une adaptation de [celui-ci](https://observablehq.com/@neocartocnrs/tuto).***","pinned":false,"hidden":false,"mode":"md"},{"id":3493,"value":"Pour commencer, voici quelques lectures préliminaires.","pinned":false,"hidden":false,"mode":"md"},{"id":3442,"value":"➡️ Javascript for data Analysis, par Mike Bostock [[Voir](https://towardsdatascience.com/javascript-for-data-analysis-2e8e7dbf63a7)].","pinned":false,"hidden":false,"mode":"md"},{"id":3465,"value":"➡️ Reactive, reproducible, collaborative: computational notebooks evolve, par Jeffrey M. Perkel. [[voir](https://www.nature.com/articles/d41586-021-01174-w)]","pinned":false,"hidden":false,"mode":"md"},{"id":3481,"value":"➡️ The Observable zealot, par Philippe Rivère. [[voir](https://observablehq.com/@fil/the-observable-zealot)]","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"slide`🤖 Javascript en bref`","pinned":false,"hidden":false,"mode":"ojs"},{"id":974,"value":"Dans Observable, l'idée c'est de créer des cartes avec des lignes de code javascript. Commençons donc par une petite présentation introductive *(Thanks Reveal.js)*.","pinned":false,"hidden":false,"mode":"md"},{"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://javascript-en-foret.lepodcast.fr/\n- https://www.youtube.com/watch?v=PIU_2SBSZgw&list=PLjwdMgw5TTLVzD9Jq_WBd1crqDwXRn4cw","pinned":false,"hidden":false,"mode":"md"},{"id":3707,"value":"FileAttachment(\"books.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"slide`📚 Observable n'est pas (que) Javascript`","pinned":false,"hidden":false,"mode":"ojs"},{"id":346,"value":"## 👉Qu'est ce qu'Observable?","pinned":false,"hidden":false,"mode":"md"},{"id":441,"value":"Observable est une startup fondée par Mike Bostock et Melody Meckfessel, qui propose une plateforme 100% en ligne pour concevoir, partager et diffuser des visualisations de données. ","pinned":false,"hidden":false,"mode":"md"},{"id":423,"value":"FileAttachment(\"timeline.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1066,"value":"À première vue, Observable semble être du *vanilla* JavaScript. C'est intentionnel : en s'appuyant sur le langage natif du web, Observable semble familier de prime abord et permet d'utiliser les bibliothèques habituelles du js. Cependant, Observable n'est pas vraiment du JavaScript.","pinned":false,"hidden":false,"mode":"md"},{"id":456,"value":"## 👉 Les Notebooks","pinned":false,"hidden":false,"mode":"md"},{"id":835,"value":"Les *notebooks* sont comme des billets de blog. Ils contiennent du texte, des images et du contenu multimédia. Ils peuvent être rangés dans des collections. Ils sont disponibles en ligne via une url. Comme on peut s'y attendre, ils contiennent aussi des lignes de code. L'objectif : faire de la Programmation lettrée (*literate programming*). C'est à dire proposer un document contenant le code et l'explication du code. Voir par exemple les trending notebooks.","pinned":false,"hidden":false,"mode":"md"},{"id":2470,"value":"Important : les notebooks peuvent être **privés** ou **publics**.","pinned":false,"hidden":false,"mode":"md"},{"id":478,"value":"## 👉 Les cellules","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"Un notebook est constitué d'un ensemble de cellules qui communiquent entre elles. ","pinned":false,"hidden":false,"mode":"md"},{"id":511,"value":"** ➡️ Javascript**","pinned":false,"hidden":false,"mode":"md"},{"id":3973,"value":"toto = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":3270,"value":"mavariable = 30","pinned":true,"hidden":false,"mode":"ojs"},{"id":3720,"value":"moncalcul = 3 * 8","pinned":true,"hidden":false,"mode":"ojs"},{"id":820,"value":"montableau = [\"a\", \"b\", \"c\", \"d\", \"dlkjlkjlk\"]","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":3976,"value":"toto1(10, 2)","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":false,"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 de *markdown* text avec [lien](https://daringfireball.net/projects/markdown/) et du texte en **gras**.","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":"** ➡️ Et grace aux backticks, on peut combiner hyper facilement les types...**","pinned":false,"hidden":false,"mode":"md"},{"id":1102,"value":"result = {\n let a = 10;\n let b = 13;\n return a * b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":554,"value":"html`Le résultat de mon calcul est ${result} !`","pinned":true,"hidden":false,"mode":"ojs"},{"id":558,"value":"** ➡️ L'ordre des cellules n'a pas d'importance 🤯**","pinned":false,"hidden":false,"mode":"md"},{"id":1121,"value":"Et c'est génial, car ça nous permet de placer la figure qu'on a créé avec du code, tout en haut de la page. On peut organiser le contenu vraiment comme on le souhaite. ","pinned":false,"hidden":false,"mode":"md"},{"id":567,"value":"c = a * b","pinned":true,"hidden":false,"mode":"ojs"},{"id":563,"value":"a = 12","pinned":true,"hidden":false,"mode":"ojs"},{"id":565,"value":"b = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":189,"value":"FileAttachment(\"untitled.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":576,"value":"## 👉 Inputs","pinned":false,"hidden":false,"mode":"md"},{"id":3990,"value":"viewof radios = Inputs.radio([\"A\", \"B\", \"C\"], {\n label: \"Clique là\",\n value: \"B\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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":"## 👉 Et c'est réactif 🔥","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":"NB : Cette façon de faire n'est plus vraiment conseillée. Mieux vaut utiliser des fonctions prêtes à l'emploi dans lesquelles on peut passer tout simplement ses données. Voir https://observablehq.com/@d3/bar-chart?collection=@d3/charts ","pinned":false,"hidden":false,"mode":"md"},{"id":1175,"value":"## 👉 C'est collaboratif","pinned":false,"hidden":false,"mode":"md"},{"id":4002,"value":"khdfsdfsdfsdfkjhkj","pinned":true,"hidden":false,"mode":"md"},{"id":1179,"value":"On peut travailler jusqu'à 5 personnes en même temps sur un carnet. Et on peut ajouter des commentaires.","pinned":false,"hidden":false,"mode":"md"},{"id":3932,"value":"## 👉 Commentaires","pinned":false,"hidden":false,"mode":"md"},{"id":770,"value":"## 👉 Fork","pinned":false,"hidden":false,"mode":"md"},{"id":1155,"value":"Il est possible de copier soi n'importe quel notebook, pour faire les modifications qu'on souhaite. NB : chaque carnet est protégé par une licence, quasiment tout le temps open source.","pinned":false,"hidden":false,"mode":"md"},{"id":1190,"value":"## 👉 Versionnement","pinned":false,"hidden":false,"mode":"md"},{"id":1193,"value":"Tout ce qu'on fait est tracé et sauvegardé automatiquement.","pinned":false,"hidden":false,"mode":"md"},{"id":722,"value":"## 👉 Sauvegarde et exports","pinned":false,"hidden":false,"mode":"md"},{"id":1199,"value":"On peut à tout moment sauvegarder son code. Et on peut surtout exporter ses visualisation pour les rendre accessibles dans un site ou un 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.humanite.fr/comment-la-mediterranee-est-devenue-la-frontiere-migratoire-la-plus-meurtriere-au-monde-carte-698546","pinned":false,"hidden":false,"mode":"md"},{"id":1085,"value":"## 👉 Comment apprendre ?","pinned":false,"hidden":false,"mode":"md"},{"id":1233,"value":"On a donc là un environnement collaboratif, qui permet d'apprendre comment tout cela fonctionne. ","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":141,"value":"slide`🗺️ D3.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1332,"value":"D3.js (pour **D**ata-**D**riven **D**ocuments) est une bibliothèque graphique JavaScript très populaire (plis de 100k stars sur github) développée par Mike Bostock qui permet l'affichage de données numériques sous une forme graphique et dynamique. Elles est conforme aux normes W3C et utilise les technologies courantes **SVG**, **JavaScript** et **CSS** pour la visualisation de données. Cette bibliothèque a 10 ans !!! Nous en sommes à la 7e version.","pinned":false,"hidden":false,"mode":"md"},{"id":794,"value":"Tout comme plot, **d3.js** est automatiquement chargé dans Observable. Mais vous pouvez charger la version que vous voulez avec require :\n\n~~~js\nd3 = require(\"d3@7\")\n~~~\n","pinned":false,"hidden":false,"mode":"md"},{"id":1338,"value":"**d3.js** est une grosse librairie qui fait beaucoup de choses. Depuis 2015, elle est composée de différents modules spécialisés.","pinned":false,"hidden":false,"mode":"md"},{"id":151,"value":"FileAttachment(\"d3jsgithub.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1342,"value":"## 👉 Comment ca marche","pinned":false,"hidden":false,"mode":"md"},{"id":1412,"value":"**➡️ Principe 1 : la manipulation du DOM.**","pinned":false,"hidden":false,"mode":"md"},{"id":1814,"value":"Le **Document Object Model (DOM)** est une interface de programmation normalisée par le W3C, qui permet à des scripts d'examiner et de modifier le contenu du navigateur web. Par le DOM, la composition d'une page web est représentée sous forme d'un arbre avec des objets dedans.","pinned":false,"hidden":false,"mode":"md"},{"id":2579,"value":"Avant, on aurait écrit ceci : ","pinned":false,"hidden":false,"mode":"md"},{"id":2582,"value":"\n \n \n \n","pinned":true,"hidden":false,"mode":"html"},{"id":2592,"value":"Avec le DOM et d3js, on écrit dorénavant ceci :","pinned":false,"hidden":false,"mode":"md"},{"id":1434,"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\", 50)\n .attr(\"cy\", 30)\n .attr(\"r\", 25)\n .attr(\"fill\", \"#e04a28\");\n\n svg\n .append(\"rect\")\n .attr(\"x\", 100)\n .attr(\"y\", 5)\n .attr(\"height\", 50)\n .attr(\"width\", 50)\n .attr(\"fill\", \"#5277bf\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2611,"value":"**➡️ d3.select()**","pinned":false,"hidden":false,"mode":"md"},{"id":2616,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, 500, 60])\n .style(\"background-color\", \"#CCC\");\n\n svg.append(\"circle\").attr(\"id\", \"mycircle\");\n svg.append(\"rect\").attr(\"class\", \"mysquare\");\n let mysquare2 = svg.append(\"rect\");\n\n svg\n .select(\"#mycircle\")\n .attr(\"fill\", \"#5277bf\")\n .attr(\"cx\", 50)\n .attr(\"cy\", 30)\n .attr(\"r\", 25);\n\n svg\n .select(\".mysquare\")\n .attr(\"fill\", \"#e04a28\")\n .attr(\"height\", 50)\n .attr(\"width\", 50)\n .attr(\"x\", 100)\n .attr(\"y\", 5);\n\n mysquare2\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#3c803f\")\n .attr(\"stroke-width\", 2)\n .attr(\"height\", 30)\n .attr(\"width\", 30)\n .attr(\"x\", 180)\n .attr(\"y\", 15);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1418,"value":"**➡️ Principe 2 : Dessiner à partir de données**","pinned":false,"hidden":false,"mode":"md"},{"id":1358,"value":"myData = [10, 20, 30, 10, 18]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1366,"value":"{\n const width = 500;\n const height = 75;\n\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"background-color\", \"#CCC\");\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"#e04a28\")\n .selectAll(\"circle\")\n .data(myData)\n .join(\"circle\")\n .attr(\"cx\", (d, i) => 50 + i * 100)\n .attr(\"cy\", height / 2)\n .attr(\"r\", (d) => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2527,"value":"**➡️ Transitions**","pinned":false,"hidden":false,"mode":"md"},{"id":2534,"value":"*transition()* permet d'animer un objet et/ou de faire varier ses propriétés.\n\n*.duration()* permet de définir la durée de la transition.\n\n*.delay()* permet de définir un temps d'attente.","pinned":false,"hidden":false,"mode":"md"},{"id":2537,"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 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":2561,"value":"{\n let width = 500;\n let height = 75;\n\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"background-color\", \"#CCC\");\n\n svg\n .append(\"g\")\n .attr(\"fill\", \"#e04a28\")\n .selectAll(\"circle\")\n .data(myData)\n .join(\"circle\")\n .attr(\"cx\", (d, i) => 50 + i * 100)\n .attr(\"cy\", height / 2)\n .attr(\"r\", 10)\n .transition()\n .duration(2000)\n .attr(\"r\", (d) => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2567,"value":"**➡️ Interactivité**","pinned":false,"hidden":false,"mode":"md"},{"id":2669,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1347,"value":"## 👉 Comment appendre","pinned":false,"hidden":false,"mode":"md"},{"id":1345,"value":"- https://observablehq.com/@d3/learn-d3\n- https://observablehq.com/@d3/learn-d3-scales?collection=@d3/learn-d3\n- https://www.freecodecamp.org/news/d3js-tutorial-data-visualization-for-beginners/#create-a-world-map-with-d3.js","pinned":false,"hidden":false,"mode":"md"},{"id":873,"value":"slide`🌐 Faire une carte avec d3js (via d3-geo)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2330,"value":"Comme son nom l'indique, **d3-geo** est le module de d3 pour faire des calculs et des transformations sur le globe. Le module contient les projections de bases et tout un tas de fonctions.","pinned":false,"hidden":false,"mode":"md"},{"id":1475,"value":"## 👉 Afficher un fond de carte","pinned":false,"hidden":false,"mode":"md"},{"id":1499,"value":"- Ajout d'un fichier geojson","pinned":false,"hidden":false,"mode":"md"},{"id":1479,"value":"world = FileAttachment(\"countries.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1504,"value":"- Définition de la projection (librairie **d3-geo-projection@4**). Voir : https://github.com/d3/d3-geo-projection","pinned":false,"hidden":false,"mode":"md"},{"id":1482,"value":"projection = d3.geoBertin1953()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1511,"value":"- Définition de la hauteur de la carte (la largeur est définie automatiquement par Observable)","pinned":false,"hidden":false,"mode":"md"},{"id":1495,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":1514,"value":"- Définition du path (c-à-d la fonction qui va convertir les coordonnées du géojson en lat/long en chemin svg sur la page)","pinned":false,"hidden":false,"mode":"md"},{"id":1497,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1522,"value":"- On peut définir aussi la sphère","pinned":false,"hidden":false,"mode":"md"},{"id":1521,"value":"sphere = ({ type: \"Sphere\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1517,"value":"- Affichage de la carte","pinned":false,"hidden":false,"mode":"md"},{"id":1531,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n // La sphère\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(sphere)\n .attr(\"fill\", \" #a9daeb\")\n .attr(\"d\", path); // En SVG, l'attribut d définit un tracé à dessiner\n\n // Les graticules\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(d3.geoGraticule10())\n .attr(\"d\", path) // En SVG, l'attribut d définit un tracé à dessiner\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"white\")\n .style(\"stroke-width\", 0.8)\n .style(\"stroke-opacity\", 0.5)\n .style(\"stroke-dasharray\", 2);\n\n // DATUM\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(world) // Datum lit le tableau de données d'un coup => affiche tout de la même façon.\n .attr(\"fill\", \"#de81d3\")\n .attr(\"fill-opacity\", 0.9)\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"d\", path); // En SVG, l'attribut d définit un tracé à dessiner\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1572,"value":"## 👉 Carte qualitative","pinned":false,"hidden":false,"mode":"md"},{"id":3008,"value":"Pour faire des cartes, on va souvent utiliser *d3-scale* qui va nous permettre de transfomer les données en classes qualitatives, quantitatives, et même déterminer les surfaces de cercles proportionnels. ","pinned":false,"hidden":false,"mode":"md"},{"id":1587,"value":"- Import de données attributaires","pinned":false,"hidden":false,"mode":"md"},{"id":1584,"value":"regions = FileAttachment(\"continants.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1590,"value":"Inputs.table(regions)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1595,"value":"- On crée une fonction pour associer une couleur à chaque continent","pinned":false,"hidden":false,"mode":"md"},{"id":3023,"value":"colors_typo = d3.schemeTableau10.slice(0, 5).concat(\"white\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3028,"value":"types = Array.from(new Set(regions.map((d) => d[\"Region Code\"])))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1631,"value":"getcolor = d3.scaleOrdinal().domain(types).range(colors_typo)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1718,"value":"getcolor(\"Africa\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1698,"value":"cols = new Map(regions.map((d) => [d.ISO3, getcolor(d[\"Region Code\"])]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1575,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n // La sphère\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(sphere)\n .attr(\"fill\", \" #a9daeb\")\n .attr(\"d\", path);\n\n // Les graticules\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(d3.geoGraticule10())\n .attr(\"d\", path)\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"white\")\n .style(\"stroke-width\", 0.8)\n .style(\"stroke-opacity\", 0.5)\n .style(\"stroke-dasharray\", 2);\n\n svg\n .append(\"g\")\n //.attr(\"fill\", \"white\")\n .selectAll(\"path\")\n .data(world.features) // data lit chaque features pour itérer dessus\n .join(\"path\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"fill\", (d) => cols.get(d.properties.ISO3))\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3033,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":3021,"value":"Swatches(d3.scaleOrdinal(types, colors_typo))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2309,"value":"NB : des pays apparaissent en noir. Ceci est lié à un problème de jointure entre les données et le fond de carte. Vigilance...","pinned":false,"hidden":false,"mode":"md"},{"id":3006,"value":"## 👉 Carte choroplèthe","pinned":false,"hidden":false,"mode":"md"},{"id":3044,"value":"gdpppc = FileAttachment(\"gdpppc.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":3042,"value":"quantile = d3\n .scaleQuantile()\n .domain(gdpppc.map((d) => d.gdppc2018))\n .range(d3.schemeReds[6])","pinned":true,"hidden":false,"mode":"ojs"},{"id":3120,"value":"colbyid = new Map(gdpppc.map((d) => [d.id, quantile(d.gdppc2018)]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":3113,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n // La sphère\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(sphere)\n .attr(\"fill\", \" #a9daeb\")\n .attr(\"d\", path);\n\n // Les graticules\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(d3.geoGraticule10())\n .attr(\"d\", path)\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"white\")\n .style(\"stroke-width\", 0.8)\n .style(\"stroke-opacity\", 0.5)\n .style(\"stroke-dasharray\", 2);\n\n svg\n .append(\"g\")\n .selectAll(\"path\")\n .data(world.features)\n .join(\"path\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"fill\", (d) =>\n colbyid.get(d.properties.ISO3) == undefined\n ? \"white\"\n : colbyid.get(d.properties.ISO3)\n )\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3065,"value":"Legend(\n d3.scaleQuantile(\n gdpppc.map((d) => Math.round(d.gdppc2018)),\n d3.schemeReds[6]\n ),\n {\n title: \"PIB par habitant en 2018\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2092,"value":"## 👉 Cercles proportionnels","pinned":false,"hidden":false,"mode":"md"},{"id":2096,"value":"On importe des données de PUB par pays","pinned":false,"hidden":false,"mode":"md"},{"id":2230,"value":"gdp = FileAttachment(\"gdp2018.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2475,"value":"Inputs.table(gdp)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2242,"value":"On définit une fonction pour passer de la valeur au rayon.","pinned":false,"hidden":false,"mode":"md"},{"id":2245,"value":"radius = d3.scaleSqrt([0, d3.max(gdp, (d) => d.pib2018)], [0, k])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2251,"value":"Et ci-dessous, une petite fonction récupérée [ici](https://observablehq.com/@xangregg/proportional-geographic-scatterplot-by-country) pour déterminer le plus grand polygone (pour pouvoir y placer le centroide)","pinned":false,"hidden":false,"mode":"md"},{"id":2249,"value":"// To put circles in the largest polygon (from @xangregg/proportional-geographic-scatterplot-by-country)\nlargestPolygon = function (d) {\n var best = {};\n var bestArea = 0;\n d.geometry.coordinates.forEach(function (coords) {\n var poly = { type: \"Polygon\", coordinates: coords };\n var area = d3.geoArea(poly);\n if (area > bestArea) {\n bestArea = area;\n best = poly;\n }\n });\n return best;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2280,"value":"On crée une map donnant le centroïde de chaque polygone. En cas de polygone multi partie, on se place au centre du plus grand polygone. Ici, les coordonnées sont données dans le plan du document svg (et non en lat/lon).","pinned":false,"hidden":false,"mode":"md"},{"id":2259,"value":"coordsbyid = new Map(\n world.features\n .map((d) => {\n d.properties.position = d3.geoCentroid(\n d.geometry.type == \"Polygon\" ? d : largestPolygon(d)\n );\n return d;\n })\n .map((d) => [d.properties.ISO3, projection(d.properties.position)])\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2284,"value":"C'est fini, on peut faire la carte. ","pinned":false,"hidden":false,"mode":"md"},{"id":2480,"value":"viewof k = Inputs.range([0, 150], { label: \"k\", value: 75 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2288,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":2312,"value":"NB : Des cercles sont positionnés en haut à gauche. Cela signifie qu'il y a des données dans le tableau de donnée sans correspondance avec le fond de carte. Vigilance...","pinned":false,"hidden":false,"mode":"md"},{"id":2317,"value":"## 👉 Quelques mots sur les projections","pinned":false,"hidden":false,"mode":"md"},{"id":3784,"value":"FileAttachment(\"E-CW4dEXsAUZlBP.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2339,"value":"d3 possède son propre système pour gérer les projections. Il s'agit de fonctions javascript. Elles sont vraiment nombreuses et certains sont vraiment originales. ","pinned":false,"hidden":false,"mode":"md"},{"id":2359,"value":"newproj = d3.geoPolyhedralWaterman()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2345,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":2383,"value":"Mais on peut aussi utiliser les systèmes de projection classiques grace à la librairie *proj4js* et la fonction *[proj4d3](https://observablehq.com/@fil/proj4js-d3)* (développée par Philippe Rivière).","pinned":false,"hidden":false,"mode":"md"},{"id":2400,"value":"proj4 = require(\"proj4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2402,"value":"function proj4d3(proj4string) {\n const degrees = 180 / Math.PI,\n radians = 1 / degrees,\n raw = proj4(proj4string),\n p = function (lambda, phi) {\n return raw.forward([lambda * degrees, phi * degrees]);\n };\n p.invert = function (x, y) {\n return raw.inverse([x, y]).map(function (d) {\n return d * radians;\n });\n };\n const projection = d3.geoProjection(p).scale(1);\n projection.raw = raw;\n return projection;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2407,"value":"On importe un fond de carte des départements français","pinned":false,"hidden":false,"mode":"md"},{"id":2757,"value":"europe = d3\n .json(\n \"https://gisco-services.ec.europa.eu/distribution/v2/nuts/topojson/NUTS_RG_20M_2021_4326_LEVL_0.json\"\n )\n .then((r) => topojson.feature(r, r.objects.NUTS_RG_20M_2021_4326))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2409,"value":"On choisit la projection officielle de l'Europe ([EPSG 3035 - ETRS89 / LAEA](https://spatialreference.org/ref/epsg/etrs89-etrs-laea/))","pinned":false,"hidden":false,"mode":"md"},{"id":2386,"value":"epsg3035 = \"+proj=laea +lat_0=52 +lon_0=10 +x_0=4321000 +y_0=3210000 +ellps=GRS80 +units=m +no_defs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2388,"value":"laea = proj4d3(epsg3035).fitExtent(\n [\n [0, 0],\n [width, height]\n ],\n {\n type: \"FeatureCollection\",\n features: europe.features.filter((d) => d.properties.NUTS_ID != \"FR\")\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2418,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n let path = d3.geoPath(laea);\n\n svg\n .append(\"g\")\n .append(\"path\")\n .datum(d3.geoGraticule10())\n .attr(\"class\", \"graticule\")\n .attr(\"d\", path)\n .style(\"fill\", \"none\")\n .style(\"stroke\", \"#4e658a\")\n .style(\"stroke-width\", 0.8)\n .style(\"stroke-opacity\", 0.5)\n .style(\"stroke-dasharray\", 2);\n\n svg\n .append(\"path\")\n .datum(world)\n .attr(\"fill\", \"#ebe6e6\")\n .attr(\"stroke\", \"none\")\n .attr(\"d\", path);\n\n svg\n .append(\"path\")\n .datum(europe)\n .attr(\"fill\", \"#e68ed7\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.4)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3512,"value":"slide`🌐 bertin.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3565,"value":"***bertin.js*** est un package javascript facile à utiliser qui s'appuie sur d3js. L'objectif : faciliter le processus de création de cartes thématiques. Le principe est de travailler avec des couches empilées les unes sur les autres. Comme dans un SIG, les couches qui sont affichées au-dessus sont placées en haut dans le code, les couches qui sont affichées en dessous sont placées en bas dans le code. Les couches qui peuvent être affichées sont de plusieurs types : en-tête, pied de page, graticule, contour, choro, typo, prop, ombre, scalebar, texte... Chaque type a ses propres paramètres. Cette liste sera complétée progressivement.","pinned":false,"hidden":false,"mode":"md"},{"id":3680,"value":"Import du package *bertin.js* avec require.","pinned":false,"hidden":false,"mode":"md"},{"id":3595,"value":"bertin = require(\"bertin@0.7.4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3683,"value":"Import du fond de carte","pinned":false,"hidden":false,"mode":"md"},{"id":3652,"value":"countries = d3.json(\n \"https://gisco-services.ec.europa.eu/distribution/v2/countries/geojson/CNTR_RG_60M_2020_4326.geojson\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":3686,"value":"Import des données","pinned":false,"hidden":false,"mode":"md"},{"id":3654,"value":"maddison = d3\n .csv(\n \"https://raw.githubusercontent.com/neocarto/resources/master/datasets/maddison/output/maddison.csv\"\n )\n .then((d) => d.filter((d) => d.year == \"2018\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":3690,"value":"Jointure","pinned":false,"hidden":false,"mode":"md"},{"id":3656,"value":"data = bertin.merge(countries, \"ISO3_CODE\", maddison, \"countrycode\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":3693,"value":"Réalisation de la carte","pinned":false,"hidden":false,"mode":"md"},{"id":3673,"value":"viewof size = Inputs.range([1, 100], {\n label: \"radius max\",\n step: 1,\n value: 60\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":3658,"value":"map = bertin.draw({\n params: { projection: d3.geoBertin1953(), margin: 20 },\n layers: [\n {\n type: \"header\",\n text: `World\nPopulation`\n },\n {\n type: \"bubble\",\n geojson: data,\n values: \"pop\",\n k: size,\n fill: { type: \"choro\", values: \"gdppc\" },\n dorling: true,\n tooltip: [\"country\", \"pop\", \"(inh.)\"],\n leg_title: \"World Population\\nin 2018 (inh.)\",\n leg_x: 700,\n leg_y: 400,\n leg_round: 3\n },\n {\n type: \"missing\",\n geojson: data,\n values: \"pop\"\n },\n {\n //type: \"layer\",\n geojson: countries,\n fill: \"#f5d482\"\n },\n { type: \"graticule\", step: 50, stroke: \"red\" },\n { type: \"outline\" }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3571,"value":"**Documentation et exemples disponibles ici** : https://observablehq.com/collection/@neocartocnrs/bertin","pinned":false,"hidden":false,"mode":"md"},{"id":875,"value":"slide`🌐 Topojson`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1977,"value":"TopoJSON est une extension de GeoJSON. TopoJSON introduit un nouveau type, \"Topologie\", qui contient des objets GeoJSON. Une topologie possède une carte *objects* qui indexe les objets géométriques par leur nom. Il s'agit d'objets GeoJSON standard, tels que des polygones, des multipolygones et des collections géométriques. Cependant, les coordonnées de ces géométries sont stockées dans le tableau *arcs* de la topologie, plutôt que sur chaque objet séparément. Un arc est une séquence de points, similaire à une chaîne de lignes ; les arcs sont assemblés pour former la géométrie. Enfin, la topologie possède une *transforme* qui spécifie comment convertir les coordonnées entières codées en delta en leurs valeurs natives (comme la longitude et la latitude).","pinned":false,"hidden":false,"mode":"md"},{"id":2088,"value":"topojson = require(\"topojson-client@3\", \"topojson-server@3\", \"topojson-simplify@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2177,"value":"## 👉 geojson -> topojson","pinned":false,"hidden":false,"mode":"md"},{"id":2010,"value":"worldtopo = topojson.topology({ world: world })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2189,"value":"## 👉 topojson -> geojson","pinned":false,"hidden":false,"mode":"md"},{"id":2181,"value":"topojson.feature(worldtopo, \"world\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2105,"value":"## 👉 Extraire les frontières","pinned":false,"hidden":false,"mode":"md"},{"id":2806,"value":"worldtopo","pinned":true,"hidden":false,"mode":"ojs"},{"id":1984,"value":"borders = topojson.mesh(worldtopo, worldtopo.objects.world, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2114,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n svg\n .append(\"path\")\n .datum(borders)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#ed87c8\")\n .attr(\"stroke-width\", 1.5)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2120,"value":"## 👉 Merge","pinned":false,"hidden":false,"mode":"md"},{"id":2124,"value":"merged = topojson.merge(worldtopo, worldtopo.objects.world.geometries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2129,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n svg\n .append(\"path\")\n .datum(merged)\n .attr(\"fill\", \"#fae6f2\")\n .attr(\"stroke\", \"#ed87c8\")\n .attr(\"stroke-width\", 1)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2132,"value":"## 👉 Contiguité","pinned":false,"hidden":false,"mode":"md"},{"id":2135,"value":"neighbors = topojson.neighbors(worldtopo.objects.world.geometries)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2173,"value":"ids = world.features.map((d) => d.properties.ISO3)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2143,"value":"getcontig = (id) => {\n var result = [];\n var contig = neighbors[ids.indexOf(id)];\n result = contig.map((i) => ids[i]);\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2147,"value":"viewof mycountry = Inputs.select(ids, { label: \"Select one\", value: \"USA\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2157,"value":"neighborhood = world.features.filter((d) =>\n getcontig(mycountry).includes(d.properties.ISO3)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2161,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n // Sphere\n\n svg\n .append(\"path\")\n .datum(world)\n .attr(\"fill\", \"#eeeeee\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.4)\n .attr(\"d\", path);\n\n svg\n .append(\"path\")\n .data(world.features.filter((d) => d.properties.ISO3 == mycountry))\n .attr(\"fill\", \"#ed87c8\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.4)\n .attr(\"d\", path);\n\n svg\n .append(\"g\")\n .attr(\"id\", \"map\")\n .selectAll(\"path\")\n .data(neighborhood)\n .join(\"path\")\n .attr(\"fill\", \"#f0d175\")\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2198,"value":"## 👉 Simplifier les géométries","pinned":false,"hidden":false,"mode":"md"},{"id":2201,"value":"world_simplified = {\n let world_simplified = topojson.presimplify(worldtopo);\n let min_weight = topojson.quantile(world_simplified, minArea);\n world_simplified = topojson.simplify(world_simplified, min_weight);\n return world_simplified;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2211,"value":"countries2 = topojson.feature(world_simplified, world_simplified.objects.world)\n .features","pinned":true,"hidden":false,"mode":"ojs"},{"id":2204,"value":"viewof minArea = Inputs.range([0.01, 0.1], { step: 0.001 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":2214,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n svg\n .append(\"g\")\n .attr(\"id\", \"map\")\n .selectAll(\"path\")\n .data(countries2)\n .join(\"path\")\n .attr(\"fill\", \"#ed87c8\")\n .attr(\"stroke\", \"white\")\n .attr(\"stroke-width\", 0.4)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2110,"value":"Voir aussi :","pinned":false,"hidden":false,"mode":"md"},{"id":913,"value":"md`${previews([\n {\n path: \"@neocartocnrs/lets-sketch-a-map\",\n thumbnail:\n \"a13801044a21a8ac51e29133c51f2fe23e6d891075241f9e716f133ab600a39c\",\n title: \"Let's Sketch a Map\",\n author: \"@neocarto\"\n }\n])} \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"slide`🌎 Turf.js`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1828,"value":"Turf est une bibliothèque JavaScript pour l'analyse spatiale. Elle comprend les opérations spatiales traditionnelles, des fonctions d'aide pour la création de données GeoJSON, ainsi que des outils de classification des données et de statistiques. Voir https://github.com/Turfjs/turf & https://turfjs.org/","pinned":false,"hidden":false,"mode":"md"},{"id":1825,"value":"turf = require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1820,"value":"usa = world.features.find((d) => d.properties.ISO3 == \"USA\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1822,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 500])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n let path = d3.geoPath(d3.geoAlbers());\n\n svg\n .append(\"path\")\n .datum(usa)\n .attr(\"fill\", \"#9debb8\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"stroke-width\", 1)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1837,"value":"## 👉 Buffer","pinned":false,"hidden":false,"mode":"md"},{"id":1842,"value":"md`NB: Les unités supportées sont : *miles*, *kilometers*, et *degrees*.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1840,"value":"mybuffer = turf.rewind(\n turf.buffer(usa, 50, { units: \"kilometers\", endCapStyle: \"round\" }),\n { reverse: true }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1846,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 500])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n let path = d3.geoPath(d3.geoAlbers());\n\n svg\n .append(\"path\")\n .datum(mybuffer)\n .attr(\"fill\", \"#9debb8\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"d\", path);\n\n svg\n .append(\"path\")\n .datum(usa)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"stroke-width\", 1)\n .attr(\"stroke-dasharray\", 3)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1852,"value":"## 👉 Difference","pinned":false,"hidden":false,"mode":"md"},{"id":1855,"value":"myDiff = turf.rewind(turf.difference(mybuffer, usa), { reverse: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1857,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 500])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n let path = d3.geoPath(d3.geoAlbers());\n\n svg\n .append(\"path\")\n .datum(myDiff)\n .attr(\"fill\", \"#9debb8\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1859,"value":"## 👉 Intersection","pinned":false,"hidden":false,"mode":"md"},{"id":1862,"value":"NY = turf.point([-73.97104533120057, 40.78634539342028]) // lon, lat","pinned":true,"hidden":false,"mode":"ojs"},{"id":1864,"value":"NY650km = turf.rewind(\n turf.buffer(NY, 650, { units: \"kilometers\", endCapStyle: \"round\" }),\n { reverse: true }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1866,"value":"myIntersect = turf.rewind(turf.intersect(NY650km, myDiff), { reverse: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":4049,"value":"NY650km","pinned":true,"hidden":false,"mode":"ojs"},{"id":1868,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 500])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n let path = d3.geoPath(d3.geoAlbers());\n\n svg\n .append(\"path\")\n .datum(myDiff)\n .attr(\"fill\", \"#EEE\")\n .attr(\"stroke\", \"none\")\n .attr(\"d\", path);\n\n svg\n .append(\"path\")\n .datum(myIntersect)\n .attr(\"fill\", \"#dc7be3\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"d\", path);\n\n svg\n .append(\"path\")\n .datum(NY650km)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-dasharray\", 3)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1876,"value":"## 👉 Union","pinned":false,"hidden":false,"mode":"md"},{"id":1879,"value":"myUnion = turf.rewind(turf.union(NY650km, myDiff), { reverse: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1881,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, 500])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n let path = d3.geoPath(d3.geoAlbers());\n\n svg\n .append(\"path\")\n .datum(myUnion)\n .attr(\"fill\", \"#9debb8\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"stroke-width\", 1.4)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1883,"value":"## 👉 Calcul de distances","pinned":false,"hidden":false,"mode":"md"},{"id":1887,"value":"Paris = turf.point([2.335042434318193, 48.85859730057634])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1889,"value":"Shangai = turf.point([121.5685920321606, 31.557068992422167])","pinned":true,"hidden":false,"mode":"ojs"},{"id":1891,"value":"distance = Math.round(turf.distance(Paris, Shangai, { units: \"kilometers\" })) +\n \" km\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1893,"value":"greatCircle = turf.greatCircle(Paris, Shangai, {\n properties: { name: \"Paris to Shangai\" }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1895,"value":"{\n let width = 1000;\n let height = 400;\n let projection = d3\n .geoMercator()\n .scale(400)\n .translate([width / 2 - 400, height / 2 + 390]);\n let path = d3.geoPath(projection);\n\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n svg\n .append(\"path\")\n .datum(world)\n .attr(\"fill\", \"#9debb8\")\n .attr(\"stroke\", \"#498c60\")\n .attr(\"stroke-width\", 1)\n .attr(\"d\", path);\n\n svg\n .append(\"path\")\n .datum(greatCircle)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#3d3d3d\")\n .attr(\"stroke-width\", 2)\n .attr(\"stroke-dasharray\", 4)\n .attr(\"d\", path);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2434,"value":"slide`🌐 Delaunay, Voronoi & geoVoronoi`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2834,"value":"patterson = d3.geoPatterson().fitSize([width, height], world)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2810,"value":"cities = d3\n .csv(\n \"https://raw.githubusercontent.com/neocarto/resources/master/datasets/simplemaps_worldcities_basicv1.73/worldcities.csv\"\n )\n .then((r) =>\n r\n .map((d) => ({\n id: d.id,\n name: d.city,\n pop: Math.round(d.population / 1000),\n lat: +d.lat,\n lng: +d.lng,\n x: patterson([d.lng, d.lat])[0],\n y: patterson([d.lng, d.lat])[1]\n }))\n\n .sort((a, b) => d3.descending(a[\"pop\"], b[\"pop\"]))\n .filter((d) => d.pop >= 200)\n )","pinned":false,"hidden":false,"mode":"ojs"},{"id":2814,"value":"viewof n0 = Inputs.range([100, cities.length], {\n step: 1,\n value: 1000,\n label: \"Number of cities\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2812,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n svg\n .append(\"path\")\n .datum(world)\n .attr(\"fill\", \"#CCC\")\n .attr(\"stroke\", \"none\")\n .attr(\"d\", d3.geoPath(patterson));\n\n svg\n .selectAll(\"circle\")\n .data(cities.slice(0, n0))\n .enter()\n .append(\"circle\")\n .attr(\"r\", 1)\n .attr(\"cx\", (d) => d.x)\n .attr(\"cy\", (d) => d.y)\n .attr(\"fill\", \"#652e70\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2847,"value":"## 👉 Delaunay","pinned":false,"hidden":false,"mode":"md"},{"id":2851,"value":"delaunay = d3.Delaunay.from(\n cities.slice(0, n1),\n (d) => d.x,\n (d) => d.y\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2859,"value":"delaunay.points","pinned":true,"hidden":false,"mode":"ojs"},{"id":2825,"value":"viewof n1 = Inputs.range([100, cities.length], {\n step: 1,\n value: 1000,\n label: \"Number of cities\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":2864,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n svg\n .append(\"path\")\n .datum(world)\n .attr(\"fill\", \"#CCC\")\n .attr(\"stroke\", \"none\")\n .attr(\"d\", d3.geoPath(patterson));\n\n svg\n .append(\"path\")\n .attr(\"stroke\", \"#652e70\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke-width\", 0.5)\n .attr(\"d\", delaunay.render());\n\n svg\n .selectAll(\"circle\")\n .data(cities.slice(0, n1))\n .enter()\n .append(\"circle\")\n .attr(\"r\", 2)\n .attr(\"cx\", (d) => d.x)\n .attr(\"cy\", (d) => d.y)\n .attr(\"fill\", \"#652e70\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2875,"value":"## 👉 Voronoi","pinned":false,"hidden":false,"mode":"md"},{"id":2878,"value":"voronoi = d3.Delaunay.from(\n cities.slice(0, n2),\n (d) => d.x,\n (d) => d.y\n).voronoi([0, 0, width, height])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2881,"value":"viewof n2 = Inputs.range([100, cities.length], {\n step: 1,\n value: 1000,\n label: \"Number of cities\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2886,"value":"{\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [0, 0, width, height])\n .style(\"width\", \"100%\")\n .style(\"height\", \"auto\");\n\n svg\n .append(\"path\")\n .datum(world)\n .attr(\"fill\", \"#CCC\")\n .attr(\"stroke\", \"none\")\n .attr(\"d\", d3.geoPath(patterson));\n\n svg\n .append(\"path\")\n .attr(\"stroke\", \"#652e70\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke-width\", 0.75)\n .attr(\"d\", voronoi.render());\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2892,"value":"md`## 👉 d3-geo-voronoi`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2895,"value":"md`**d3-geo-voronoi** est une adaptation de d3-delaunay sur la sphère [@fil](https://observablehq.com/@fil).\nDocumentation [ici](https://github.com/Fil/d3-geo-voronoi)\n\n~~~js\nrequire(\"d3-geo-voronoi@1\")\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2900,"value":"coords = cities\n .map((d) => ({\n lat: d.lng,\n lng: d.lat\n }))\n .map(Object.values)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2903,"value":"geovoronoi = d3.geoVoronoi(coords.slice(0, 1000))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2909,"value":"polygons = {\n const polygons = geovoronoi.polygons(),\n { features } = polygons;\n return polygons;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2905,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2913,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":3819,"value":"slide`🌐 Observable plot & plot.carto`","pinned":true,"hidden":false,"mode":"ojs"},{"id":3823,"value":"athletes = FileAttachment(\"athletes.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":3825,"value":"dotplot = Plot.dot(athletes, { x: \"weight\", y: \"height\", stroke: \"sex\" }).plot()","pinned":true,"hidden":false,"mode":"ojs"},{"id":3827,"value":"dotplot.legend(\"color\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":3829,"value":"Plot.plot({\n grid: true,\n facet: {\n data: athletes,\n y: \"sex\"\n },\n marks: [\n Plot.rectY(\n athletes,\n Plot.binX({ y: \"count\" }, { x: \"weight\", fill: \"sex\" })\n ),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3831,"value":"Pout la cartographie, un module est en cours de développement. ","pinned":false,"hidden":false,"mode":"md"},{"id":3816,"value":"https://observablehq.com/@data-workflows/plot-carto-0-4","pinned":false,"hidden":false,"mode":"md"},{"id":1753,"value":"slide`Conclusion`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3860,"value":"{\n const button = html``;\n button.onclick = () => conclusion.parentElement.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":3857,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1806,"value":"Encore quelques exemples...","pinned":false,"hidden":false,"mode":"md"},{"id":1757,"value":"$36","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":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":208,"value":"$38","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":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":false,"hidden":false,"mode":"ojs"}],"files":"$W39","stdlib":"1","titling":"auto"}