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

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

De quoi je vais vous parler ?

1

Javascript

Et pourquoi pas le JS pour les géographes ?

2

Observable

Un écosystème 'online' pour la visualisation de données

3

D3.js

Le couteau suisse de la dataviz

4

Plot

Une librairie pour faire des graphiques

5

Bertin

Une librairie pour faire des cartes

6

#JSspatial

Et quelques mots sur le #JSspatial

`; shadow.appendChild(reveal); var deck = new Reveal(reveal, { embedded: true }); deck.initialize(); return dom; }32:T909,sampledata = [ 508.81, 1895.77, 5215.28, 40897.33, 43103.34, 8441.92, 4267.45, null, 14450, 51812.15, 48327.63, 4214.31, 274.01, 44594.38, 1291.04, 830.93, 1968.79, 9975.78, 23443.43, 28607.9, 6031.56, 6411.23, 4435.62, 3143.05, 6796.84, 15191.16, 27466.34, 3122.38, 6710.99, 476.85, 43258.18, 87097.04, 13231.7, 10500.4, 2325.72, 1499.37, 556.81, 1972.55, 5332.77, 1402.6, 3064.27, 12076.81, 9099.67, 19716.01, 22932.22, 46208.43, 3425.5, 6526.79, 61063.32, 7268.2, 3310.39, 5600.39, 3547.87, 642.51, 27063.19, 23027.03, 936.34, 48773.28, 4881.53, null, 39030.36, 64225.26, 3585.42, 7005.88, 40284.64, 4278.86, null, 2328.53, 1194.04, 787.01, 727.52, 7143.24, 17676.19, 9680.18, 54470.96, 4603.34, 6955.94, 46323.86, 2405.73, 13828.47, 1176.76, 15899.15, 3869.59, 89112.67, 1900.71, 85267.76, 2282.55, 4157.48, 59270.18, 43610.52, 31676.2, 4664.53, null, 4282.77, 39538.88, 9055.75, 1838.21, 1173.61, 1512.73, 1670.82, 17435.93, 31489.12, 4287.2, 32373.25, 2630.2, 4891, 583.27, 3699.23, 9276.12, 180366.72, 3682.04, 861.01, 19997.59, 115873.6, 17619.95, 86117.66, 3057.95, 190512.74, 4551.13, 495.49, 7455.86, 8346.7, 4073.11, 5888, 858.92, 27884.64, 1400.22, 7686.09, 4007.31, 448.61, 1672.92, 8622.68, 625.29, 10401.79, 4211.05, null, 565.06, 2097.09, 1905.26, 52397.12, 67389.91, 1155.14, 10983.22, 41477.94, 15343.04, 1193.73, 12269.05, 6126.87, 3298.83, 14907.78, 2636.8, 15656.18, 32290.92, null, 22437.08, 4949.75, 3239.73, 50805.46, 12896.09, 10294.63, 797.86, null, 20110.32, 595.47, 1487.76, 59797.75, 2258.4, 484.52, 3798.64, 47731.21, 309.42, 7666.24, 1119.65, 2157.84, 6491.14, 19156.89, 25517.33, 52259.3, 3415.46, 11425.09, 2032.62, 614.47, 914.95, 7189.04, 859.14, 7612.04, 1381.18, 4903.01, 15384.04, 3319.82, 8538.17, 4143.11, null, 1044.79, 817.04, 3525.16, 15438.41, 63543.58, 1685.76, null, 7297.91, 16055.65, 2785.72, 2782.98, 4067.47, 824.12, 5090.72, 1050.92, 1128.21 ]33: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(); }34:T483,{ const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("width", "100%") .style("height", "auto"); //const projection = d3.geoAitoff(); //const projection = d3.geoBertin1953(); //const path = d3.geoPath(projection); // La sphère svg .append("g") .append("path") .datum(sphere) .attr("fill", " #a9daeb") .attr("d", path); // En SVG, l'attribut d définit un tracé à dessiner // Les graticules svg .append("g") .append("path") .datum(d3.geoGraticule10()) .attr("d", path) // En SVG, l'attribut d définit un tracé à dessiner .style("fill", "none") .style("stroke", "white") .style("stroke-width", 0.8) .style("stroke-opacity", 0.5) .style("stroke-dasharray", 2); // DATUM svg .append("g") .append("path") .datum(pays) // Datum lit le tableau de données d'un coup => affiche tout de la même façon. .attr("fill", "#508bab") .attr("fill-opacity", 0.9) .attr("stroke", "white") .attr("stroke-width", 0.2) .attr("d", path); // En SVG, l'attribut d définit un tracé à dessiner return svg.node(); }35:T48e,{ 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(pays.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) => rayon(d.pib2018)); return svg.node(); }36:T455,{ 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(pays.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(); }37:T86a,conclusion = { var dom = html`

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

Que retenir ?

Observable est un super outil pour bâtir des visualisations de données

Mais attention, il s'agit d'une boite privée. En version gratuite, on est obligés de travailler de façon publique.

Le javascript reste assez encore à ce jour faiblard pour l'analyse statistique des données. Mais des developpements sont en cours.

Par contre, avec d3.js, c'est le d’ores et déjà LE langage de référence pour faire de la visu.

On peut travailler hors Observable et articuler du code ojs avec du code R ou Python (Quarto).

La prise en main peut être compliquée.

Mais si on fait de la carto ou de la dataviz,
c'est the place to be.

Alors n'hésitez pas. Créez votre 1er notebook. Si vous avez besoin d'un coup de main, je me ferai un plaisir de vous aider

Cette présentation est disponible en ligne à l'adresse suivante :

https://observablehq.com/@neocartocnrs/observable-d3-et-cie-pour-les-m2-carthageo

Github
https://github.com/neocarto

Twitter
https://twitter.com/neocartocnrs

Mastodon
https://vis.social/@neocarto

Observable
https://observablehq.com/@neocartocnrs

