25:["$","title",null,{"children":"Observable, d3js, bertin et cie pour les M2 Carthagéo | Ped Ram | Observable"}] 49: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; }4a: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 ]4b: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(); }4c: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(); }4d: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(); }4e: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(); }4f: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; }50:[{"id":"a72f70d64a74a2b488fa7b5b1d5582c16040f1671ba99858a0b63a6c06f1559a998593cdc76b3809fc226f08188e7853b5c60fc326670d9754de0682660a4c7c","href":"https://static.observableusercontent.com/files/a72f70d64a74a2b488fa7b5b1d5582c16040f1671ba99858a0b63a6c06f1559a998593cdc76b3809fc226f08188e7853b5c60fc326670d9754de0682660a4c7c","name":"bostock.png","type":"image/png","lastModified":1682153056846.434,"size":47290},{"id":"87a799f2777b8b522799ffa58b2eaf80f578ce7aa5d70cf4cec6e4e4feaf865f9f21d977b16976fe644d1af85979d736bfb6d880e0a608d68e12b5bc2dd04cfd","href":"https://static.observableusercontent.com/files/87a799f2777b8b522799ffa58b2eaf80f578ce7aa5d70cf4cec6e4e4feaf865f9f21d977b16976fe644d1af85979d736bfb6d880e0a608d68e12b5bc2dd04cfd","name":"data.json","type":"application/json","lastModified":1682153056846.434,"size":22917},{"id":"7e2e16ead32205439c98b535131a957bc798748aa42a118c07f63da34de2d37b9709b035fc122d0c831657e85edeffcf2daa918f2008b6c2c450b970145203f8","href":"https://static.observableusercontent.com/files/7e2e16ead32205439c98b535131a957bc798748aa42a118c07f63da34de2d37b9709b035fc122d0c831657e85edeffcf2daa918f2008b6c2c450b970145203f8","name":"stats.csv","type":"text/csv","lastModified":1682153056846.434,"size":11012},{"id":"b50bd51d0ac819b973663107d716680465fdc800c09f6032d2684b10241c12d86a831c72c27e3d78bb519a5fce28d2bf0392a79124b0b88551269645e2edd559","href":"https://static.observableusercontent.com/files/b50bd51d0ac819b973663107d716680465fdc800c09f6032d2684b10241c12d86a831c72c27e3d78bb519a5fce28d2bf0392a79124b0b88551269645e2edd559","name":"64f414fef8a91248865f5759641b0cf537bc87c0aaf57dc368ffe673013eccaa.jpg","type":"image/jpeg","lastModified":1682153056846.434,"size":17512},{"id":"ce9e73fefac4a7de061c4e5860ab2808adf6a4868e9221ec5b1e0da0f41b8b7c92a894854398cbe499d9a8802e93b8bc2386cf3d19dc9056b034b910b93c1f27","href":"https://static.observableusercontent.com/files/ce9e73fefac4a7de061c4e5860ab2808adf6a4868e9221ec5b1e0da0f41b8b7c92a894854398cbe499d9a8802e93b8bc2386cf3d19dc9056b034b910b93c1f27","name":"plot.png","type":"image/png","lastModified":1682153056846.434,"size":141321},{"id":"cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","href":"https://static.observableusercontent.com/files/cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","name":"js.png","type":"image/png","lastModified":1682153056846.434,"size":1991},{"id":"52469a275fa922ce4f61c6b5e449b540e6f61631f92f519f9890f1c4b14edd4e799716120c360bd3a5e88d815ff51d66c2884efbf93445fcdf2d601dd32c550b","href":"https://static.observableusercontent.com/files/52469a275fa922ce4f61c6b5e449b540e6f61631f92f519f9890f1c4b14edd4e799716120c360bd3a5e88d815ff51d66c2884efbf93445fcdf2d601dd32c550b","name":"gdppc.json","type":"application/json","lastModified":1682153056846.434,"size":1672},{"id":"0d6109a7cfe0ab05a2eb8f5fd316106606905b4af058b761c10392c62b704cbe20054f6b51e05f5ad41d4a99c65f4d8a4e255019185973158be297a4ad1724c2","href":"https://static.observableusercontent.com/files/0d6109a7cfe0ab05a2eb8f5fd316106606905b4af058b761c10392c62b704cbe20054f6b51e05f5ad41d4a99c65f4d8a4e255019185973158be297a4ad1724c2","name":"jsspatial.jpg","type":"image/jpeg","lastModified":1682153056846.434,"size":10704},{"id":"2bef6fc93b87d1c1a7c7ac24f44b09632274bd72be8670e2e84a31afc00431c24bffeb5f87935011005330a0807406682b259b5c5a2a52a73db29b5a6295b50d","href":"https://static.observableusercontent.com/files/2bef6fc93b87d1c1a7c7ac24f44b09632274bd72be8670e2e84a31afc00431c24bffeb5f87935011005330a0807406682b259b5c5a2a52a73db29b5a6295b50d","name":"carthageo20222023.png","type":"image/png","lastModified":1682153056846.434,"size":250275},{"id":"cbc8d03ae3881eeb767daaa8ecb96ef88a08373484c31ff173344f78f9e021e4116facaebe20ac4cdc976cde05b2c0dc2e5e8d11750b0d7e7d069df697660453","href":"https://static.observableusercontent.com/files/cbc8d03ae3881eeb767daaa8ecb96ef88a08373484c31ff173344f78f9e021e4116facaebe20ac4cdc976cde05b2c0dc2e5e8d11750b0d7e7d069df697660453","name":"gdpppc.csv","type":"text/csv","lastModified":1682153056846.434,"size":4246},{"id":"05e8080f1738f8e4364cc440587e2c13d8c87418148bbb47ceba1549799e04788a7053def15e7266cc782f11e13e13cbd7c15186c2132d9b6426c027e428de27","href":"https://static.observableusercontent.com/files/05e8080f1738f8e4364cc440587e2c13d8c87418148bbb47ceba1549799e04788a7053def15e7266cc782f11e13e13cbd7c15186c2132d9b6426c027e428de27","name":"countries.json","type":"application/json","lastModified":1682153056846.434,"size":288936},{"id":"3e7da2b249bf1a2a1e3301ea9bbe34eede6df435e7a37286d95ffc2b2a38d631e55dc58771c3d23704b48fdfba75a20ffa9072f719a54dd2c3ea62803c26aa59","href":"https://static.observableusercontent.com/files/3e7da2b249bf1a2a1e3301ea9bbe34eede6df435e7a37286d95ffc2b2a38d631e55dc58771c3d23704b48fdfba75a20ffa9072f719a54dd2c3ea62803c26aa59","name":"gdp2018.csv","type":"text/csv","lastModified":1682153056846.434,"size":5299},{"id":"f533578b80e11f1c5c55d2069c563e62f9d1c98b0a0ceb66adb79cb3df3583c109d6a41c26da6a4cb47f452dcee97db639d29b6f3b196982a7bf7a7bfd218003","href":"https://static.observableusercontent.com/files/f533578b80e11f1c5c55d2069c563e62f9d1c98b0a0ceb66adb79cb3df3583c109d6a41c26da6a4cb47f452dcee97db639d29b6f3b196982a7bf7a7bfd218003","name":"regions.csv","type":"text/csv","lastModified":1682153056846.434,"size":5382},{"id":"949b606c6e3ca2c3452b18e4234d09a266af97083248e31d946b3457c2889aa2910987ede323284b1b176a35a61735fb5cbb59042faa8c8569bb922b17ce8c56","href":"https://static.observableusercontent.com/files/949b606c6e3ca2c3452b18e4234d09a266af97083248e31d946b3457c2889aa2910987ede323284b1b176a35a61735fb5cbb59042faa8c8569bb922b17ce8c56","name":"bebeproj.jpeg","type":"image/jpeg","lastModified":1682153056846.434,"size":610821},{"id":"721bcf04f3c72fd27a9786968bf494d306a2827b7929883ece586893a6fe433e274230ea532641f355e70392e8cd8f9fe89eae0e9274492f5f9fcc38627b49cc","href":"https://static.observableusercontent.com/files/721bcf04f3c72fd27a9786968bf494d306a2827b7929883ece586893a6fe433e274230ea532641f355e70392e8cd8f9fe89eae0e9274492f5f9fcc38627b49cc","name":"chrono.png","type":"image/png","lastModified":1682153056846.434,"size":27297},{"id":"9c2da79b856ae72514cabd91008026c1d456433a17541b4435db78f91b1734e40ba6b642cb21232ab6fa81724010ace33b32051dae64eaaa6c12cff09f8a8725","href":"https://static.observableusercontent.com/files/9c2da79b856ae72514cabd91008026c1d456433a17541b4435db78f91b1734e40ba6b642cb21232ab6fa81724010ace33b32051dae64eaaa6c12cff09f8a8725","name":"tree.png","type":"image/png","lastModified":1682153056846.434,"size":43596},{"id":"f27e78d82ecea3233ddc14fc3814ae53119731f081db456ab6948d389032f0dd7e730d631be2a661e41fa7a0a7254c453b6d06927eaa77579518089aabae72fa","href":"https://static.observableusercontent.com/files/f27e78d82ecea3233ddc14fc3814ae53119731f081db456ab6948d389032f0dd7e730d631be2a661e41fa7a0a7254c453b6d06927eaa77579518089aabae72fa","name":"cat.jpeg","type":"image/jpeg","lastModified":1682153056846.434,"size":102662},{"id":"1ed9b03b746abf7a9386d29470bf4a638463c5fc9131b0794a5ef8c4a2c20937ee43f7df1d5b4fc9601fad9c3f6914b8224d60ebe17b22525800cd2a33675e16","href":"https://static.observableusercontent.com/files/1ed9b03b746abf7a9386d29470bf4a638463c5fc9131b0794a5ef8c4a2c20937ee43f7df1d5b4fc9601fad9c3f6914b8224d60ebe17b22525800cd2a33675e16","name":"bertin_code.svg","type":"image/svg+xml","lastModified":1682153056846.434,"size":20082},{"id":"5a302a536301579a2b1d95c0bc0e3309d9528eee1e1a3fd781acafa1717f6b04fd9791450ae3144954cc95e8d83ede1c496f0c337372daa19d66989eb32964e5","href":"https://static.observableusercontent.com/files/5a302a536301579a2b1d95c0bc0e3309d9528eee1e1a3fd781acafa1717f6b04fd9791450ae3144954cc95e8d83ede1c496f0c337372daa19d66989eb32964e5","name":"tarifs.png","type":"image/png","lastModified":1682153056846.434,"size":132710},{"id":"cabf69db7ec8301417f9791c3c3b13d384a73b55d6b48484671221411a6a3baf78d4f12bb53d6ad6d4e42051a078a3d514b3669f7093aa57ccce5535b6acdf08","href":"https://static.observableusercontent.com/files/cabf69db7ec8301417f9791c3c3b13d384a73b55d6b48484671221411a6a3baf78d4f12bb53d6ad6d4e42051a078a3d514b3669f7093aa57ccce5535b6acdf08","name":"bouquins.png","type":"image/png","lastModified":1682153056846.434,"size":1597155},{"id":"0b5d051c6ea6088de4b34a16e75a307f66fd346e49e52afa9f0d72384f5f682cbaf502f14b04a28ca11c42329c55939e0e6c2fada43fab8c48e4234deb76ba1a","href":"https://static.observableusercontent.com/files/0b5d051c6ea6088de4b34a16e75a307f66fd346e49e52afa9f0d72384f5f682cbaf502f14b04a28ca11c42329c55939e0e6c2fada43fab8c48e4234deb76ba1a","name":"alphabetisation.csv","type":"text/csv","lastModified":1682153056846.434,"size":47977},{"id":"551708660640602b4a4525de0c1badf892984d42dc619791442454645b140facc347346002e732fff0ed2d3bc90b82469a390e967b24a1ce8784c90fdd534384","href":"https://static.observableusercontent.com/files/551708660640602b4a4525de0c1badf892984d42dc619791442454645b140facc347346002e732fff0ed2d3bc90b82469a390e967b24a1ce8784c90fdd534384","name":"electricite.csv","type":"text/csv","lastModified":1682153056846.434,"size":73020},{"id":"22aa1ade50574e944582e0ad4b5304ed1823653061eccbfec9b72aee597eb124b7ceb12f371f346f23a9302fbc0c8e44892b000de9385f99dbd313c3c5772587","href":"https://static.observableusercontent.com/files/22aa1ade50574e944582e0ad4b5304ed1823653061eccbfec9b72aee597eb124b7ceb12f371f346f23a9302fbc0c8e44892b000de9385f99dbd313c3c5772587","name":"co2.csv","type":"text/csv","lastModified":1682153056846.434,"size":76891},{"id":"081ea7b32adbfe1104e92cb590b394d1aaf29fa55fbcfc36989540aae56838691f25773fdb131cc67f319659fa8d051ef30523bfd84ac7162bc5e93b60643119","href":"https://static.observableusercontent.com/files/081ea7b32adbfe1104e92cb590b394d1aaf29fa55fbcfc36989540aae56838691f25773fdb131cc67f319659fa8d051ef30523bfd84ac7162bc5e93b60643119","name":"esperance.csv","type":"text/csv","lastModified":1682153056846.434,"size":128021},{"id":"20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","href":"https://static.observableusercontent.com/files/20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","name":"d3jsgithub.png","type":"image/png","lastModified":1682153056846.434,"size":204966},{"id":"b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","href":"https://static.observableusercontent.com/files/b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","name":"maddison.csv","type":"text/csv","lastModified":1682153056846.434,"size":562020},{"id":"981d2b20de8b9bb14b25273f0e85648275b71ae600095eb5ea37ceceed28ca45977ee665f32cf6b6758cbf39bc3ae1a6e1169429aab55501c056dc3ed2c4c52d","href":"https://static.observableusercontent.com/files/981d2b20de8b9bb14b25273f0e85648275b71ae600095eb5ea37ceceed28ca45977ee665f32cf6b6758cbf39bc3ae1a6e1169429aab55501c056dc3ed2c4c52d","name":"levels.svg","type":"image/svg+xml","lastModified":1682153056846.434,"size":5910},{"id":"546e32d05ba6914c8329598c8246c4e896d4a933c1c98f4ee1836bd9ec193a80af5f0bb63f69f496c261c0a5f4b5a7fe9477a5bdfa71c6bb560cf48032c34525","href":"https://static.observableusercontent.com/files/546e32d05ba6914c8329598c8246c4e896d4a933c1c98f4ee1836bd9ec193a80af5f0bb63f69f496c261c0a5f4b5a7fe9477a5bdfa71c6bb560cf48032c34525","name":"quarto.png","type":"image/png","lastModified":1682153056846.434,"size":49661},{"id":"959e84ccefe740ba5cc6b82834623e35305bb2406d008e13f22592d61ada8eb71d8655afe71373807d743c4409f05baa9eeeff253360afe9e99dc5abc555658a","href":"https://static.observableusercontent.com/files/959e84ccefe740ba5cc6b82834623e35305bb2406d008e13f22592d61ada8eb71d8655afe71373807d743c4409f05baa9eeeff253360afe9e99dc5abc555658a","name":"geom@3.json","type":"application/json","lastModified":1682153056846.434,"size":372762},{"id":"a06713be16e4e8f8e08dbfb8239c448bdfd55d73ae86cb4f27e25f37e2f8bbb9c0908480832e859dd170c85258dc8b40330e4dbdd1ce747155273df40a75dd36","href":"https://static.observableusercontent.com/files/a06713be16e4e8f8e08dbfb8239c448bdfd55d73ae86cb4f27e25f37e2f8bbb9c0908480832e859dd170c85258dc8b40330e4dbdd1ce747155273df40a75dd36","name":"npm.png","type":"image/png","lastModified":1682153056846.434,"size":2875},{"id":"fce0903f22adc03adf9851eff781e1b92dda65fdded02a21f98a244882b753229544e847521dd01b9e25dda5fc092b9c345d5f720b0efe385a434c65ccec1d73","href":"https://static.observableusercontent.com/files/fce0903f22adc03adf9851eff781e1b92dda65fdded02a21f98a244882b753229544e847521dd01b9e25dda5fc092b9c345d5f720b0efe385a434c65ccec1d73","name":"bertin.png","type":"image/png","lastModified":1682153056846.434,"size":76710},{"id":"df7aa7d8f5aa11db0e32085dd506f98c096fc4471a85f7f376fd56484f1da5f5085272dd408576ded06460f11d6fa2bc585158e3426998ccf0422d0527e5e90b","href":"https://static.observableusercontent.com/files/df7aa7d8f5aa11db0e32085dd506f98c096fc4471a85f7f376fd56484f1da5f5085272dd408576ded06460f11d6fa2bc585158e3426998ccf0422d0527e5e90b","name":"obsplot.jpeg","type":"image/jpeg","lastModified":1682153056846.434,"size":86857},{"id":"dee3b74eb62cd95f9b81924e8883f444742ee23ccf8563f7175f97a045443d1cd1ffe8fd57ccdd6324179c4d89aee72d7b66c8825b4c0e45016a32e7f8c2a8b2","href":"https://static.observableusercontent.com/files/dee3b74eb62cd95f9b81924e8883f444742ee23ccf8563f7175f97a045443d1cd1ffe8fd57ccdd6324179c4d89aee72d7b66c8825b4c0e45016a32e7f8c2a8b2","name":"obs.png","type":"image/png","lastModified":1682153056846.434,"size":22025},{"id":"e9b10f313e8845575b47fc3025a2490c410e474a3f0b6f4870fdbc050e3abceea808ad4b2172608736f7949be2358e49f4d7283f7d4e30fd6c572aad924b9d1e","href":"https://static.observableusercontent.com/files/e9b10f313e8845575b47fc3025a2490c410e474a3f0b6f4870fdbc050e3abceea808ad4b2172608736f7949be2358e49f4d7283f7d4e30fd6c572aad924b9d1e","name":"d3@1.png","type":"image/png","lastModified":1682153056846.434,"size":15791},{"id":"d009b9e6d7439ddfa2ac6a8c2ada08c2c602284999242c264476538901ba5705a111096d08df0a8ccaa629b8426d8d2abe08fe0ec89977f3088bf7b415b932d9","href":"https://static.observableusercontent.com/files/d009b9e6d7439ddfa2ac6a8c2ada08c2c602284999242c264476538901ba5705a111096d08df0a8ccaa629b8426d8d2abe08fe0ec89977f3088bf7b415b932d9","name":"teamps.png","type":"image/png","lastModified":1682153056846.434,"size":14498},{"id":"0742304aea0984b8a35e58fb93d9f6a7431aef214df4fd294e4fda002bee11cf72cc18fca396236c921dfc077a7c36bdf3aa744c1eb6b324322148ed31670b28","href":"https://static.observableusercontent.com/files/0742304aea0984b8a35e58fb93d9f6a7431aef214df4fd294e4fda002bee11cf72cc18fca396236c921dfc077a7c36bdf3aa744c1eb6b324322148ed31670b28","name":"nature.png","type":"image/png","lastModified":1682153056846.434,"size":71369}] 29:{"id":"8e7c718f53e44fae","slug":null,"title":"Observable, d3js, bertin et cie pour les M2 Carthagéo","thumbnail":"f64cb10b13ac179a05d50866b700b519b329636f2ff567584d55a126e7ceb386","access_level":"public","create_time":"$D2023-04-22T08:44:16.846Z","update_time":"$D2023-04-22T08:44:16.846Z","view_time":null,"first_public_time":"$D2023-04-22T08:44:16.846Z","has_unpublished_edits":null,"fork":{"id":"a4f572d050688b06","slug":"observable-d3-et-cie-pour-les-m2-carthageo","title":"Observable, d3js, bertin et cie pour les M2 Carthagéo","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b0bbcf444e46bf02","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":2486,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5456960e585c7bbb","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"5456960e585c7bbb","login":"pedahd","name":"Ped Ram","avatar_url":"https://avatars-next.observableusercontent.com/ef13a6f0f32bd05288b47eb131f8eb1c5f9160b8e901276508df258390e51492","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1990,"value":"

LECTURES PRÉLIMINAIRES

SOMMAIRE

Et pourquoi pas le javascript ?

HISTORIQUE

CARACTERISTIQUES DU LANGAGE

POINTS FAIBLES 👎

POINTS FORTS 👍

JAVASCRIPT POUR LA SCIENCE DES DONNÉES ?

COMMENT APPRENDRE LE JAVASCRIPT ?

Observable, kezako ?

LES NOTEBOOKS

LES CELLULES

JAVASCRIPT

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

MARKDOWN

HTML

FORMULES

CANVAS

SVG

LES INPUTS

\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"viewof checkboxes = Inputs.checkbox([\"A\", \"B\"], {\n label: \"Select some\",\n value: \"A\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":330,"value":"viewof radios = Inputs.radio([\"A\", \"B\"], {label: \"Select one\", value: \"A\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"

TOUT EST RÉACTIF 🔥

VERSIONNEMENT

FORKS

COLLABORER

TEAMS

IMPORTS

REQUIRE

IMPORTER DES DONNÉES TABULAIRES

IMPORTER DES DONNÉES GÉOMÉTRIQUES

BASES DE DONNÉES

EXPORTER

OBSERVABLE EST UNE BOITE PRIVÉE

FAIRE DU OBSERVABLE SANS OBSERVABLE

COMMENT APPRENDRE ?

D3.js

PRINCIPE : LA MANIPULATION DU DOM

DESSINER À PARTIR DE DONNÉES

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":613,"value":"myData = [10, 30, 2, 20, 10]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2076,"value":"

TRANSITIONS

INTERACTIVITÉ

COMMENT APPRENDRE ?

D3.js et données spatiales

AFFICHER UN SIMPLE FOND DE CARTE

CARTE QUALITATIVE

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

CARTE CHOROPLÈTHE

CERCLES PROPORTIONNELS

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

QUELQUES MOTS SUR LES PROJECTIONS

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2228,"value":"newproj = d3.geoPolyhedralWaterman()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2226,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2234,"value":"proj4 = require(\"proj4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2240,"value":"On importe un fond de carte de l'Europe.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"

Observable Plot

MARKS

TRANSFORMATIONS

FACETTES

\"GAPMINDER\" EN QUELQUES LIGNES

FEUILLES DE TRICHE

Bertin.js

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1246,"value":"logo","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"

PRINCIPE

REQUIRE

DONNÉES ET FONDS DE CARTES

RÉALISER UNE CARTE : la fonction draw()

EXEMPLES

CODE & DOCUMENTATION

#JSspatial

IMPORTER DES DONNÉES GÉOGRAPHIQUES

GEOTOOLBOX

TURF

D3-GEO

D3-DELAUNAY & D3-GEO-VORONOI

TOPOJSON

PROJ4JS

SPL.JS

GDAL3.JS

Conclusion

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1567,"value":"{\n const button = html``;\n button.onclick = () => conclusion.parentElement.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":540,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2317,"value":"import { gallery } from \"@neocartocnrs/hello-bertin-js\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"view = require(\"geoverview@1.2\").then((f) => f.view)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"import { previews } from \"@d3/gallery\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"Reveal = require(\"reveal.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":661,"value":"//import { DuckDBClient } from \"@cmudig/duckdb\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"//co2 = FileAttachment(\"co2.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"//alphabetisation = FileAttachment(\"alphabetisation.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"//electricite = FileAttachment(\"electricite.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"//esperance = FileAttachment(\"esperance.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"import {Icicle} from \"@d3/icicle\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"import { logo } from \"@neocartocnrs/bertin-logo\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"bertin = require(\"bertin@1.1.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1762,"value":"gdppc = FileAttachment(\"gdppc.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null