2f: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; }30: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 ]31:T489,{ const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, 500]) .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({ type: "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(world) // 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(); }32:T12eb,md`${previews([ { path: "@neocartocnrs/hello-bertin-js", thumbnail: "66e441ced4a189c18031171b7a40ae3f833742f1d60739caaeb0366bd9ce4d9c", title: "Introduction", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-symbols", thumbnail: "aa020c3837313798403f2f0f799cb12e67a6313712e1bc3f309fc9b4fcf4c638", title: "Symboles", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-prop-symbols", thumbnail: "e9f0eabd609ad6aa7a036c1fbe806005980ad6d84cc5aaf3d929a97a01f964d7", title: "Symboles proportionnels", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-typo", thumbnail: "1b5332147298a57ab8f8114f46f1ec62b5b8cd7c28b273e7b8a1622cc77b476b", title: "Typologies", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-chropoleth", thumbnail: "94b25df3a8d7d4d4e2d431ff4f862aa7b163b7379c138385caff66f1167da8ee", title: "Cartes choroplèthes", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-stock-typo", thumbnail: "b30f86263bf9078b513a0f791d6fd8992b81c49e4bf67d3c56c7bfcabe6b76aa", title: "Stock + typo", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-stock-choro", thumbnail: "6092f001e916f001dd24466efa8109cad6f8c042c6dc0f5ea2dfed65f3475bb5", title: "Stock + choro", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-dorling-cartogram", thumbnail: "eba0d6fa4dd88537c60e25afb4f9cec4394e533662e8192e99c9f74f43199020", title: "Cartogrammes de Dorling", author: "@neocarto" }, { path: " @neocartocnrs/bertin-js-prop-squares", thumbnail: "d1aedcbb6c7e412f515614657e9551b51b978de771f0e07ee98a4e79e0947b5e", title: "Cartogrammes de Demers", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-spikes", thumbnail: "3e77c293c16215abe91bd1428cbfbb72cd9a651b260515b3932a4dfd4e73bd05", title: "Spikes", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-dots-cartograms", thumbnail: "3746ad035df9683ac8f0dbce360a0f19e146699d1c69d1641d84bc87ff1b596e", title: "Cartogrammes en points", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-mashroom", thumbnail: "ce2ce2e61acfc5d0c0b6e3e4bdc970209cde766780acfa9cc9555aaffe35968c", title: "Champignons", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-links", thumbnail: "294f06f5ec90bf0e0960a84240d52d4d84c7bdaf3769de59a394ef1067a00a60", title: "Liens", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-thickness", thumbnail: "deffd3d2d4c7c065f61444d1ebd70bc6337a90e096a5c53ee65aafbfeec27a14", title: "Réseaux et discontinuités", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-dot-density-map-bertin", thumbnail: "82bf50e9e0aa6a65fc5c0a8470ecd7dbc369f1d2476ca395569a3c1af1fbfeb9", title: "Carte par points", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-regular-bubbles", thumbnail: "78d27904c11f56427bfd4bd50daed8fcb839f8558901497c0c303a3198bb4f72", title: "Points Bertin", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-tiles", thumbnail: "02d0cbcac7fbe5521aa13d1df201ad5fbd6d8c8eb1790e6bf4f94ab76fa8a840", title: "Tuiles Raster", author: "@neocarto" }, { path: "@neocartocnrs/smooth", thumbnail: "3ec03a066a86cc6d4ecdf0a837866f69392c0eeaaade01691b78c0e435ad7853", title: "Smooth", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-regular-grid", thumbnail: "4db480fac5cb3a9dbaa27b51021bcab3905a5b39c7fe183ceb8c94045a7bc32e", title: "Regular Grid", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-regular-bubbles", thumbnail: "b0e30e6dbafc0d0c96ebbd27524a2f6c37e1def4aed33afe0d2bb595933ac3b0", title: "Regular Bubble", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-regular-squares", thumbnail: "55292e648d5a4018875c329abbe87dbc848343ed14cb9a3dff1b6149bc06ed1b", title: "Regular Squares", author: "@neocarto" }, { path: "@neocartocnrs/bertin-js-location-map", thumbnail: "849a62eb51930281a1ea25c58263cec517135ff4e0e95fc71ad39380e97aa8ac", title: "Location map", author: "@neocarto" }, { path: "@neocartocnrs/waterlines", thumbnail: "c842082c518ec752eb08a2747cff7fe1018a7f6e278ea1b7b9c52e6e26ea72e5", title: "Waterlines", author: "@neocarto" }, { path: "@neocartocnrs/several-ways-to-represent-dead-and-missing-migrants-in-the-m", thumbnail: "7a50ecb070f74b045fe5e61ea7b9587881770a6e7fe960374c5f33c469556496", title: "Multi representation", author: "@neocarto" } ])} `33:T865,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 et peuvent faire évoluer les droits des utilisateurs à leur guise.

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-et-donnees-spatiales

Github
https://github.com/neocarto

Twitter
https://twitter.com/neocartocnrs

Mastodon
https://mapstodon.space/@neocarto

Observable
https://observablehq.com/@neocartocnrs

`; shadow.appendChild(reveal); var deck = new Reveal(reveal, { embedded: true }); deck.initialize(); return dom; }34:[{"id":"981d2b20de8b9bb14b25273f0e85648275b71ae600095eb5ea37ceceed28ca45977ee665f32cf6b6758cbf39bc3ae1a6e1169429aab55501c056dc3ed2c4c52d","href":"https://static.observableusercontent.com/files/981d2b20de8b9bb14b25273f0e85648275b71ae600095eb5ea37ceceed28ca45977ee665f32cf6b6758cbf39bc3ae1a6e1169429aab55501c056dc3ed2c4c52d","name":"levels.svg","type":"image/svg+xml","lastModified":1668590474729.661,"size":5910},{"id":"52469a275fa922ce4f61c6b5e449b540e6f61631f92f519f9890f1c4b14edd4e799716120c360bd3a5e88d815ff51d66c2884efbf93445fcdf2d601dd32c550b","href":"https://static.observableusercontent.com/files/52469a275fa922ce4f61c6b5e449b540e6f61631f92f519f9890f1c4b14edd4e799716120c360bd3a5e88d815ff51d66c2884efbf93445fcdf2d601dd32c550b","name":"gdppc.json","type":"application/json","lastModified":1668590474729.661,"size":1672},{"id":"0d6109a7cfe0ab05a2eb8f5fd316106606905b4af058b761c10392c62b704cbe20054f6b51e05f5ad41d4a99c65f4d8a4e255019185973158be297a4ad1724c2","href":"https://static.observableusercontent.com/files/0d6109a7cfe0ab05a2eb8f5fd316106606905b4af058b761c10392c62b704cbe20054f6b51e05f5ad41d4a99c65f4d8a4e255019185973158be297a4ad1724c2","name":"jsspatial.jpg","type":"image/jpeg","lastModified":1668590474729.661,"size":10704},{"id":"5a302a536301579a2b1d95c0bc0e3309d9528eee1e1a3fd781acafa1717f6b04fd9791450ae3144954cc95e8d83ede1c496f0c337372daa19d66989eb32964e5","href":"https://static.observableusercontent.com/files/5a302a536301579a2b1d95c0bc0e3309d9528eee1e1a3fd781acafa1717f6b04fd9791450ae3144954cc95e8d83ede1c496f0c337372daa19d66989eb32964e5","name":"tarifs.png","type":"image/png","lastModified":1668590474729.661,"size":132710},{"id":"bcd007a57f15b444e8bb1ebf62d085c887b80f8f113ee318e3ac21ced4108a0dda4b7456259fea08420118623978d0b0563837b213b5c41c2633c146f55a23e5","href":"https://static.observableusercontent.com/files/bcd007a57f15b444e8bb1ebf62d085c887b80f8f113ee318e3ac21ced4108a0dda4b7456259fea08420118623978d0b0563837b213b5c41c2633c146f55a23e5","name":"logo_com_externe_semi_bold.png","type":"image/png","lastModified":1668590474729.661,"size":92217},{"id":"0b5d051c6ea6088de4b34a16e75a307f66fd346e49e52afa9f0d72384f5f682cbaf502f14b04a28ca11c42329c55939e0e6c2fada43fab8c48e4234deb76ba1a","href":"https://static.observableusercontent.com/files/0b5d051c6ea6088de4b34a16e75a307f66fd346e49e52afa9f0d72384f5f682cbaf502f14b04a28ca11c42329c55939e0e6c2fada43fab8c48e4234deb76ba1a","name":"alphabetisation.csv","type":"text/csv","lastModified":1668590474729.661,"size":47977},{"id":"551708660640602b4a4525de0c1badf892984d42dc619791442454645b140facc347346002e732fff0ed2d3bc90b82469a390e967b24a1ce8784c90fdd534384","href":"https://static.observableusercontent.com/files/551708660640602b4a4525de0c1badf892984d42dc619791442454645b140facc347346002e732fff0ed2d3bc90b82469a390e967b24a1ce8784c90fdd534384","name":"electricite.csv","type":"text/csv","lastModified":1668590474729.661,"size":73020},{"id":"22aa1ade50574e944582e0ad4b5304ed1823653061eccbfec9b72aee597eb124b7ceb12f371f346f23a9302fbc0c8e44892b000de9385f99dbd313c3c5772587","href":"https://static.observableusercontent.com/files/22aa1ade50574e944582e0ad4b5304ed1823653061eccbfec9b72aee597eb124b7ceb12f371f346f23a9302fbc0c8e44892b000de9385f99dbd313c3c5772587","name":"co2.csv","type":"text/csv","lastModified":1668590474729.661,"size":76891},{"id":"081ea7b32adbfe1104e92cb590b394d1aaf29fa55fbcfc36989540aae56838691f25773fdb131cc67f319659fa8d051ef30523bfd84ac7162bc5e93b60643119","href":"https://static.observableusercontent.com/files/081ea7b32adbfe1104e92cb590b394d1aaf29fa55fbcfc36989540aae56838691f25773fdb131cc67f319659fa8d051ef30523bfd84ac7162bc5e93b60643119","name":"esperance.csv","type":"text/csv","lastModified":1668590474729.661,"size":128021},{"id":"20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","href":"https://static.observableusercontent.com/files/20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","name":"d3jsgithub.png","type":"image/png","lastModified":1668590474729.661,"size":204966},{"id":"b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","href":"https://static.observableusercontent.com/files/b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","name":"maddison.csv","type":"text/csv","lastModified":1668590474729.661,"size":562020},{"id":"546e32d05ba6914c8329598c8246c4e896d4a933c1c98f4ee1836bd9ec193a80af5f0bb63f69f496c261c0a5f4b5a7fe9477a5bdfa71c6bb560cf48032c34525","href":"https://static.observableusercontent.com/files/546e32d05ba6914c8329598c8246c4e896d4a933c1c98f4ee1836bd9ec193a80af5f0bb63f69f496c261c0a5f4b5a7fe9477a5bdfa71c6bb560cf48032c34525","name":"quarto.png","type":"image/png","lastModified":1668590474729.661,"size":49661},{"id":"959e84ccefe740ba5cc6b82834623e35305bb2406d008e13f22592d61ada8eb71d8655afe71373807d743c4409f05baa9eeeff253360afe9e99dc5abc555658a","href":"https://static.observableusercontent.com/files/959e84ccefe740ba5cc6b82834623e35305bb2406d008e13f22592d61ada8eb71d8655afe71373807d743c4409f05baa9eeeff253360afe9e99dc5abc555658a","name":"geom@3.json","type":"application/json","lastModified":1668590474729.661,"size":372762},{"id":"a06713be16e4e8f8e08dbfb8239c448bdfd55d73ae86cb4f27e25f37e2f8bbb9c0908480832e859dd170c85258dc8b40330e4dbdd1ce747155273df40a75dd36","href":"https://static.observableusercontent.com/files/a06713be16e4e8f8e08dbfb8239c448bdfd55d73ae86cb4f27e25f37e2f8bbb9c0908480832e859dd170c85258dc8b40330e4dbdd1ce747155273df40a75dd36","name":"npm.png","type":"image/png","lastModified":1668590474729.661,"size":2875},{"id":"fce0903f22adc03adf9851eff781e1b92dda65fdded02a21f98a244882b753229544e847521dd01b9e25dda5fc092b9c345d5f720b0efe385a434c65ccec1d73","href":"https://static.observableusercontent.com/files/fce0903f22adc03adf9851eff781e1b92dda65fdded02a21f98a244882b753229544e847521dd01b9e25dda5fc092b9c345d5f720b0efe385a434c65ccec1d73","name":"bertin.png","type":"image/png","lastModified":1668590474729.661,"size":76710},{"id":"df7aa7d8f5aa11db0e32085dd506f98c096fc4471a85f7f376fd56484f1da5f5085272dd408576ded06460f11d6fa2bc585158e3426998ccf0422d0527e5e90b","href":"https://static.observableusercontent.com/files/df7aa7d8f5aa11db0e32085dd506f98c096fc4471a85f7f376fd56484f1da5f5085272dd408576ded06460f11d6fa2bc585158e3426998ccf0422d0527e5e90b","name":"obsplot.jpeg","type":"image/jpeg","lastModified":1668590474729.661,"size":86857},{"id":"dee3b74eb62cd95f9b81924e8883f444742ee23ccf8563f7175f97a045443d1cd1ffe8fd57ccdd6324179c4d89aee72d7b66c8825b4c0e45016a32e7f8c2a8b2","href":"https://static.observableusercontent.com/files/dee3b74eb62cd95f9b81924e8883f444742ee23ccf8563f7175f97a045443d1cd1ffe8fd57ccdd6324179c4d89aee72d7b66c8825b4c0e45016a32e7f8c2a8b2","name":"obs.png","type":"image/png","lastModified":1668590474729.661,"size":22025},{"id":"e9b10f313e8845575b47fc3025a2490c410e474a3f0b6f4870fdbc050e3abceea808ad4b2172608736f7949be2358e49f4d7283f7d4e30fd6c572aad924b9d1e","href":"https://static.observableusercontent.com/files/e9b10f313e8845575b47fc3025a2490c410e474a3f0b6f4870fdbc050e3abceea808ad4b2172608736f7949be2358e49f4d7283f7d4e30fd6c572aad924b9d1e","name":"d3@1.png","type":"image/png","lastModified":1668590474729.661,"size":15791},{"id":"d009b9e6d7439ddfa2ac6a8c2ada08c2c602284999242c264476538901ba5705a111096d08df0a8ccaa629b8426d8d2abe08fe0ec89977f3088bf7b415b932d9","href":"https://static.observableusercontent.com/files/d009b9e6d7439ddfa2ac6a8c2ada08c2c602284999242c264476538901ba5705a111096d08df0a8ccaa629b8426d8d2abe08fe0ec89977f3088bf7b415b932d9","name":"teamps.png","type":"image/png","lastModified":1668590474729.661,"size":14498},{"id":"0742304aea0984b8a35e58fb93d9f6a7431aef214df4fd294e4fda002bee11cf72cc18fca396236c921dfc077a7c36bdf3aa744c1eb6b324322148ed31670b28","href":"https://static.observableusercontent.com/files/0742304aea0984b8a35e58fb93d9f6a7431aef214df4fd294e4fda002bee11cf72cc18fca396236c921dfc077a7c36bdf3aa744c1eb6b324322148ed31670b28","name":"nature.png","type":"image/png","lastModified":1668590474729.661,"size":71369},{"id":"a72f70d64a74a2b488fa7b5b1d5582c16040f1671ba99858a0b63a6c06f1559a998593cdc76b3809fc226f08188e7853b5c60fc326670d9754de0682660a4c7c","href":"https://static.observableusercontent.com/files/a72f70d64a74a2b488fa7b5b1d5582c16040f1671ba99858a0b63a6c06f1559a998593cdc76b3809fc226f08188e7853b5c60fc326670d9754de0682660a4c7c","name":"bostock.png","type":"image/png","lastModified":1668590474729.661,"size":47290},{"id":"87a799f2777b8b522799ffa58b2eaf80f578ce7aa5d70cf4cec6e4e4feaf865f9f21d977b16976fe644d1af85979d736bfb6d880e0a608d68e12b5bc2dd04cfd","href":"https://static.observableusercontent.com/files/87a799f2777b8b522799ffa58b2eaf80f578ce7aa5d70cf4cec6e4e4feaf865f9f21d977b16976fe644d1af85979d736bfb6d880e0a608d68e12b5bc2dd04cfd","name":"data.json","type":"application/json","lastModified":1668590474729.661,"size":22917},{"id":"7e2e16ead32205439c98b535131a957bc798748aa42a118c07f63da34de2d37b9709b035fc122d0c831657e85edeffcf2daa918f2008b6c2c450b970145203f8","href":"https://static.observableusercontent.com/files/7e2e16ead32205439c98b535131a957bc798748aa42a118c07f63da34de2d37b9709b035fc122d0c831657e85edeffcf2daa918f2008b6c2c450b970145203f8","name":"stats.csv","type":"text/csv","lastModified":1668590474729.661,"size":11012},{"id":"b50bd51d0ac819b973663107d716680465fdc800c09f6032d2684b10241c12d86a831c72c27e3d78bb519a5fce28d2bf0392a79124b0b88551269645e2edd559","href":"https://static.observableusercontent.com/files/b50bd51d0ac819b973663107d716680465fdc800c09f6032d2684b10241c12d86a831c72c27e3d78bb519a5fce28d2bf0392a79124b0b88551269645e2edd559","name":"64f414fef8a91248865f5759641b0cf537bc87c0aaf57dc368ffe673013eccaa.jpg","type":"image/jpeg","lastModified":1668590474729.661,"size":17512},{"id":"ce9e73fefac4a7de061c4e5860ab2808adf6a4868e9221ec5b1e0da0f41b8b7c92a894854398cbe499d9a8802e93b8bc2386cf3d19dc9056b034b910b93c1f27","href":"https://static.observableusercontent.com/files/ce9e73fefac4a7de061c4e5860ab2808adf6a4868e9221ec5b1e0da0f41b8b7c92a894854398cbe499d9a8802e93b8bc2386cf3d19dc9056b034b910b93c1f27","name":"plot.png","type":"image/png","lastModified":1668590474729.661,"size":141321},{"id":"cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","href":"https://static.observableusercontent.com/files/cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","name":"js.png","type":"image/png","lastModified":1668590474729.661,"size":1991}] 2d:{"title":"Observable et données spatiales","cells":[{"id":0,"value":"# Observable et données spatiales","pinned":false,"hidden":false,"mode":"md"},{"id":1746,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":114,"value":"*Ce document est le support de la présentation réalisée le 16 novembre 2022 pour le **réseau data-scientists** de l'[INSEE](https://www.insee.fr/fr/accueil). N'hésitez pas à la partager, la modifier et la réutiliser.*","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) et un focus sur la librairie __bertin__ (5) pour la représentation cartographique. Enfin, quelques éléments 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":"$2f","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":107,"value":"

Observable, kezako ?

","pinned":false,"hidden":false,"mode":"html"},{"id":175,"value":"Observable 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":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. ","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"

JAVASCRIPT

","pinned":false,"hidden":false,"mode":"md"},{"id":253,"value":"a = 5","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"b = 6","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

","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 ? \n\nVous doutez de moi ? Voici l'option choisie précedemment: ${form['option4']}","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":false,"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":"$30","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({ values: sampledata, method: \"jenks\", nb: nbreaks, precision: 0 })","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":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"Inputs.table(maddison)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2020,"value":"NEW: Les data tables","pinned":false,"hidden":false,"mode":"md"},{"id":2017,"value":"await FileAttachment(\"maddison.csv\").csv({typed: \"auto\"})","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":1977,"value":"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":"Grace à `duckdb`, il est aussi possible de gérer les données via des requêtes sql.","pinned":false,"hidden":false,"mode":"md"},{"id":689,"value":"select * from electricite","pinned":true,"hidden":false,"mode":"sql","output":"dbtable","database":"var:db"},{"id":718,"value":"dbtable","pinned":true,"hidden":false,"mode":"ojs"},{"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":2009,"value":"

OBSERVABLE EST UNE BOITE PRIVÉE

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

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

INTEROPÉRABILITÉ

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

","pinned":false,"hidden":false,"mode":"html"},{"id":1993,"value":"Compatibilité avec [JupyterLab](https://jupyter.org/) (work in progress).","pinned":false,"hidden":false,"mode":"md"},{"id":1995,"value":"tweet(\"1587561665997987842\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1998,"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":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. ","pinned":false,"hidden":false,"mode":"md"},{"id":608,"value":"d3jsgithub = FileAttachment(\"d3jsgithub.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"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":613,"value":"myData = [10, 3, 20, 10, 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":648,"value":"Ca permet de faire des graphiques divers et variés","pinned":false,"hidden":false,"mode":"md"},{"id":630,"value":"Grace au module d3.geo, ça marche aussi avec des données géométriques","pinned":false,"hidden":false,"mode":"md"},{"id":633,"value":"$31","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":1156,"value":"

TRANSFORMATIONS

","pinned":false,"hidden":false,"mode":"html"},{"id":1160,"value":"Plot.plot({\n marks: [Plot.dotX(data, { x: \"gdppc\", fill: \"black\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"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":1740,"value":"","pinned":true,"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":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.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":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,ichage 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. Cett\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":399,"value":"$32","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`]() 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":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"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":664,"value":"db = DuckDBClient.of({ co2, alphabetisation, electricite, esperance })","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.4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1762,"value":"gdppc = FileAttachment(\"gdppc.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1987,"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":1990,"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":"$W34","stdlib":"1","titling":"auto"}