`; shadow.appendChild(reveal); var deck = new Reveal(reveal, { embedded: true }); deck.initialize(); return dom; }38:[{"id":"a72f70d64a74a2b488fa7b5b1d5582c16040f1671ba99858a0b63a6c06f1559a998593cdc76b3809fc226f08188e7853b5c60fc326670d9754de0682660a4c7c","href":"https://static.observableusercontent.com/files/a72f70d64a74a2b488fa7b5b1d5582c16040f1671ba99858a0b63a6c06f1559a998593cdc76b3809fc226f08188e7853b5c60fc326670d9754de0682660a4c7c","name":"bostock.png","type":"image/png","lastModified":1666104738298,"size":47290},{"id":"87a799f2777b8b522799ffa58b2eaf80f578ce7aa5d70cf4cec6e4e4feaf865f9f21d977b16976fe644d1af85979d736bfb6d880e0a608d68e12b5bc2dd04cfd","href":"https://static.observableusercontent.com/files/87a799f2777b8b522799ffa58b2eaf80f578ce7aa5d70cf4cec6e4e4feaf865f9f21d977b16976fe644d1af85979d736bfb6d880e0a608d68e12b5bc2dd04cfd","name":"data.json","type":"application/json","lastModified":1666104738298,"size":22917},{"id":"7e2e16ead32205439c98b535131a957bc798748aa42a118c07f63da34de2d37b9709b035fc122d0c831657e85edeffcf2daa918f2008b6c2c450b970145203f8","href":"https://static.observableusercontent.com/files/7e2e16ead32205439c98b535131a957bc798748aa42a118c07f63da34de2d37b9709b035fc122d0c831657e85edeffcf2daa918f2008b6c2c450b970145203f8","name":"stats.csv","type":"text/csv","lastModified":1666104738298,"size":11012},{"id":"b50bd51d0ac819b973663107d716680465fdc800c09f6032d2684b10241c12d86a831c72c27e3d78bb519a5fce28d2bf0392a79124b0b88551269645e2edd559","href":"https://static.observableusercontent.com/files/b50bd51d0ac819b973663107d716680465fdc800c09f6032d2684b10241c12d86a831c72c27e3d78bb519a5fce28d2bf0392a79124b0b88551269645e2edd559","name":"64f414fef8a91248865f5759641b0cf537bc87c0aaf57dc368ffe673013eccaa.jpg","type":"image/jpeg","lastModified":1666104738298,"size":17512},{"id":"ce9e73fefac4a7de061c4e5860ab2808adf6a4868e9221ec5b1e0da0f41b8b7c92a894854398cbe499d9a8802e93b8bc2386cf3d19dc9056b034b910b93c1f27","href":"https://static.observableusercontent.com/files/ce9e73fefac4a7de061c4e5860ab2808adf6a4868e9221ec5b1e0da0f41b8b7c92a894854398cbe499d9a8802e93b8bc2386cf3d19dc9056b034b910b93c1f27","name":"plot.png","type":"image/png","lastModified":1666104738298,"size":141321},{"id":"cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","href":"https://static.observableusercontent.com/files/cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","name":"js.png","type":"image/png","lastModified":1666104738298,"size":1991},{"id":"52469a275fa922ce4f61c6b5e449b540e6f61631f92f519f9890f1c4b14edd4e799716120c360bd3a5e88d815ff51d66c2884efbf93445fcdf2d601dd32c550b","href":"https://static.observableusercontent.com/files/52469a275fa922ce4f61c6b5e449b540e6f61631f92f519f9890f1c4b14edd4e799716120c360bd3a5e88d815ff51d66c2884efbf93445fcdf2d601dd32c550b","name":"gdppc.json","type":"application/json","lastModified":1666104738298,"size":1672},{"id":"0d6109a7cfe0ab05a2eb8f5fd316106606905b4af058b761c10392c62b704cbe20054f6b51e05f5ad41d4a99c65f4d8a4e255019185973158be297a4ad1724c2","href":"https://static.observableusercontent.com/files/0d6109a7cfe0ab05a2eb8f5fd316106606905b4af058b761c10392c62b704cbe20054f6b51e05f5ad41d4a99c65f4d8a4e255019185973158be297a4ad1724c2","name":"jsspatial.jpg","type":"image/jpeg","lastModified":1666104738298,"size":10704},{"id":"0b5d051c6ea6088de4b34a16e75a307f66fd346e49e52afa9f0d72384f5f682cbaf502f14b04a28ca11c42329c55939e0e6c2fada43fab8c48e4234deb76ba1a","href":"https://static.observableusercontent.com/files/0b5d051c6ea6088de4b34a16e75a307f66fd346e49e52afa9f0d72384f5f682cbaf502f14b04a28ca11c42329c55939e0e6c2fada43fab8c48e4234deb76ba1a","name":"alphabetisation.csv","type":"text/csv","lastModified":1666104738298,"size":47977},{"id":"551708660640602b4a4525de0c1badf892984d42dc619791442454645b140facc347346002e732fff0ed2d3bc90b82469a390e967b24a1ce8784c90fdd534384","href":"https://static.observableusercontent.com/files/551708660640602b4a4525de0c1badf892984d42dc619791442454645b140facc347346002e732fff0ed2d3bc90b82469a390e967b24a1ce8784c90fdd534384","name":"electricite.csv","type":"text/csv","lastModified":1666104738298,"size":73020},{"id":"22aa1ade50574e944582e0ad4b5304ed1823653061eccbfec9b72aee597eb124b7ceb12f371f346f23a9302fbc0c8e44892b000de9385f99dbd313c3c5772587","href":"https://static.observableusercontent.com/files/22aa1ade50574e944582e0ad4b5304ed1823653061eccbfec9b72aee597eb124b7ceb12f371f346f23a9302fbc0c8e44892b000de9385f99dbd313c3c5772587","name":"co2.csv","type":"text/csv","lastModified":1666104738298,"size":76891},{"id":"081ea7b32adbfe1104e92cb590b394d1aaf29fa55fbcfc36989540aae56838691f25773fdb131cc67f319659fa8d051ef30523bfd84ac7162bc5e93b60643119","href":"https://static.observableusercontent.com/files/081ea7b32adbfe1104e92cb590b394d1aaf29fa55fbcfc36989540aae56838691f25773fdb131cc67f319659fa8d051ef30523bfd84ac7162bc5e93b60643119","name":"esperance.csv","type":"text/csv","lastModified":1666104738298,"size":128021},{"id":"20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","href":"https://static.observableusercontent.com/files/20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","name":"d3jsgithub.png","type":"image/png","lastModified":1666104738298,"size":204966},{"id":"b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","href":"https://static.observableusercontent.com/files/b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","name":"maddison.csv","type":"text/csv","lastModified":1666104738298,"size":562020},{"id":"981d2b20de8b9bb14b25273f0e85648275b71ae600095eb5ea37ceceed28ca45977ee665f32cf6b6758cbf39bc3ae1a6e1169429aab55501c056dc3ed2c4c52d","href":"https://static.observableusercontent.com/files/981d2b20de8b9bb14b25273f0e85648275b71ae600095eb5ea37ceceed28ca45977ee665f32cf6b6758cbf39bc3ae1a6e1169429aab55501c056dc3ed2c4c52d","name":"levels.svg","type":"image/svg+xml","lastModified":1666104738298,"size":5910},{"id":"546e32d05ba6914c8329598c8246c4e896d4a933c1c98f4ee1836bd9ec193a80af5f0bb63f69f496c261c0a5f4b5a7fe9477a5bdfa71c6bb560cf48032c34525","href":"https://static.observableusercontent.com/files/546e32d05ba6914c8329598c8246c4e896d4a933c1c98f4ee1836bd9ec193a80af5f0bb63f69f496c261c0a5f4b5a7fe9477a5bdfa71c6bb560cf48032c34525","name":"quarto.png","type":"image/png","lastModified":1666104738298,"size":49661},{"id":"959e84ccefe740ba5cc6b82834623e35305bb2406d008e13f22592d61ada8eb71d8655afe71373807d743c4409f05baa9eeeff253360afe9e99dc5abc555658a","href":"https://static.observableusercontent.com/files/959e84ccefe740ba5cc6b82834623e35305bb2406d008e13f22592d61ada8eb71d8655afe71373807d743c4409f05baa9eeeff253360afe9e99dc5abc555658a","name":"geom@3.json","type":"application/json","lastModified":1666104738298,"size":372762},{"id":"a06713be16e4e8f8e08dbfb8239c448bdfd55d73ae86cb4f27e25f37e2f8bbb9c0908480832e859dd170c85258dc8b40330e4dbdd1ce747155273df40a75dd36","href":"https://static.observableusercontent.com/files/a06713be16e4e8f8e08dbfb8239c448bdfd55d73ae86cb4f27e25f37e2f8bbb9c0908480832e859dd170c85258dc8b40330e4dbdd1ce747155273df40a75dd36","name":"npm.png","type":"image/png","lastModified":1666104738298,"size":2875},{"id":"fce0903f22adc03adf9851eff781e1b92dda65fdded02a21f98a244882b753229544e847521dd01b9e25dda5fc092b9c345d5f720b0efe385a434c65ccec1d73","href":"https://static.observableusercontent.com/files/fce0903f22adc03adf9851eff781e1b92dda65fdded02a21f98a244882b753229544e847521dd01b9e25dda5fc092b9c345d5f720b0efe385a434c65ccec1d73","name":"bertin.png","type":"image/png","lastModified":1666104738298,"size":76710},{"id":"df7aa7d8f5aa11db0e32085dd506f98c096fc4471a85f7f376fd56484f1da5f5085272dd408576ded06460f11d6fa2bc585158e3426998ccf0422d0527e5e90b","href":"https://static.observableusercontent.com/files/df7aa7d8f5aa11db0e32085dd506f98c096fc4471a85f7f376fd56484f1da5f5085272dd408576ded06460f11d6fa2bc585158e3426998ccf0422d0527e5e90b","name":"obsplot.jpeg","type":"image/jpeg","lastModified":1666104738298,"size":86857},{"id":"dee3b74eb62cd95f9b81924e8883f444742ee23ccf8563f7175f97a045443d1cd1ffe8fd57ccdd6324179c4d89aee72d7b66c8825b4c0e45016a32e7f8c2a8b2","href":"https://static.observableusercontent.com/files/dee3b74eb62cd95f9b81924e8883f444742ee23ccf8563f7175f97a045443d1cd1ffe8fd57ccdd6324179c4d89aee72d7b66c8825b4c0e45016a32e7f8c2a8b2","name":"obs.png","type":"image/png","lastModified":1666104738298,"size":22025},{"id":"e9b10f313e8845575b47fc3025a2490c410e474a3f0b6f4870fdbc050e3abceea808ad4b2172608736f7949be2358e49f4d7283f7d4e30fd6c572aad924b9d1e","href":"https://static.observableusercontent.com/files/e9b10f313e8845575b47fc3025a2490c410e474a3f0b6f4870fdbc050e3abceea808ad4b2172608736f7949be2358e49f4d7283f7d4e30fd6c572aad924b9d1e","name":"d3@1.png","type":"image/png","lastModified":1666104738298,"size":15791},{"id":"d009b9e6d7439ddfa2ac6a8c2ada08c2c602284999242c264476538901ba5705a111096d08df0a8ccaa629b8426d8d2abe08fe0ec89977f3088bf7b415b932d9","href":"https://static.observableusercontent.com/files/d009b9e6d7439ddfa2ac6a8c2ada08c2c602284999242c264476538901ba5705a111096d08df0a8ccaa629b8426d8d2abe08fe0ec89977f3088bf7b415b932d9","name":"teamps.png","type":"image/png","lastModified":1666104738298,"size":14498},{"id":"0742304aea0984b8a35e58fb93d9f6a7431aef214df4fd294e4fda002bee11cf72cc18fca396236c921dfc077a7c36bdf3aa744c1eb6b324322148ed31670b28","href":"https://static.observableusercontent.com/files/0742304aea0984b8a35e58fb93d9f6a7431aef214df4fd294e4fda002bee11cf72cc18fca396236c921dfc077a7c36bdf3aa744c1eb6b324322148ed31670b28","name":"nature.png","type":"image/png","lastModified":1666104738298,"size":71369},{"id":"2bef6fc93b87d1c1a7c7ac24f44b09632274bd72be8670e2e84a31afc00431c24bffeb5f87935011005330a0807406682b259b5c5a2a52a73db29b5a6295b50d","href":"https://static.observableusercontent.com/files/2bef6fc93b87d1c1a7c7ac24f44b09632274bd72be8670e2e84a31afc00431c24bffeb5f87935011005330a0807406682b259b5c5a2a52a73db29b5a6295b50d","name":"carthageo20222023.png","type":"image/png","lastModified":1666104873468.38,"size":250275},{"id":"cbc8d03ae3881eeb767daaa8ecb96ef88a08373484c31ff173344f78f9e021e4116facaebe20ac4cdc976cde05b2c0dc2e5e8d11750b0d7e7d069df697660453","href":"https://static.observableusercontent.com/files/cbc8d03ae3881eeb767daaa8ecb96ef88a08373484c31ff173344f78f9e021e4116facaebe20ac4cdc976cde05b2c0dc2e5e8d11750b0d7e7d069df697660453","name":"gdpppc.csv","type":"text/csv","lastModified":1666106927174.557,"size":4246},{"id":"05e8080f1738f8e4364cc440587e2c13d8c87418148bbb47ceba1549799e04788a7053def15e7266cc782f11e13e13cbd7c15186c2132d9b6426c027e428de27","href":"https://static.observableusercontent.com/files/05e8080f1738f8e4364cc440587e2c13d8c87418148bbb47ceba1549799e04788a7053def15e7266cc782f11e13e13cbd7c15186c2132d9b6426c027e428de27","name":"countries.json","type":"application/json","lastModified":1666106491610.381,"size":288936},{"id":"3e7da2b249bf1a2a1e3301ea9bbe34eede6df435e7a37286d95ffc2b2a38d631e55dc58771c3d23704b48fdfba75a20ffa9072f719a54dd2c3ea62803c26aa59","href":"https://static.observableusercontent.com/files/3e7da2b249bf1a2a1e3301ea9bbe34eede6df435e7a37286d95ffc2b2a38d631e55dc58771c3d23704b48fdfba75a20ffa9072f719a54dd2c3ea62803c26aa59","name":"gdp2018.csv","type":"text/csv","lastModified":1666107011467.607,"size":5299},{"id":"f533578b80e11f1c5c55d2069c563e62f9d1c98b0a0ceb66adb79cb3df3583c109d6a41c26da6a4cb47f452dcee97db639d29b6f3b196982a7bf7a7bfd218003","href":"https://static.observableusercontent.com/files/f533578b80e11f1c5c55d2069c563e62f9d1c98b0a0ceb66adb79cb3df3583c109d6a41c26da6a4cb47f452dcee97db639d29b6f3b196982a7bf7a7bfd218003","name":"regions.csv","type":"text/csv","lastModified":1666106776856.016,"size":5382},{"id":"949b606c6e3ca2c3452b18e4234d09a266af97083248e31d946b3457c2889aa2910987ede323284b1b176a35a61735fb5cbb59042faa8c8569bb922b17ce8c56","href":"https://static.observableusercontent.com/files/949b606c6e3ca2c3452b18e4234d09a266af97083248e31d946b3457c2889aa2910987ede323284b1b176a35a61735fb5cbb59042faa8c8569bb922b17ce8c56","name":"bebeproj.jpeg","type":"image/jpeg","lastModified":1666107365836.856,"size":610821},{"id":"721bcf04f3c72fd27a9786968bf494d306a2827b7929883ece586893a6fe433e274230ea532641f355e70392e8cd8f9fe89eae0e9274492f5f9fcc38627b49cc","href":"https://static.observableusercontent.com/files/721bcf04f3c72fd27a9786968bf494d306a2827b7929883ece586893a6fe433e274230ea532641f355e70392e8cd8f9fe89eae0e9274492f5f9fcc38627b49cc","name":"chrono.png","type":"image/png","lastModified":1666105334126.291,"size":27297},{"id":"9c2da79b856ae72514cabd91008026c1d456433a17541b4435db78f91b1734e40ba6b642cb21232ab6fa81724010ace33b32051dae64eaaa6c12cff09f8a8725","href":"https://static.observableusercontent.com/files/9c2da79b856ae72514cabd91008026c1d456433a17541b4435db78f91b1734e40ba6b642cb21232ab6fa81724010ace33b32051dae64eaaa6c12cff09f8a8725","name":"tree.png","type":"image/png","lastModified":1666105591034.938,"size":43596},{"id":"f27e78d82ecea3233ddc14fc3814ae53119731f081db456ab6948d389032f0dd7e730d631be2a661e41fa7a0a7254c453b6d06927eaa77579518089aabae72fa","href":"https://static.observableusercontent.com/files/f27e78d82ecea3233ddc14fc3814ae53119731f081db456ab6948d389032f0dd7e730d631be2a661e41fa7a0a7254c453b6d06927eaa77579518089aabae72fa","name":"cat.jpeg","type":"image/jpeg","lastModified":1666105754194.627,"size":102662},{"id":"1ed9b03b746abf7a9386d29470bf4a638463c5fc9131b0794a5ef8c4a2c20937ee43f7df1d5b4fc9601fad9c3f6914b8224d60ebe17b22525800cd2a33675e16","href":"https://static.observableusercontent.com/files/1ed9b03b746abf7a9386d29470bf4a638463c5fc9131b0794a5ef8c4a2c20937ee43f7df1d5b4fc9601fad9c3f6914b8224d60ebe17b22525800cd2a33675e16","name":"bertin_code.svg","type":"image/svg+xml","lastModified":1669047118811.627,"size":20082},{"id":"5a302a536301579a2b1d95c0bc0e3309d9528eee1e1a3fd781acafa1717f6b04fd9791450ae3144954cc95e8d83ede1c496f0c337372daa19d66989eb32964e5","href":"https://static.observableusercontent.com/files/5a302a536301579a2b1d95c0bc0e3309d9528eee1e1a3fd781acafa1717f6b04fd9791450ae3144954cc95e8d83ede1c496f0c337372daa19d66989eb32964e5","name":"tarifs.png","type":"image/png","lastModified":1667551788605.024,"size":132710},{"id":"cabf69db7ec8301417f9791c3c3b13d384a73b55d6b48484671221411a6a3baf78d4f12bb53d6ad6d4e42051a078a3d514b3669f7093aa57ccce5535b6acdf08","href":"https://static.observableusercontent.com/files/cabf69db7ec8301417f9791c3c3b13d384a73b55d6b48484671221411a6a3baf78d4f12bb53d6ad6d4e42051a078a3d514b3669f7093aa57ccce5535b6acdf08","name":"bouquins.png","type":"image/png","lastModified":1666105238324.701,"size":1597155}] 2f:{"title":"Observable, d3js, bertin et cie pour les M2 Carthagéo","cells":[{"id":0,"value":"# Observable, `d3js`, `bertin` et *cie* pour les M2 Carthagéo","pinned":false,"hidden":false,"mode":"md"},{"id":114,"value":"*Ce document est le support d'un cours réalisé le le 22 novembre 2022 auprès des étudiants du master 2 Carthagéo. N'hésitez pas à la partager, la modifier et la réutiliser.*","pinned":false,"hidden":false,"mode":"md"},{"id":1990,"value":"

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

LECTURES PRÉLIMINAIRES

","pinned":false,"hidden":false,"mode":"md"},{"id":1996,"value":"- Javascript for data Analysis, par Mike Bostock [[Voir](https://towardsdatascience.com/javascript-for-data-analysis-2e8e7dbf63a7)]\n- Reactive, reproducible, collaborative: computational notebooks evolve, par Jeffrey M. Perkel. [[voir](https://www.nature.com/articles/d41586-021-01174-w)]\n- The Observable zealot, par Philippe Rivère. [[voir](https://observablehq.com/@fil/the-observable-zealot)]","pinned":false,"hidden":false,"mode":"md"},{"id":1449,"value":"

SOMMAIRE

","pinned":false,"hidden":false,"mode":"html"},{"id":1451,"value":"Dans ce notebook en français, vous trouverez une courte présentation du langage du __javascript__ (1), une présentation de l'écosystème __Observable__ (2), une introduction à __d3.js__ (3) et à la librairie __Plot__ (4), un focus sur la librairie __bertin__ (5) pour la représentation cartographique et quelques mots sur le __#JSspatial__ (6). ","pinned":false,"hidden":false,"mode":"md"},{"id":1554,"value":"{\n const button = html``;\n button.onclick = () => intro.parentElement.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1548,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"

Et pourquoi pas le javascript ?

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

HISTORIQUE

","pinned":false,"hidden":false,"mode":"html"},{"id":1388,"value":"- Le langage Javascript a été créé en dix jours en mai 1995 pour la Netscape Communications Corporation par Brendan Eich. Au départ, l'idée était de construire un petit langage pour faire des interactions sur les pages web.\n- Attention, __Javascript n'est pas JAVA__ ! ","pinned":false,"hidden":false,"mode":"md"},{"id":1392,"value":"

CARACTERISTIQUES DU LANGAGE

","pinned":false,"hidden":false,"mode":"html"},{"id":1390,"value":"- C'est un langage qui s'exécute du côté client (Front-End) mais aussi côté serveur (back-End) avec node.js.\n- C'est un langage multi-paradigme mais toujours très fonctionnel (langage basé sur les fonctions).\n- C'est aussi un langage événementiel (interactivité)\n- Le langage Javascript est normalisé depuis 1997 par l'organisation ECMA International.\n- Depuis 2015 (ES6 ou ES2015), le langage est mature. Il est implémenté de manière harmonisée dans tous les navigateurs.","pinned":false,"hidden":false,"mode":"md"},{"id":1394,"value":"

POINTS FAIBLES 👎

","pinned":false,"hidden":false,"mode":"html"},{"id":1409,"value":"- Il a parfois mauvaise réputation chez les developpeurs (faiblement typé, incohérences...)\n- JavaScript n'a pas été conçu comme un langage pour l'analyse de données\n","pinned":false,"hidden":false,"mode":"md"},{"id":1399,"value":"

POINTS FORTS 👍

","pinned":false,"hidden":false,"mode":"html"},{"id":1402,"value":"- JavaScript est le langage du web. Il tourne partout (compilation *just in time*)\n- L'implémentation de Javascript dans les navigateurs est de plus en plus rapide\n- Le langage est aujourd'hui standardisé ([ECMA](https://www.ecma-international.org/))\n- Grande communauté. Beaucoup de ressources et tutos\n- Beaucoup de choses déjà développées : Plus de 2 millions de packages sur [npm](https://www.npmjs.com/)","pinned":false,"hidden":false,"mode":"md"},{"id":1405,"value":"

JAVASCRIPT POUR LA SCIENCE DES DONNÉES ?

","pinned":false,"hidden":false,"mode":"md"},{"id":1424,"value":"De nombreux langages ont le vent en poupe pour faire de l'analyse de données. On parle beaucoup de Python et de R. Mais certains pensent que le bon candidat, c'est le javascript. C'est le cas de __Mike Bostock__. Il avance les arguments suivants : \n- C'est le langage du web.\n- Il tourne partout. Rien à installer.\n- De nombreuses librairies permettent déjà de manipuler et représenter les données.\n- Certes, le javascript n'a peut-être pas été conçu comme un langage d'analyse de données, mais le langage peut être étendu pour mieux le prendre en charge.\n- Avec [WebGPU](https://en.wikipedia.org/wiki/WebGPU), [WebAssembly](https://fr.wikipedia.org/wiki/WebAssembly) et d'autres normes en cours de développement, l'avenir de JavaScript est prometteur.\n\nLire [Javascript for data Analysis](https://towardsdatascience.com/javascript-for-data-analysis-2e8e7dbf63a7).","pinned":false,"hidden":false,"mode":"md"},{"id":1429,"value":"

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

COMMENT APPRENDRE LE JAVASCRIPT ?

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

","pinned":false,"hidden":false,"mode":"html"},{"id":2006,"value":"- https://developer.mozilla.org/en-US/docs/Web/JavaScript\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":107,"value":"

Observable, kezako ?

","pinned":false,"hidden":false,"mode":"html"},{"id":175,"value":"Observable n'est **pas que** du javascript !\n\nC'est est une startup fondée par [Mike Bostock](https://twitter.com/mbostock) et [Melody Meckfessel](https://twitter.com/mmeckf), qui propose une plateforme 100% en ligne pour concevoir, partager et diffuser des visualisations de données. Objectif : faire collaborer une communauté autour de la visualisation de données.","pinned":false,"hidden":false,"mode":"md"},{"id":2019,"value":"chrono = FileAttachment(\"chrono.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2022,"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":1442,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1439,"value":"[Reactive, reproducible, collaborative: computational notebooks evolve, par Jeffrey M. Perkel](https://www.nature.com/articles/d41586-021-01174-w)","pinned":false,"hidden":false,"mode":"md"},{"id":179,"value":"

LES NOTEBOOKS

","pinned":false,"hidden":false,"mode":"md"},{"id":228,"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":244,"value":"

LES CELLULES

","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"Un notebook est constitué d'un ensemble de cellules qui communiquent entre elles.\n\nL'ordre des cellules n'a pas d'importance. 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.\n\n ","pinned":false,"hidden":false,"mode":"md"},{"id":2025,"value":"

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

JAVASCRIPT

","pinned":false,"hidden":false,"mode":"md"},{"id":2397,"value":"toto = 32","pinned":false,"hidden":false,"mode":"ojs"},{"id":253,"value":"a = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"b = 10","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"c = a + b","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"x = {\n let val1 = 8;\n let val2 = 7;\n return val1 * val2;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":269,"value":"function sum(a, b) {\n return a + b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"sum(10, 30)","pinned":true,"hidden":false,"mode":"ojs"},{"id":598,"value":"multi = (a, b) => a * b","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"multi(3, 8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"

MARKDOWN

","pinned":false,"hidden":false,"mode":"md"},{"id":301,"value":"## Titre\n**Ceci** est un text en *Markdown* avec un [lien](https://observablehq.com/).","pinned":false,"hidden":false,"mode":"md"},{"id":287,"value":"

HTML

","pinned":false,"hidden":false,"mode":"html"},{"id":298,"value":"\n Voici un bout de texte en HTML.
\n On peut le styler autant qu'on veut\n","pinned":false,"hidden":false,"mode":"html"},{"id":293,"value":"

FORMULES

","pinned":false,"hidden":false,"mode":"html"},{"id":295,"value":"c = \\pm\\sqrt{a^2 + b^2}","pinned":false,"hidden":false,"mode":"tex"},{"id":1632,"value":"tex`_{n+1} = 2^{n+1}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"

