2c:["$","title",null,{"children":"Observable pour les géographes | Nicolas Lambert | Observable"}] 31:Ta67,slides = { var dom = html`

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

Javascript en bref

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

Javascript IS NOT Java!

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

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

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

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

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

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

👎

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

Il a parfois mauvaise réputation chez les developpeurs

👍

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

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

Le langage est aujourd'hui strandardisé (ECMA)

👍

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

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

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

`; shadow.appendChild(reveal); var deck = new Reveal(reveal, { embedded: true }); deck.initialize(); return dom; }32: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(); }33: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(); }34: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(); }35: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(); }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":"f27e78d82ecea3233ddc14fc3814ae53119731f081db456ab6948d389032f0dd7e730d631be2a661e41fa7a0a7254c453b6d06927eaa77579518089aabae72fa","href":"https://static.observableusercontent.com/files/f27e78d82ecea3233ddc14fc3814ae53119731f081db456ab6948d389032f0dd7e730d631be2a661e41fa7a0a7254c453b6d06927eaa77579518089aabae72fa","name":"1_gCWUibmQ8rszKxI3G19KmA.jpeg","type":"image/jpeg","lastModified":1627406053759.754,"size":102662},{"id":"20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","href":"https://static.observableusercontent.com/files/20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","name":"d3jsgithub.png","type":"image/png","lastModified":1626680885750.255,"size":204966},{"id":"6f559142c9cb7c11af102efb099c4763ed647c6b4d17d4a4fca1ffdb7771c71e3de63df23b59480d72def8f98ea9604636774574b2f08c2907971319ce3783f2","href":"https://static.observableusercontent.com/files/6f559142c9cb7c11af102efb099c4763ed647c6b4d17d4a4fca1ffdb7771c71e3de63df23b59480d72def8f98ea9604636774574b2f08c2907971319ce3783f2","name":"gdp2018.csv","type":"text/csv","lastModified":1637055118017.031,"size":5300},{"id":"a28d62b3079fce11aa748427d38b8edba3b462885306e34340834a769358e6600a21764b3855b92dc87209aca805c6e5088afbb9ea866363922da6b9c51a7454","href":"https://static.observableusercontent.com/files/a28d62b3079fce11aa748427d38b8edba3b462885306e34340834a769358e6600a21764b3855b92dc87209aca805c6e5088afbb9ea866363922da6b9c51a7454","name":"countries.json","type":"application/json","lastModified":1627477996304.932,"size":278433},{"id":"cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","href":"https://static.observableusercontent.com/files/cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","name":"js.png","type":"image/png","lastModified":1627453812838.105,"size":1991},{"id":"9c2da79b856ae72514cabd91008026c1d456433a17541b4435db78f91b1734e40ba6b642cb21232ab6fa81724010ace33b32051dae64eaaa6c12cff09f8a8725","href":"https://static.observableusercontent.com/files/9c2da79b856ae72514cabd91008026c1d456433a17541b4435db78f91b1734e40ba6b642cb21232ab6fa81724010ace33b32051dae64eaaa6c12cff09f8a8725","name":"untitled.png","type":"image/png","lastModified":1626793957649.571,"size":43596},{"id":"6ef4ef4866b197854444de44e4992bb3db9cd304857ff49fb3726075f58691ab24115544b2d7331549ea65c1ddc0617f94487bf22bdaf04f97e3374b31cf3d4e","href":"https://static.observableusercontent.com/files/6ef4ef4866b197854444de44e4992bb3db9cd304857ff49fb3726075f58691ab24115544b2d7331549ea65c1ddc0617f94487bf22bdaf04f97e3374b31cf3d4e","name":"45b400b2de476e49141eb85e54fa8b1537f6cfbc93c5e7c095ea7eb7b340bcb0.jpg","type":"image/jpeg","lastModified":1637063646554.549,"size":29619},{"id":"26726e0e3120a4cf8bba85b6d5c4658d5d8de5c75e774616edd6abe6909e292772a86763ea33c7331563cc4fca63d4ca686cbafd930b70d72ce32a54e1f43196","href":"https://static.observableusercontent.com/files/26726e0e3120a4cf8bba85b6d5c4658d5d8de5c75e774616edd6abe6909e292772a86763ea33c7331563cc4fca63d4ca686cbafd930b70d72ce32a54e1f43196","name":"gdpppc.csv","type":"text/csv","lastModified":1637658933322.444,"size":4247},{"id":"928ade4f29340680eec5095d9addbd9a0eaa8eb41e647b197f54f5ccd6019c35201c429dbcbbabbe34a0e4e10ad93b5302983c5ed9a8ebf16f46f1284cb443e3","href":"https://static.observableusercontent.com/files/928ade4f29340680eec5095d9addbd9a0eaa8eb41e647b197f54f5ccd6019c35201c429dbcbbabbe34a0e4e10ad93b5302983c5ed9a8ebf16f46f1284cb443e3","name":"continants.csv","type":"text/csv","lastModified":1636987225397.369,"size":5383},{"id":"a01b2acbf32e1f54a30c8da4ca35fbf62b10406954f215c1e419e9b64d2f0778003fa2e9268ca7b837b3d6486755ae6bbed6a49f088cf58c5305c83570054cc7","href":"https://static.observableusercontent.com/files/a01b2acbf32e1f54a30c8da4ca35fbf62b10406954f215c1e419e9b64d2f0778003fa2e9268ca7b837b3d6486755ae6bbed6a49f088cf58c5305c83570054cc7","name":"bostock.png","type":"image/png","lastModified":1636975895227.735,"size":257620},{"id":"721bcf04f3c72fd27a9786968bf494d306a2827b7929883ece586893a6fe433e274230ea532641f355e70392e8cd8f9fe89eae0e9274492f5f9fcc38627b49cc","href":"https://static.observableusercontent.com/files/721bcf04f3c72fd27a9786968bf494d306a2827b7929883ece586893a6fe433e274230ea532641f355e70392e8cd8f9fe89eae0e9274492f5f9fcc38627b49cc","name":"timeline.png","type":"image/png","lastModified":1627472055608.474,"size":27297}] 2f:{"id":"d511c8d62e4b5b47","slug":"tuto","title":"Observable pour les géographes","thumbnail":"323ffac0c10cf1eac563fe67ba83c3bb0c599e6a1d7a1e9a284ae2dfbd9a5616","access_level":"public","create_time":"$D2021-04-02T08:19:10.428Z","update_time":"$D2024-02-14T13:07:14.254Z","view_time":null,"first_public_time":"$D2021-11-29T07:09:13.558Z","fork":false,"stars":34,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":3440,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"}],"comments":[{"id":"050aa90dd11e7fda","reply_to_id":null,"content":"Tu devrais changer la couleur de ton graphique, c'est moche !","create_time":"$D2021-11-15T12:17:53.754Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}},{"id":"b4878217edc4c5b7","reply_to_id":null,"content":"sss","create_time":"$D2021-11-15T12:18:51.638Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}},{"id":"6eba4db51a440b7c","reply_to_id":null,"content":"Mais c'est trop cool !!","create_time":"$D2021-11-15T12:21:00.451Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}},{"id":"e8cbb5d0ea4924d3","reply_to_id":null,"content":"ça continue à fonctionner mais on ne recommande plus vraiment ce pattern ; celui des d3 charts est plus clair : une fonction est définie dans un notebook — qu'on importe dans un autre et qu'on applique à nos données","create_time":"$D2021-11-29T07:29:15.914Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"dd0a458c60c4ae59","reply_to_id":null,"content":"On l'appelle plutôt \"Observable Plot\"","create_time":"$D2021-11-29T07:30:03.579Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"f0f5160c38c636b7","reply_to_id":null,"content":"Mike","create_time":"$D2021-11-29T07:30:17.484Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"8c3eef82e6737e09","reply_to_id":"dd0a458c60c4ae59","content":"Merci, c'est noté.","create_time":"$D2021-11-29T07:45:37.641Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}},{"id":"f073e4a3a10196fa","reply_to_id":"e8cbb5d0ea4924d3","content":"C'est noté. Mais je vais l'évoquer quand même.","create_time":"$D2021-11-29T07:48:07.950Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}},{"id":"9c406410f08701cc","reply_to_id":"e8cbb5d0ea4924d3","content":"Merci pour les commentaires. Tout ceci est évolutif. A+","create_time":"$D2021-11-29T07:56:22.670Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}},{"id":"d3717f71299b7852","reply_to_id":null,"content":"\"site\" au lieu de \"sit\" 🙂","create_time":"$D2021-12-07T07:59:35.617Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c1c217aebd614b45","login":"pac02","name":"PAC","avatar_url":"https://avatars-next.observableusercontent.com/2e849389f24e4a039178c801e4df9065e03c23e4077b0ff6bfc8e2763dd06bf9","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":17,"collection":{"id":"4f8e90870d4fae9b","slug":"tutos","title":"Courses & Training","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"title":"Observable pour les géographes","cells":[{"id":0,"value":"md`# Observable pour les géographes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2491,"value":"FileAttachment(\n \"45b400b2de476e49141eb85e54fa8b1537f6cfbc93c5e7c095ea7eb7b340bcb0.jpg\"\n).image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3372,"value":"**Ce notebook est le support d'une formation réalisée dans le cadre du consortium [Imageo](https://imageo.hypotheses.org/) le 29 novembre 2021. La vidéo de cette formation est disponible juste ici ⤵️**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3404,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3415,"value":"C'est parti ! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":959,"value":"Depuis plus d'un an, je réalise des cartes et des visualisations de données avec Observable. Dans ce carnet, j'essaie d'expliquer ce que j'ai compris et pourquoi je considère que cet environnement est idéal pour créer des cartes. Je vais probablement améliorer ce matériel de présentation au fil du temps. N'hésitez pas à commenter et à suggérer des ajouts/changements.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":212,"value":"slide`🤖 Javascript en bref`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":974,"value":"Commençons par une petite présentation introductive *(Thanks Reveal.js)*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":879,"value":"fullscreen = {\n const button = html``;\n button.onclick = () => slides.parentElement.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":965,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1022,"value":"## Ressources\n- https://towardsdatascience.com/javascript-for-data-analysis-2e8e7dbf63a7\n- https://javascript-en-foret.lepodcast.fr/\n- https://www.youtube.com/watch?v=PIU_2SBSZgw&list=PLjwdMgw5TTLVzD9Jq_WBd1crqDwXRn4cw","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":135,"value":"slide`📚 Observable n'est pas (que) Javascript`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"## 👉Qu'est ce qu'Observable?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":423,"value":"FileAttachment(\"timeline.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":456,"value":"## 👉 Les Notebooks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2470,"value":"Important : les notebooks peuvent être **privés** ou **publics**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":845,"value":"Voir: https://www.nature.com/articles/d41586-021-01174-w","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":478,"value":"## 👉 Les cellules","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":453,"value":"Un notebook est constitué d'un ensemble de cellules qui communiquent entre elles. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":511,"value":"** ➡️ Javascript**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3270,"value":"mavariable = 27","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":820,"value":"montableau = [\"a\", \"b\", \"c\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":518,"value":"{\n let a = 15;\n let b = 12;\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":858,"value":"montableau.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2520,"value":"toto1 = function (a, b) {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":829,"value":"toto2 = (a, b) => a + b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3311,"value":"toto2(2, 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":822,"value":"** ➡️ LaTex**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3285,"value":"\\textit{Hello World}","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined"},{"id":520,"value":"\\sqrt[4]{x^4} = |x|","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined"},{"id":3278,"value":"\\sum_{n=1}^{+\\infty} \\frac{1}{n^2} = \\frac{\\pi^2}{6}","pinned":true,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined"},{"id":481,"value":"** ➡️ Markdown**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":501,"value":"** ➡️ html**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":504,"value":"

Milk
Cheese\n
- Blue cheese
- Feta
\n

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

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":654,"value":"** ➡️ SVG**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":646,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":530,"value":"** ➡️ Et grace aux backticks, on peut combiner hyper facilement les types...**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1102,"value":"result = {\n let a = 10;\n let b = 13;\n return a * b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":554,"value":"html`Le résultat de mon calcul est ${result} !`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":558,"value":"** ➡️ L'ordre des cellules n'a pas d'importance 🤯**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":567,"value":"c = a * b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":563,"value":"a = 10","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":565,"value":"b = 5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"FileAttachment(\"untitled.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":576,"value":"## 👉 Inputs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":595,"value":"button = Inputs.button(\"Click me\", {})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":598,"value":"checkboxes = Inputs.checkbox([\"A\", \"B\"], { label: \"Select some\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":600,"value":"range = Inputs.range([0, 100], { label: \"Amount\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":602,"value":"textarea = Inputs.textarea({ placeholder: \"Type here\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":604,"value":"Documentation => https://observablehq.com/@observablehq/inputs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":589,"value":"## 👉 Et c'est réactif 🔥","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":619,"value":"viewof range2 = Inputs.range([0, 100], { label: \"Amount\", step: 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":622,"value":"The value of my slider is ${range2}","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":682,"value":"viewof w = Inputs.range([1, 1000], { label: \"Width\", value: 250, step: 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":735,"value":"viewof h = Inputs.range([1, 300], { label: \"Height\", value: 100, step: 1 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1208,"value":"viewof color = Inputs.color({ label: \"Color\", value: \"#6ddf95\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2457,"value":"viewof mytext = Inputs.text({\n value: \"C'est trop cool, hein ?\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":679,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":716,"value":"## 👉 Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":746,"value":"import { bars } from \"@thetylerwolf/day-5-our-first-bar-chart\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":748,"value":"bars","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1140,"value":"bars2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1175,"value":"## 👉 C'est collaboratif","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":770,"value":"## 👉 Fork","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1190,"value":"## 👉 Versionnement","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1193,"value":"Tout ce qu'on fait est tracé et sauvegardé automatiquement.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":722,"value":"## 👉 Sauvegarde et exports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1085,"value":"## 👉 Comment apprendre ?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1233,"value":"On a donc là un environnement collaboratif, qui permet d'apprendre comment tout cela fonctionne. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1082,"value":"FileAttachment(\"1_gCWUibmQ8rszKxI3G19KmA.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1243,"value":"slide`📊 Observable Plot (en bref)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1904,"value":"**Plots.js**, c'est la librairie qu'il vous faut si vous voulez faire des graphiques rapidement. C'est la nouvelle librairie développée par Mike Bostock et Philippe Rivière. Elle permet de faire des graphiques en quelques lignes de code de façon très intuitive. Elle est incontournable dans Observable. Mais je n'en parlerai pas ici.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1966,"value":"import { athletes } from \"@observablehq/plot\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2980,"value":"athletes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1913,"value":"## 👉 Plot.dot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1911,"value":"dotplot = Plot.dot(athletes, { x: \"weight\", y: \"height\", fill: \"sex\" }).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1919,"value":"## 👉 Plot.recY","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1917,"value":"Plot.rectY(\n athletes,\n Plot.binX({ y: \"count\" }, { x: \"weight\", fill: \"sex\" })\n).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1926,"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","author":"$undefined","summary":"$undefined"},{"id":141,"value":"slide`🗺️ D3.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1332,"value":"D3.js (pour **D**ata-**D**riven **D**ocuments) est une bibliothèque graphique JavaScript 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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":151,"value":"FileAttachment(\"d3jsgithub.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1342,"value":"## 👉 Comment ca marche","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1412,"value":"**➡️ Principe 1 : la manipulation du DOM.**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2579,"value":"Avant, on aurait écrit ceci : ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2582,"value":"\n \n \n \n","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2592,"value":"Avec le DOM et d3js, on écrit dorénavant ceci :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2611,"value":"**➡️ d3.select()**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1418,"value":"**➡️ Principe 2 : Dessiner à partir de données**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1358,"value":"myData = [10, 20, 1, 20, 28]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1366,"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\", (d) => d);\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2527,"value":"**➡️ Transitions**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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 monrectangle = svg\n .append(\"circle\")\n .attr(\"cx\", 50)\n .attr(\"cy\", 30)\n .attr(\"r\", 25)\n .attr(\"fill\", \"#e04a28\");\n\n monrectangle\n .transition()\n .duration(2000)\n .attr(\"cx\", 450)\n .transition()\n .delay(2000)\n .duration(3000)\n .attr(\"cx\", 30)\n .attr(\"r\", 10)\n .attr(\"fill\", \"blue\");\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2567,"value":"**➡️ Interactivité**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2669,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1347,"value":"## 👉 Comment appendre","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1345,"value":"- https://observablehq.com/@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","author":"$undefined","summary":"$undefined"},{"id":873,"value":"slide`🌐 Faire une carte avec d3js (via d3-geo)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1475,"value":"## 👉 Afficher un fond de carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1499,"value":"- Ajout d'un fichier geojson","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1479,"value":"world = FileAttachment(\"countries.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1482,"value":"projection = d3.geoBertin1953()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1495,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1497,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1522,"value":"- On peut définir aussi la sphère","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1521,"value":"sphere = ({ type: \"Sphere\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1517,"value":"- Affichage de la carte","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1572,"value":"## 👉 Carte qualitative","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1587,"value":"- Import de données attributaires","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1584,"value":"regions = FileAttachment(\"continants.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1590,"value":"Inputs.table(regions)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1595,"value":"- On crée une fonction pour associer une couleur à chaque continent","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3023,"value":"colors_typo = d3.schemeTableau10.slice(0, 5).concat(\"white\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3028,"value":"types = Array.from(new Set(regions.map((d) => d[\"Region Code\"])))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1631,"value":"getcolor = d3.scaleOrdinal().domain(types).range(colors_typo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1718,"value":"getcolor(\"Europe\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1698,"value":"cols = new Map(regions.map((d) => [d.ISO3, getcolor(d[\"Region Code\"])]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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 .selectAll(\"path\")\n .data(world.features)\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","author":"$undefined","summary":"$undefined"},{"id":3033,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3021,"value":"Swatches(d3.scaleOrdinal(types, colors_typo))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":3006,"value":"## 👉 Carte choroplèthe","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":3044,"value":"gdpppc = FileAttachment(\"gdpppc.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":3120,"value":"colbyid = new Map(gdpppc.map((d) => [d.id, quantile(d.gdppc2018)]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2092,"value":"## 👉 Cercles proportionnels","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2096,"value":"On importe des données de PUB par pays","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2230,"value":"gdp = FileAttachment(\"gdp2018.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2475,"value":"Inputs.table(gdp)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2242,"value":"On définit une fonction pour passer de la valeur au rayon.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2245,"value":"radius = d3.scaleSqrt([0, d3.max(gdp, (d) => d.pib2018)], [0, k])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2284,"value":"C'est fini, on peut faire la carte. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2480,"value":"viewof k = Inputs.range([0, 150], { label: \"k\", value: 75 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2288,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2317,"value":"## 👉 Quelques mots sur les projections","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2359,"value":"newproj = d3.geoPolyhedralWaterman()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2345,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2400,"value":"proj4 = require(\"proj4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2407,"value":"On importe un fond de carte des départements français","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":875,"value":"slide`🌐 Topojson`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2088,"value":"topojson = require(\"topojson-client@3\", \"topojson-server@3\", \"topojson-simplify@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2177,"value":"## 👉 geojson -> topojson","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2010,"value":"worldtopo = topojson.topology({ world: world })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2189,"value":"## 👉 topojson -> geojson","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2181,"value":"topojson.feature(worldtopo, \"world\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2105,"value":"## 👉 Extraire les frontières","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2806,"value":"worldtopo","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1984,"value":"borders = topojson.mesh(worldtopo, worldtopo.objects.world, (a, b) => a !== b)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2120,"value":"## 👉 Merge","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2124,"value":"merged = topojson.merge(worldtopo, worldtopo.objects.world.geometries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2132,"value":"## 👉 Contiguité","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2135,"value":"neighbors = topojson.neighbors(worldtopo.objects.world.geometries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2173,"value":"ids = world.features.map((d) => d.properties.ISO3)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2147,"value":"viewof mycountry = Inputs.select(ids, { label: \"Select one\", value: \"USA\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2157,"value":"neighborhood = world.features.filter((d) =>\n getcontig(mycountry).includes(d.properties.ISO3)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2198,"value":"## 👉 Simplifier les géométries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":3435,"value":"minArea","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2211,"value":"countries2 = topojson.feature(world_simplified, world_simplified.objects.world)\n .features","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2204,"value":"viewof minArea = Inputs.range([0.01, 0.1], { step: 0.001 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2110,"value":"Voir aussi :","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":355,"value":"slide`🌎 Turf.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1825,"value":"turf = require(\"@turf/turf@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1820,"value":"usa = world.features.find((d) => d.properties.ISO3 == \"USA\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1837,"value":"## 👉 Buffer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1842,"value":"md`NB: Les unités supportées sont : *miles*, *kilometers*, et *degrees*.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1852,"value":"## 👉 Difference","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1855,"value":"myDiff = turf.rewind(turf.difference(mybuffer, usa), { reverse: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1859,"value":"## 👉 Intersection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1862,"value":"NY = turf.point([-73.97104533120057, 40.78634539342028]) // lon, lat","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1866,"value":"myIntersect = turf.rewind(turf.intersect(NY650km, myDiff), { reverse: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1876,"value":"## 👉 Union","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1879,"value":"myUnion = turf.rewind(turf.union(NY650km, myDiff), { reverse: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":1883,"value":"## 👉 Calcul de distances","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1887,"value":"Paris = turf.point([2.335042434318193, 48.85859730057634])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1889,"value":"Shangai = turf.point([121.5685920321606, 31.557068992422167])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1891,"value":"distance = Math.round(turf.distance(Paris, Shangai, { units: \"kilometers\" })) +\n \" km\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1893,"value":"greatCircle = turf.greatCircle(Paris, Shangai, {\n properties: { name: \"Paris to Shangai\" }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2434,"value":"slide`🌐 Delaunay, Voronoi & geoVoronoi`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2834,"value":"patterson = d3.geoPatterson().fitSize([width, height], world)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2847,"value":"## 👉 Delaunay","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2859,"value":"delaunay.points","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2875,"value":"## 👉 Voronoi","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2892,"value":"md`## 👉 d3-geo-voronoi`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":2903,"value":"geovoronoi = d3.geoVoronoi(coords.slice(0, 1000))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2909,"value":"polygons = {\n const polygons = geovoronoi.polygons(),\n { features } = polygons;\n return polygons;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2905,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2913,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1753,"value":"slide`Conclusion`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1254,"value":"md`On peut faire beaucoup des choses avec D3 et Observable. Mais le cout d'entrée est quand même assez élevé pour celles et ceux qui n'ont pas l'habitude de la propgrammation, ou qui ont l'habitude de programmer en R (c'était mon cas). Il y a 3 aspects à appréhender en même temps : **javascript** (langage de base), **d3.js** (avec tout sa logique et sa complexité) et **Observable** (qui permet d'ecrire de rmd, javascript, html, svg, css, Latex dans un environnement full responsive en resolvant tout un tas de choses liées à l'aspect asychrone et non bloquant du javascript.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"md `**Points forts.** Des posssibilités graphiques géniales, un communauté hyper intéressante plutôt pas accadémique qui croise des pure développeurs, des graphistes et des data scientists. Un environnement de travail qui pousse au partage et aux interactions, à la transparence, à la clareté (literate programing). Avec ce genre d'environnement, on pousse au max les logiques d'open data avec la necessité de s'appuyer sur des données publiques et de tout publier de façon intellegible.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"md `** Points faibles** D3js repose sur une tête d'épingle : la tête de mike Bostock. Observable est une startup. Rachat par google dans 5 ans ?`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1799,"value":"A vous de voir, mais moi je suis convaincu...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1802,"value":"tweet(\"1377547689605365763\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1806,"value":"Encore quelques exemples...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1757,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"md `# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2911,"value":"import { zoom } from \"@d3/versor-zooming\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":206,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":208,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":210,"value":"hl = require(\"@observablehq/highlight.js@1.0.0/highlight.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"import {tweet} from \"@mbostock/tweet\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":832,"value":"Reveal = require(\"reveal.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":911,"value":"import { previews } from \"@d3/gallery\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1485,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\", \"d3-geo-voronoi@1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 30:"$2f:body" 2b:E{"digest":"NEXT_REDIRECT;replace;/@neocarto/tuto;307;"}