CANVAS

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

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

SVG

","pinned":false,"hidden":false,"mode":"html"},{"id":312,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":273,"value":"

LES INPUTS

\n","pinned":false,"hidden":false,"mode":"md"},{"id":328,"value":"viewof checkboxes = Inputs.checkbox([\"A\", \"B\"], {\n label: \"Select some\",\n value: \"A\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":330,"value":"viewof radios = Inputs.radio([\"A\", \"B\"], {label: \"Select one\", value: \"A\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"viewof form = Inputs.form({\n option1: Inputs.checkbox([\"A\", \"B\"], {label: \"Select some\"}),\n option2: Inputs.range([0, 100], {label: \"Amount\", step: 1}),\n option3: Inputs.radio([\"A\", \"B\"], {label: \"Select one\"}),\n option4: Inputs.select([\"A\", \"B\"], {label: \"Select one\"})\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":334,"value":"

TOUT EST RÉACTIF 🔥

","pinned":false,"hidden":false,"mode":"html"},{"id":337,"value":"viewof slider1 = Inputs.range([0, 100], {\n label: \"Choisissez une valeur\",\n step: 1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1015,"value":"slider1","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"La valeur choisie est **${slider1}**. Trop cool, hein ?","pinned":true,"hidden":false,"mode":"md"},{"id":349,"value":"viewof rectwidth = Inputs.range([10, 1000], {\n label: \"Largeur\",\n step: 1,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"viewof rectheight = Inputs.range([50, 150], {\n label: \"Hauteur\",\n step: 1,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":356,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":372,"value":"viewof color = Inputs.color({ label: \"Couleur\", value: \"#4ab58c\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"viewof radius = Inputs.range([1, 50], {\n label: \"Rayon\",\n step: 1,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"viewof position = Inputs.range([50, 950], {\n label: \"Position\",\n step: 1,\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":506,"value":"

VERSIONNEMENT

","pinned":false,"hidden":false,"mode":"html"},{"id":518,"value":"Tout ce qui est fait est fait dans le navigateur. Donc tout est enregistré automatiquement et versionné comme sur Github. On peut toujours revenir à une version antérieure du document. ","pinned":false,"hidden":false,"mode":"md"},{"id":776,"value":"

FORKS

","pinned":false,"hidden":false,"mode":"html"},{"id":807,"value":"On peut aussi copier l'ensemble d'un notebook, le modifier, et éventuellement \"merger\" ses modifications avec le carnet initial.","pinned":false,"hidden":false,"mode":"md"},{"id":516,"value":"

COLLABORER

","pinned":false,"hidden":false,"mode":"html"},{"id":523,"value":"On peut ajouter des commentaires","pinned":false,"hidden":false,"mode":"md"},{"id":1501,"value":"

TEAMS

","pinned":false,"hidden":false,"mode":"html"},{"id":525,"value":"On peut travailler à autant qu'on veut sur un notebook de façon publique ([free teams](https://observablehq.com/@observablehq/introducing-free-teams)).","pinned":false,"hidden":false,"mode":"md"},{"id":1507,"value":"

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

IMPORTS

","pinned":false,"hidden":false,"mode":"html"},{"id":786,"value":"Tous les notebooks peuvent communiquer entre eux.","pinned":false,"hidden":false,"mode":"md"},{"id":789,"value":"import { sketch } from \"@neocartocnrs/cartographic-doodles\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":796,"value":"viewof k = Inputs.range([0.01, 0.1], {\n label: \"simplification\",\n step: 0.01,\n value: 0.02\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"sketch(world, { fill: \"none\", k: k })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1023,"value":"

REQUIRE

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

","pinned":false,"hidden":false,"mode":"html"},{"id":1779,"value":"Il existe plus de 2 millions de packages sur [`npm`](). Ici, on charge un petit package qui permet de faires des discretisations.","pinned":false,"hidden":false,"mode":"md"},{"id":1763,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1760,"value":"discr = require(\"statsbreaks@0.3.1\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1783,"value":"discr.shape(sampledata)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1791,"value":"viewof nbreaks = Inputs.range([3, 10], {\n label: \"Nombre de classes\",\n step: 1,\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1773,"value":"discr.breaks({\n values: sampledata,\n method: \"jenks\",\n nb: nbreaks,\n precision: 0\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"

IMPORTER DES DONNÉES TABULAIRES

","pinned":false,"hidden":false,"mode":"html"},{"id":470,"value":"On importe les données comme des pièces jointes","pinned":false,"hidden":false,"mode":"md"},{"id":465,"value":"maddison = FileAttachment(\"maddison.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"Inputs.table(maddison)","pinned":true,"hidden":false,"mode":"ojs"},{"id":454,"value":"On peut aller chercher des données en ligne directement via leur url.","pinned":false,"hidden":false,"mode":"md"},{"id":456,"value":"cities = d3\n .csv(\n \"https://raw.githubusercontent.com/neocarto/resources/master/datasets/simplemaps_worldcities_basicv1.73/worldcities.csv\",\n d3.autoType\n )\n .then((r) => r.filter((d) => +d.population > 1000000))","pinned":true,"hidden":false,"mode":"ojs"},{"id":497,"value":"Inputs.table(cities)","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"On peut aussi aller les chercher sur notre ordinateur en local. ","pinned":false,"hidden":false,"mode":"md"},{"id":475,"value":"viewof file = Inputs.file({label: \"Data\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2333,"value":"Depuis novembre 2022, on peut également directement importer des données via des data table. ","pinned":false,"hidden":false,"mode":"md"},{"id":2335,"value":"await FileAttachment(\"stats.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1977,"value":"Enfin, la fonction `Summary Table` développée par Mike Freeman est très pratique pour visualiser un résumé statistique d'un tableau de données.","pinned":false,"hidden":false,"mode":"md"},{"id":1960,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1974,"value":"SummaryTable(cities)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1958,"value":"

IMPORTER DES DONNÉES GÉOMÉTRIQUES

","pinned":false,"hidden":false,"mode":"html"},{"id":477,"value":"Pour les fonds de carte, on privilégie le format geojson car le format json est intimement lié au langage javascript.","pinned":false,"hidden":false,"mode":"md"},{"id":479,"value":"world = d3.json(\n \"https://raw.githubusercontent.com/neocarto/bertin/main/data/world.geojson\"\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1795,"value":"On peut rapidement les géométries avec le package [`geoverview`](https://github.com/neocarto/geoverview).","pinned":false,"hidden":false,"mode":"md"},{"id":503,"value":"view(world)","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"

BASES DE DONNÉES

","pinned":false,"hidden":false,"mode":"html"},{"id":1798,"value":"Dans Observable, on peut directement se connecter à des bases de données. Grace à `duckdb`, On peut aussi importer des données de différents formats dans une base de données directement dans le navigateur. C'est rapide. Et ensuite, ca permet de les traiter en sql. Voir [ce notebook](https://observablehq.com/@ericmauviere/duckdb-redonne-nouvelle-vie-sql) d'Eric Mauvière.","pinned":false,"hidden":false,"mode":"md"},{"id":2340,"value":"db = DuckDBClient.of({\n electricité: FileAttachment(\"electricite.csv\"),\n alphabetisation: FileAttachment(\"alphabetisation.csv\"),\n co2: FileAttachment(\"co2.csv\"),\n esperance: FileAttachment(\"esperance.csv\")\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2358,"value":"SELECT * FROM \"co2\"","pinned":true,"hidden":false,"mode":"sql","output":"","database":"var:db"},{"id":840,"value":"

EXPORTER

","pinned":false,"hidden":false,"mode":"md"},{"id":842,"value":"On peut embarquer n'importe quelle cellule, vusualisation ou autre, dans un blog. Cela fonctionne comme une API. Voir par exemple : https://www.humanite.fr/mot-cle/regard-de-cartographe","pinned":false,"hidden":false,"mode":"md"},{"id":2302,"value":"

OBSERVABLE EST UNE BOITE PRIVÉE

","pinned":false,"hidden":false,"mode":"html"},{"id":2311,"value":"Attention, Observable est une boite privée. Ils ont donc mis en place un modèle de tarification. Par défaut, on peut presque tout faire avec la version gratuite, mais uniquement de façon publique, ce qui est quand même très embêtant.","pinned":false,"hidden":false,"mode":"md"},{"id":2305,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":2315,"value":"Heureusement, on peut aussi faire du Observable en dehors d'Observable.","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"

FAIRE DU OBSERVABLE SANS OBSERVABLE

","pinned":false,"hidden":false,"mode":"html"},{"id":530,"value":"Compatibilité avec Quarto (Rstudio). Il y a même une extension chrome pour convertir un notebook en document Quarto. \nVoir https://github.com/neocarto/docs","pinned":false,"hidden":false,"mode":"md"},{"id":1668,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":2277,"value":"Compatibilité avec [JupyterLab](https://jupyter.org/) (work in progress).","pinned":false,"hidden":false,"mode":"md"},{"id":2273,"value":"tweet(\"1587561665997987842\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":2285,"value":"Ou directement dans Visual Studio Code avec l'extension [Observable JS](https://marketplace.visualstudio.com/items?itemName=GordonSmith.js-notebook-extension-pack) de Gordon Smithz.","pinned":false,"hidden":false,"mode":"md"},{"id":2363,"value":"Ou encore directement à partir d'une page blanche garce au [runtime](https://github.com/observablehq/runtime) d'Observable, qui est open source. ","pinned":false,"hidden":false,"mode":"md"},{"id":2031,"value":"

COMMENT APPRENDRE ?

","pinned":false,"hidden":false,"mode":"html"},{"id":2041,"value":"On a donc là un environnement collaboratif, qui permet d'apprendre comment tout cela fonctionne.\n\n- 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":2035,"value":"

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

D3.js

","pinned":false,"hidden":false,"mode":"md"},{"id":604,"value":"D3.js 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. Et le développement continue. \n\n**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":608,"value":"d3jsgithub = FileAttachment(\"d3jsgithub.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2045,"value":"

PRINCIPE : LA MANIPULATION DU DOM

","pinned":false,"hidden":false,"mode":"html"},{"id":611,"value":"d3.js, c'est une grosse boite à outil qui permet de manipuler le DOM (Document Object Model) pour dessiner n'importe quoi à partir de données (D3 signifie Data Driven Documents)","pinned":false,"hidden":false,"mode":"md"},{"id":2047,"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":2049,"value":"Avant, on aurait écrit ceci dans une cellule html : ","pinned":false,"hidden":false,"mode":"md"},{"id":2051,"value":"\n \n \n \n","pinned":false,"hidden":false,"mode":"html"},{"id":2053,"value":"Avec le DOM et d3js, on écrit dorénavant ceci dans une cellule javascript :","pinned":false,"hidden":false,"mode":"md"},{"id":2056,"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 .style(\"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 .style(\"fill\", \"#5277bf\");\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2070,"value":"Avec **d3.select** (selecteur css), on peut modifier un objet à sa guise.","pinned":false,"hidden":false,"mode":"md"},{"id":2068,"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(\"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":2073,"value":"

DESSINER À PARTIR DE DONNÉES

","pinned":false,"hidden":false,"mode":"html"},{"id":613,"value":"myData = [10, 30, 2, 20, 10]","pinned":true,"hidden":false,"mode":"ojs"},{"id":615,"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":2076,"value":"

TRANSITIONS

","pinned":false,"hidden":false,"mode":"html"},{"id":2078,"value":"`.transition()` permet d'animer un objet et/ou de faire varier ses propriétés. \n`.duration()` permet de définir la durée de la transition. \n`.delay()` permet de définir un temps d'attente.","pinned":false,"hidden":false,"mode":"md"},{"id":2087,"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":2091,"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":2093,"value":"

INTERACTIVITÉ

","pinned":false,"hidden":false,"mode":"html"},{"id":2095,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":2099,"value":"

COMMENT APPRENDRE ?

","pinned":false,"hidden":false,"mode":"html"},{"id":2101,"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":2103,"value":"

D3.js et données spatiales

","pinned":false,"hidden":false,"mode":"html"},{"id":2105,"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":2111,"value":"

AFFICHER UN SIMPLE FOND DE CARTE

","pinned":false,"hidden":false,"mode":"html"},{"id":2109,"value":"Ajout d'un fichier geojson","pinned":false,"hidden":false,"mode":"md"},{"id":2113,"value":"pays = FileAttachment(\"countries.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2118,"value":"Grace à l'extension [d3-geo-projection](https://github.com/d3/d3-geo-projection), on a accès à une multitudes de systèmes de projection.","pinned":false,"hidden":false,"mode":"md"},{"id":2121,"value":"projection = d3.geoBertin1953()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2123,"value":"Définition de la hauteur de la carte (la largeur est définie automatiquement par Observable)","pinned":false,"hidden":false,"mode":"md"},{"id":2125,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":2128,"value":"Définition du path (c-à-d la fonction qui va convertir les coordonnées du geojson en lat/long en chemin svg sur la page)","pinned":false,"hidden":false,"mode":"md"},{"id":2131,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2133,"value":"On peut définir aussi la sphère (aka l'espace terrestre dans une projection donnée)","pinned":false,"hidden":false,"mode":"md"},{"id":2135,"value":"sphere = ({ type: \"Sphere\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2137,"value":"Affichage de la carte","pinned":false,"hidden":false,"mode":"md"},{"id":633,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":2140,"value":"

CARTE QUALITATIVE

","pinned":false,"hidden":false,"mode":"html"},{"id":2142,"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":2144,"value":"Import de données attributaires","pinned":false,"hidden":false,"mode":"md"},{"id":2146,"value":"regions = FileAttachment(\"regions.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2150,"value":"Inputs.table(regions)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2153,"value":"On crée une fonction pour associer une couleur à chaque continent.","pinned":true,"hidden":false,"mode":"md"},{"id":2157,"value":"colors_typo = d3.schemeTableau10.slice(0, 5).concat(\"white\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2159,"value":"types = Array.from(new Set(regions.map((d) => d[\"Region Code\"])))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2161,"value":"getcolor = d3.scaleOrdinal().domain(types).range(colors_typo)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2163,"value":"getcolor(\"Africa\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2165,"value":"cols = new Map(regions.map((d) => [d.ISO3, getcolor(d[\"Region Code\"])]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2382,"value":"cols.get(\"FRA\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2167,"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(pays.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":2169,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":2172,"value":"Swatches(d3.scaleOrdinal(types, colors_typo))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2174,"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":2176,"value":"

CARTE CHOROPLÈTHE

","pinned":false,"hidden":false,"mode":"html"},{"id":2178,"value":"gdpppc = FileAttachment(\"gdpppc.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2180,"value":"quantile = d3\n .scaleQuantile()\n .domain(gdpppc.map((d) => d.gdppc2018))\n .range(d3.schemeReds[6])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2182,"value":"colbyid = new Map(gdpppc.map((d) => [d.id, quantile(d.gdppc2018)]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2184,"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(pays.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":2186,"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":2188,"value":"

CERCLES PROPORTIONNELS

","pinned":false,"hidden":false,"mode":"html"},{"id":2190,"value":"gdp = FileAttachment(\"gdp2018.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2192,"value":"Inputs.table(gdp)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2194,"value":"On définit une fonction pour passer de la valeur au rayon.","pinned":false,"hidden":false,"mode":"md"},{"id":2196,"value":"rayon = d3.scaleSqrt([0, d3.max(gdp, (d) => d.pib2018)], [0, size])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2198,"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":2201,"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":true,"hidden":false,"mode":"ojs"},{"id":2203,"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":2207,"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":2209,"value":"C'est fini, on peut faire la carte. ","pinned":true,"hidden":false,"mode":"md"},{"id":2212,"value":"viewof size = Inputs.range([0, 150], { label: \"k\", value: 75 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":2215,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":2218,"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":2220,"value":"

QUELQUES MOTS SUR LES PROJECTIONS

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

","pinned":false,"hidden":false,"mode":"html"},{"id":2224,"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":2228,"value":"newproj = d3.geoPolyhedralWaterman()","pinned":true,"hidden":false,"mode":"ojs"},{"id":2226,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":2232,"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":2234,"value":"proj4 = require(\"proj4\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2236,"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":2240,"value":"On importe un fond de carte de l'Europe.","pinned":false,"hidden":false,"mode":"md"},{"id":2243,"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":true,"hidden":false,"mode":"ojs"},{"id":2245,"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":2248,"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":2250,"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":2252,"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":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"

Observable Plot

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

","pinned":false,"hidden":false,"mode":"html"},{"id":764,"value":"Observable Plot est une bibliothèque JavaScript gratuite et open-source qui permet de visualiser rapidement des données tabulaires. Elle dispose d'une API concise et (c'est l'objectif) mémorable pour favoriser la fluidité. C'est la bibliothèque portée par Observable. Elle est développée par Mike Bostock et Philippe Rivière. ","pinned":false,"hidden":false,"mode":"md"},{"id":1053,"value":"data = FileAttachment(\"data.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"

MARKS

","pinned":false,"hidden":false,"mode":"html"},{"id":886,"value":"Il n'y a pas de graphique type dans Plot. Il y a des marks (des formes géométriques telles que des barres, des points et des lignes)","pinned":false,"hidden":false,"mode":"md"},{"id":1059,"value":"Plot.plot({\n marks: [Plot.tickX(data, { x: \"gdppc\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1063,"value":"Plot.plot({\n marks: [Plot.boxX(data, { x: \"gdppc\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1160,"value":"Plot.plot({\n marks: [Plot.dotX(data, { x: \"gdppc\", fill: \"black\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1156,"value":"

TRANSFORMATIONS

","pinned":false,"hidden":false,"mode":"html"},{"id":1066,"value":"Plot.plot({\n marks: [Plot.dotX(data, Plot.dodgeY({ x: \"gdppc\", fill: \"black\" }))],\n height: 250\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1078,"value":"

FACETTES

","pinned":false,"hidden":false,"mode":"html"},{"id":1149,"value":"Plot.plot({\n grid: true,\n marginLeft: 50,\n facet: {\n data: data,\n y: \"region\"\n },\n marks: [Plot.boxX(data, { x: \"gdppc\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1186,"value":"

\"GAPMINDER\" EN QUELQUES LIGNES

","pinned":false,"hidden":false,"mode":"html"},{"id":1189,"value":"Inputs.table(maddison)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1194,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1197,"value":"viewof year = Scrubber(Array.from(new Set(maddison.map((d) => d.year))), {\n autoplay: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1202,"value":"viewof logx = Inputs.toggle({ label: \"Log (x)\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1204,"value":"viewof logy = Inputs.toggle({ label: \"Log (y)\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1208,"value":"# ${year}","pinned":false,"hidden":false,"mode":"md"},{"id":1212,"value":"Plot.plot({\n color: {\n scheme: \"turbo\",\n type: \"symlog\"\n },\n grid: true,\n x: {\n type: logx ? \"log\" : undefined\n },\n y: {\n type: logy ? \"log\" : undefined\n },\n\n marks: [\n Plot.circle(maddison, {\n r: \"pop\",\n fill: \"gdppc\",\n stroke: \"white\",\n strokeWidth: 0.3,\n x: \"gdp\",\n y: \"pop\",\n filter: (d) => d.year == year\n }),\n\n Plot.text(maddison, {\n r: \"pop\",\n text: \"countrycode\",\n fill: \"white\",\n x: \"gdp\",\n y: \"pop\",\n filter: (d) => d.year == year\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2491,"value":"maddison","pinned":true,"hidden":false,"mode":"ojs"},{"id":863,"value":"

FEUILLES DE TRICHE

","pinned":false,"hidden":false,"mode":"html"},{"id":865,"value":"https://observablehq.com/@observablehq/plot-cheatsheets","pinned":false,"hidden":false,"mode":"md"},{"id":861,"value":"plot = FileAttachment(\"plot.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"

Bertin.js

","pinned":false,"hidden":false,"mode":"md"},{"id":430,"value":"*[bertin.js](https://www.npmjs.com/package/bertin)* est une librairie javascript qui permet de faire de la cartographie thématique interactive. ","pinned":false,"hidden":false,"mode":"md"},{"id":1246,"value":"logo","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"

PRINCIPE

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

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

REQUIRE

","pinned":false,"hidden":false,"mode":"html"},{"id":167,"value":"Pour avoir accès aux fonctionnalités de bertin.js dans Observable, vous avez juste à taper ceci dans une cellule javascript.","pinned":false,"hidden":false,"mode":"md"},{"id":169,"value":"```js\nbertin = require(\"bertin@1.5.4\")\n```","pinned":false,"hidden":false,"mode":"md"},{"id":1227,"value":"

DONNÉES ET FONDS DE CARTES

","pinned":false,"hidden":false,"mode":"html"},{"id":1732,"value":"geom = FileAttachment(\"geom@3.json\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":1261,"value":"stats = FileAttachment(\"stats.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1271,"value":"test = bertin.match(geom, \"ISO3_CODE\", stats, \"id\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1283,"value":"test.unmatched_data","pinned":true,"hidden":false,"mode":"ojs"},{"id":1285,"value":"countries = bertin.merge(geom, \"ISO3_CODE\", stats, \"id\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1217,"value":"

RÉALISER UNE CARTE : la fonction draw()

","pinned":false,"hidden":false,"mode":"html"},{"id":173,"value":"Chaque carte est un objet contenant les parameters définissant la carte. Tout est dans la fonction draw.","pinned":false,"hidden":false,"mode":"md"},{"id":2390,"value":"bertin_code = FileAttachment(\"bertin_code.svg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1221,"value":"Dans bertin.js, chaque couche est associée à un type.","pinned":false,"hidden":false,"mode":"md"},{"id":1296,"value":"bertin.draw({\n params: { projection: \"Bertin1953\" },\n layers: [\n { type: \"header\", text: \"La planète bleue\" },\n { geojson: countries, fill: \"white\", fillOpacity: 0.4, stroke: \"none\" },\n { type: \"graticule\" },\n { type: \"outline\" }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1329,"value":"viewof k2 = Inputs.range([2, 100], { label: \"k\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1314,"value":"bertin.draw({\n params: {\n projection: \"Bertin1953\"\n //projection: \"Berghaus\"\n //projection: \"HoaXiaoguang\"\n //projection: \"Spilhaus\"\n //projection: \"Polar\"\n },\n layers: [\n { type: \"header\", text: \"La population mondiale\" },\n {\n type: \"bubble\",\n geojson: countries,\n values: \"pop\",\n fill: \"#000080\",\n fillOpacity: 0.5,\n dorling: true,\n k: k2,\n leg_x: 650,\n leg_y: 400,\n leg_round: 0,\n tooltip: [\"$name\", \"$pop\"]\n },\n { geojson: countries, fill: \"white\", fillOpacity: 0.5, stroke: \"none\" },\n { type: \"graticule\" },\n { type: \"outline\" }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1339,"value":"bertin.draw({\n params: { projection: \"Bertin1953\" },\n layers: [\n { type: \"header\", text: \"PIB par habitant\" },\n {\n geojson: countries,\n tooltip: [\"$name\", \"$gdppc\"],\n fill: {\n type: \"choro\",\n values: \"gdppc\",\n colors: \"RdYlGn\",\n leg_x: 100,\n leg_y: 100,\n leg_round: 0\n }\n },\n { type: \"graticule\" },\n { type: \"outline\" }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1540,"value":"bertin.draw({\n params: {\n projection: \"Bertin1953\"\n //projection: \"Berghaus\"\n //projection: \"HoaXiaoguang\"\n //projection: \"Spilhaus\"\n //projection: \"Polar\"\n },\n layers: [\n { type: \"header\", text: \"La population mondiale\" },\n {\n type: \"bubble\",\n geojson: countries,\n values: \"pop\",\n fill: {\n type: \"choro\",\n values: \"gdppc\",\n colors: \"RdYlGn\",\n leg_x: 100,\n leg_y: 100,\n leg_round: 0\n },\n //dorling: true,\n k: k2,\n leg_x: 650,\n leg_y: 400,\n leg_round: 0,\n tooltip: [\"$name\", \"$pop\"]\n },\n { geojson: countries, fill: \"white\", fillOpacity: 0.5, stroke: \"none\" },\n { type: \"graticule\" },\n { type: \"outline\" }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":406,"value":"

EXEMPLES

","pinned":false,"hidden":false,"mode":"html"},{"id":2320,"value":"gallery","pinned":false,"hidden":false,"mode":"ojs"},{"id":415,"value":"

CODE & DOCUMENTATION

","pinned":false,"hidden":false,"mode":"html"},{"id":417,"value":"https://github.com/neocarto/bertin","pinned":false,"hidden":false,"mode":"md"},{"id":1813,"value":"

#JSspatial

","pinned":false,"hidden":false,"mode":"md"},{"id":1826,"value":"Il existe beaucoup d'autres outils en javascript pour faire de la géomatique. La liste ci-dessous est non exhaustive.","pinned":false,"hidden":false,"mode":"md"},{"id":1900,"value":"

IMPORTER DES DONNÉES GÉOGRAPHIQUES

","pinned":false,"hidden":false,"mode":"html"},{"id":1907,"value":"Il existe de nombreux packages et de nombreuses librairies pour importer des données géographiques en javascript. Voici une liste non exhaustive des méthodes possibles.","pinned":false,"hidden":false,"mode":"md"},{"id":1902,"value":"md`${previews([\n {\n path: \"@ambassadors/geographical-features-imports\",\n thumbnail:\n \"20eac38dd4c6c8ed21c25e0bb1cbc9c59112e9b5c3240461d3071f704f16a44d\",\n title: \"Importer des données géo\",\n author: \"@neocarto\"\n }\n])} \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1815,"value":"

GEOTOOLBOX

","pinned":false,"hidden":false,"mode":"html"},{"id":1872,"value":"[`geotoolbox`](https://github.com/neocarto/geotoolbox) est un outil javascript pour les géographes basé sur d3geo, topojson et jsts. Il permet de traiter simplement les propriétés geojson et fournit plusieurs opérations SIG utiles pour la cartographie thématique.","pinned":false,"hidden":false,"mode":"md"},{"id":1819,"value":"vthumbs = md`${previews([\n {\n path: \"@neocartocnrs/hello-geotoolbox\",\n thumbnail:\n \"efe14bfdf3560cf655809841b7b2835037fcbc8c3cf88a18c4730c03b128c54b\",\n title: \"Geotoolbox\"\n }\n])} \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1817,"value":"

TURF

","pinned":false,"hidden":false,"mode":"md"},{"id":1828,"value":"[`turf`](https://turfjs.org/) est une bibliothèque JavaScript pour l'analyse spatiale (de type SIG). 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. L'avantage de turf est d'être modulaire. On ne charge que ce dont on a besoin. ","pinned":false,"hidden":false,"mode":"md"},{"id":1831,"value":"md`${previews([\n {\n path: \"@neocartocnrs/cheat-sheet-turf-js/2\",\n thumbnail:\n \"15b405a0c7fbad90f3a8921b75284717a589f78d681e8d1b6f5d3d97fbe37bef\",\n title: \"Advanced geospatial analysis\",\n author: \"@neocarto\"\n }\n])} \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1882,"value":"

D3-GEO

","pinned":false,"hidden":false,"mode":"html"},{"id":1884,"value":"[d3-geo](https://github.com/d3/d3-geo) est le module spatial de d3. Il permet de gérer les projections cartographiques, les formes sphériques et la trigonométrie sphérique. Voir aussi [d3-geo-projection](https://github.com/d3/d3-geo-projection).","pinned":false,"hidden":false,"mode":"md"},{"id":1891,"value":"md`${previews([\n {\n path: \"@neocartocnrs/some-experiments-with-d3-geo\",\n thumbnail:\n \"50a7c934af9cc26a4526e2a3a4e2ece9b42fbb05a0ddb03b36991c831444db7e\",\n title: \"Experiments with d3-geo\",\n author: \"@neocarto\"\n }\n])} \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1915,"value":"

D3-DELAUNAY & D3-GEO-VORONOI

","pinned":false,"hidden":false,"mode":"html"},{"id":1913,"value":"[`d3-delaunay`](https://github.com/d3/d3-delaunay) est une bibliothèque rapide pour calculer le diagramme de Voronoï d'un ensemble de points bidimensionnels. Elle est basée sur Delaunator, une bibliothèque rapide pour calculer la triangulation de Delaunay en utilisant des algorithmes de balayage. Le diagramme de Voronoï est construit en reliant les circonférences des triangles adjacents dans la triangulation de Delaunay. [`d3-geo-voronoi`](https://github.com/Fil/d3-geo-voronoi) est une adaptation de d3-delaunay sur la sphère.","pinned":false,"hidden":false,"mode":"md"},{"id":1924,"value":"md`${previews([\n {\n path: \"@neocartocnrs/delaunay-voronoi\",\n thumbnail:\n \"4fa75dfdc73e811513ad6738170f12f3c963940bca14100ab109d70c070b0be7\",\n title: \"Delaunay, Voronoi & geoVoronoi\",\n author: \"@neocarto\"\n }\n])} \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1824,"value":"

TOPOJSON

","pinned":false,"hidden":false,"mode":"md"},{"id":1838,"value":"[`TopoJSON`](https://github.com/topojson/topojson) est une extension de GeoJSON. La librairie permet de réaliser des opérations SIG basées sur la topologie (agrégation, voisins, simplification, etc.)","pinned":false,"hidden":false,"mode":"md"},{"id":1836,"value":"md`${previews([\n {\n path: \"@neocartocnrs/cheat-sheet-topojson\",\n thumbnail:\n \"38695ae58bb7e0ac3584df2ddca82bec163912d0f088b9dcd35eebb03abf09fb\",\n title: \"Topojson\",\n author: \"@neocarto\"\n }\n])} \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1844,"value":"

PROJ4JS

","pinned":false,"hidden":false,"mode":"html"},{"id":1842,"value":"[`proj4js`](http://proj4js.org/) est une bibliothèque JavaScript permettant de transformer les coordonnées d'un système de coordonnées à un autre, y compris les transformations de datum","pinned":false,"hidden":false,"mode":"md"},{"id":1849,"value":"md`${previews([\n {\n path: \"@neocartocnrs/proj4js-with-d3js\",\n thumbnail:\n \"5b5834a3fa24608bbacb803f17e3c7f06ac53b92214864521f14cedbf82da9fd\",\n title: \"Proj4js avec d3js\",\n author: \"@neocarto\"\n }\n])} \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1931,"value":"

SPL.JS

","pinned":false,"hidden":false,"mode":"html"},{"id":1929,"value":"SpatiaLite est une extension spatiale de SQLite avec des fonctionnalités de base de données géographiques gérant des données vectorielles. Il est similaire à PostGIS, mais SQLite n'est pas basés sur une architecture client-serveur. [`spl.js`](https://github.com/jvail/spl.js) est une implémentation de SpatiaLite (et de ses amis : sqlite, geos, proj, rttopo) pour le navigateur.","pinned":false,"hidden":false,"mode":"md"},{"id":1938,"value":"md`${previews([\n {\n path: \"@neocartocnrs/spatialite\",\n thumbnail:\n \"6f040dece1c103ca0ed2a3296ab7e0a2e892ec59c283ade07b838ea01ae8428f\",\n title: \"spl.js\",\n author: \"@neocartocnrs\"\n }\n])} \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1859,"value":"

GDAL3.JS

","pinned":false,"hidden":false,"mode":"html"},{"id":1856,"value":"[`Gdals3.js`](https://github.com/bugra9/gdal3.js) est un portage des applications Gdal (gdal_translate, ogr2ogr, gdal_rasterize, gdalwarp, gdaltransform) vers Webassembly. Il permet de convertir des données géospatiales matricielles et vectorielles dans divers formats et systèmes de coordonnées.","pinned":false,"hidden":false,"mode":"md"},{"id":1864,"value":"md`${previews([\n {\n path: \"@mthh/geographical-features-imports-gdal3-js\",\n thumbnail:\n \"8a8c7839b7f2433b8b9eafd7ec5928343d3588980bf7cd8fd8715b3ecb7b5390\",\n title: \"Gdals3.js\",\n author: \"@mthh\"\n }\n])} \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"

Conclusion

","pinned":false,"hidden":false,"mode":"html"},{"id":1567,"value":"{\n const button = html``;\n button.onclick = () => conclusion.parentElement.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":2317,"value":"import { gallery } from \"@neocartocnrs/hello-bertin-js\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":640,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"view = require(\"geoverview@1.2\").then((f) => f.view)","pinned":false,"hidden":false,"mode":"ojs"},{"id":396,"value":"import { previews } from \"@d3/gallery\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":145,"value":"Reveal = require(\"reveal.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":661,"value":"//import { DuckDBClient } from \"@cmudig/duckdb\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":652,"value":"//co2 = FileAttachment(\"co2.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"//alphabetisation = FileAttachment(\"alphabetisation.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":655,"value":"//electricite = FileAttachment(\"electricite.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"//esperance = FileAttachment(\"esperance.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1007,"value":"import {Icicle} from \"@d3/icicle\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1244,"value":"import { logo } from \"@neocartocnrs/bertin-logo\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1264,"value":"bertin = require(\"bertin@1.1.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1762,"value":"gdppc = FileAttachment(\"gdppc.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2267,"value":"twttr = require(\"https://platform.twitter.com/widgets.js\")\n .catch((e) => window.twttr || Promise.reject(e))\n .then((twttr) => new Promise((resolve) => twttr.ready(resolve)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2269,"value":"function tweet(id, options) {\n const div = document.createElement(\"DIV\");\n Promise.resolve().then(() => twttr.widgets.createTweet(id, div, options));\n return div;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W38","stdlib":"1","titling":"auto"}