28:null 29:["$","title",null,{"children":"Visualisation de données spatiales dans Observable avec bertin.js (les midi de Géotéca) | Nicolas Lambert | Observable"}] 2e:T696,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

`; shadow.appendChild(reveal); var deck = new Reveal(reveal, { embedded: true }); deck.initialize(); return dom; }2f: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(); }30:Td59,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-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/bertin-js-location-map", thumbnail: "849a62eb51930281a1ea25c58263cec517135ff4e0e95fc71ad39380e97aa8ac", title: "Location map", author: "@neocarto" } ])} `31:T7a2,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

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/geoteca

Merci

Github
https://github.com/neocarto

Twitter
https://twitter.com/neocartocnrs

Observable
https://observablehq.com/@neocartocnrs

`; shadow.appendChild(reveal); var deck = new Reveal(reveal, { embedded: true }); deck.initialize(); return dom; }32:[{"id":"d009b9e6d7439ddfa2ac6a8c2ada08c2c602284999242c264476538901ba5705a111096d08df0a8ccaa629b8426d8d2abe08fe0ec89977f3088bf7b415b932d9","href":"https://static.observableusercontent.com/files/d009b9e6d7439ddfa2ac6a8c2ada08c2c602284999242c264476538901ba5705a111096d08df0a8ccaa629b8426d8d2abe08fe0ec89977f3088bf7b415b932d9","name":"teamps.png","type":"image/png","lastModified":1663935015240.055,"size":14498},{"id":"e9b10f313e8845575b47fc3025a2490c410e474a3f0b6f4870fdbc050e3abceea808ad4b2172608736f7949be2358e49f4d7283f7d4e30fd6c572aad924b9d1e","href":"https://static.observableusercontent.com/files/e9b10f313e8845575b47fc3025a2490c410e474a3f0b6f4870fdbc050e3abceea808ad4b2172608736f7949be2358e49f4d7283f7d4e30fd6c572aad924b9d1e","name":"d3@1.png","type":"image/png","lastModified":1664205474109.723,"size":15791},{"id":"df7aa7d8f5aa11db0e32085dd506f98c096fc4471a85f7f376fd56484f1da5f5085272dd408576ded06460f11d6fa2bc585158e3426998ccf0422d0527e5e90b","href":"https://static.observableusercontent.com/files/df7aa7d8f5aa11db0e32085dd506f98c096fc4471a85f7f376fd56484f1da5f5085272dd408576ded06460f11d6fa2bc585158e3426998ccf0422d0527e5e90b","name":"obsplot.jpeg","type":"image/jpeg","lastModified":1664205500219.436,"size":86857},{"id":"546e32d05ba6914c8329598c8246c4e896d4a933c1c98f4ee1836bd9ec193a80af5f0bb63f69f496c261c0a5f4b5a7fe9477a5bdfa71c6bb560cf48032c34525","href":"https://static.observableusercontent.com/files/546e32d05ba6914c8329598c8246c4e896d4a933c1c98f4ee1836bd9ec193a80af5f0bb63f69f496c261c0a5f4b5a7fe9477a5bdfa71c6bb560cf48032c34525","name":"quarto.png","type":"image/png","lastModified":1664265035902.247,"size":49661},{"id":"cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","href":"https://static.observableusercontent.com/files/cfadf3e1aa141430220a552db5669ce553c6103d7674abb7374671821fe259918d8473cab682a865407ad82bf729fc3ba5b03fad328ef105fe9beb6e38b842e7","name":"js.png","type":"image/png","lastModified":1662458010073.364,"size":1991},{"id":"ce9e73fefac4a7de061c4e5860ab2808adf6a4868e9221ec5b1e0da0f41b8b7c92a894854398cbe499d9a8802e93b8bc2386cf3d19dc9056b034b910b93c1f27","href":"https://static.observableusercontent.com/files/ce9e73fefac4a7de061c4e5860ab2808adf6a4868e9221ec5b1e0da0f41b8b7c92a894854398cbe499d9a8802e93b8bc2386cf3d19dc9056b034b910b93c1f27","name":"plot.png","type":"image/png","lastModified":1663678643729.561,"size":141321},{"id":"b50bd51d0ac819b973663107d716680465fdc800c09f6032d2684b10241c12d86a831c72c27e3d78bb519a5fce28d2bf0392a79124b0b88551269645e2edd559","href":"https://static.observableusercontent.com/files/b50bd51d0ac819b973663107d716680465fdc800c09f6032d2684b10241c12d86a831c72c27e3d78bb519a5fce28d2bf0392a79124b0b88551269645e2edd559","name":"64f414fef8a91248865f5759641b0cf537bc87c0aaf57dc368ffe673013eccaa.jpg","type":"image/jpeg","lastModified":1663678812388.63,"size":17512},{"id":"959e84ccefe740ba5cc6b82834623e35305bb2406d008e13f22592d61ada8eb71d8655afe71373807d743c4409f05baa9eeeff253360afe9e99dc5abc555658a","href":"https://static.observableusercontent.com/files/959e84ccefe740ba5cc6b82834623e35305bb2406d008e13f22592d61ada8eb71d8655afe71373807d743c4409f05baa9eeeff253360afe9e99dc5abc555658a","name":"geom@2.json","type":"application/json","lastModified":1663857440919.922,"size":372762},{"id":"7e2e16ead32205439c98b535131a957bc798748aa42a118c07f63da34de2d37b9709b035fc122d0c831657e85edeffcf2daa918f2008b6c2c450b970145203f8","href":"https://static.observableusercontent.com/files/7e2e16ead32205439c98b535131a957bc798748aa42a118c07f63da34de2d37b9709b035fc122d0c831657e85edeffcf2daa918f2008b6c2c450b970145203f8","name":"stats.csv","type":"text/csv","lastModified":1663857237066.684,"size":11012},{"id":"87a799f2777b8b522799ffa58b2eaf80f578ce7aa5d70cf4cec6e4e4feaf865f9f21d977b16976fe644d1af85979d736bfb6d880e0a608d68e12b5bc2dd04cfd","href":"https://static.observableusercontent.com/files/87a799f2777b8b522799ffa58b2eaf80f578ce7aa5d70cf4cec6e4e4feaf865f9f21d977b16976fe644d1af85979d736bfb6d880e0a608d68e12b5bc2dd04cfd","name":"data.json","type":"application/json","lastModified":1663854202401.134,"size":22917},{"id":"a72f70d64a74a2b488fa7b5b1d5582c16040f1671ba99858a0b63a6c06f1559a998593cdc76b3809fc226f08188e7853b5c60fc326670d9754de0682660a4c7c","href":"https://static.observableusercontent.com/files/a72f70d64a74a2b488fa7b5b1d5582c16040f1671ba99858a0b63a6c06f1559a998593cdc76b3809fc226f08188e7853b5c60fc326670d9754de0682660a4c7c","name":"bostock.png","type":"image/png","lastModified":1663932379491.343,"size":47290},{"id":"0742304aea0984b8a35e58fb93d9f6a7431aef214df4fd294e4fda002bee11cf72cc18fca396236c921dfc077a7c36bdf3aa744c1eb6b324322148ed31670b28","href":"https://static.observableusercontent.com/files/0742304aea0984b8a35e58fb93d9f6a7431aef214df4fd294e4fda002bee11cf72cc18fca396236c921dfc077a7c36bdf3aa744c1eb6b324322148ed31670b28","name":"nature.png","type":"image/png","lastModified":1663932744572.07,"size":71369},{"id":"b18928921c3d0b97d8f5836dc64b1ee8de2da87366fec2e0ff3d010c29cc0b0eaada2a417e49a88752502a6657c8dad6e6452e8904dab711764b6b0ad7862c58","href":"https://static.observableusercontent.com/files/b18928921c3d0b97d8f5836dc64b1ee8de2da87366fec2e0ff3d010c29cc0b0eaada2a417e49a88752502a6657c8dad6e6452e8904dab711764b6b0ad7862c58","name":"geotoolbox.png","type":"image/png","lastModified":1663935352031.271,"size":119060},{"id":"13b638418ddfe52cd8bc9b1cfc04c84963b578f268790421f6797be6cb533700f7b6807886a15e59a505b18aaa0b8a7575d6b8eb363f420b2d414d4b85703a0b","href":"https://static.observableusercontent.com/files/13b638418ddfe52cd8bc9b1cfc04c84963b578f268790421f6797be6cb533700f7b6807886a15e59a505b18aaa0b8a7575d6b8eb363f420b2d414d4b85703a0b","name":"banner.png","type":"image/png","lastModified":1663933544970.991,"size":372188},{"id":"dee3b74eb62cd95f9b81924e8883f444742ee23ccf8563f7175f97a045443d1cd1ffe8fd57ccdd6324179c4d89aee72d7b66c8825b4c0e45016a32e7f8c2a8b2","href":"https://static.observableusercontent.com/files/dee3b74eb62cd95f9b81924e8883f444742ee23ccf8563f7175f97a045443d1cd1ffe8fd57ccdd6324179c4d89aee72d7b66c8825b4c0e45016a32e7f8c2a8b2","name":"obs.png","type":"image/png","lastModified":1664205147240.357,"size":22025},{"id":"fce0903f22adc03adf9851eff781e1b92dda65fdded02a21f98a244882b753229544e847521dd01b9e25dda5fc092b9c345d5f720b0efe385a434c65ccec1d73","href":"https://static.observableusercontent.com/files/fce0903f22adc03adf9851eff781e1b92dda65fdded02a21f98a244882b753229544e847521dd01b9e25dda5fc092b9c345d5f720b0efe385a434c65ccec1d73","name":"bertin.png","type":"image/png","lastModified":1664205628805.477,"size":76710},{"id":"a06713be16e4e8f8e08dbfb8239c448bdfd55d73ae86cb4f27e25f37e2f8bbb9c0908480832e859dd170c85258dc8b40330e4dbdd1ce747155273df40a75dd36","href":"https://static.observableusercontent.com/files/a06713be16e4e8f8e08dbfb8239c448bdfd55d73ae86cb4f27e25f37e2f8bbb9c0908480832e859dd170c85258dc8b40330e4dbdd1ce747155273df40a75dd36","name":"npm.png","type":"image/png","lastModified":1664223406970.81,"size":2875},{"id":"959e84ccefe740ba5cc6b82834623e35305bb2406d008e13f22592d61ada8eb71d8655afe71373807d743c4409f05baa9eeeff253360afe9e99dc5abc555658a","href":"https://static.observableusercontent.com/files/959e84ccefe740ba5cc6b82834623e35305bb2406d008e13f22592d61ada8eb71d8655afe71373807d743c4409f05baa9eeeff253360afe9e99dc5abc555658a","name":"geom@3.json","type":"application/json","lastModified":1665999736061.194,"size":372762},{"id":"0e8be3bae63794115b85aa3ac8ae96c191c59fb20272d94e3cd210b62ec5d498e140854d979e8f34189f7f95079c181d24b87318f99ab3af9328812824a893d4","href":"https://static.observableusercontent.com/files/0e8be3bae63794115b85aa3ac8ae96c191c59fb20272d94e3cd210b62ec5d498e140854d979e8f34189f7f95079c181d24b87318f99ab3af9328812824a893d4","name":"cropped-logo_GEOTECA_fond_transparent-1.png","type":"image/png","lastModified":1662455493832.654,"size":17183},{"id":"981d2b20de8b9bb14b25273f0e85648275b71ae600095eb5ea37ceceed28ca45977ee665f32cf6b6758cbf39bc3ae1a6e1169429aab55501c056dc3ed2c4c52d","href":"https://static.observableusercontent.com/files/981d2b20de8b9bb14b25273f0e85648275b71ae600095eb5ea37ceceed28ca45977ee665f32cf6b6758cbf39bc3ae1a6e1169429aab55501c056dc3ed2c4c52d","name":"levels.svg","type":"image/svg+xml","lastModified":1662458497767.449,"size":5910},{"id":"b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","href":"https://static.observableusercontent.com/files/b0df6cea36848b3314484b09d234e467eb1d1f0eb8d240e6b07ad8678b7034145dd411d9082600cdce8f5dbe128054b61fbe1647921cc2224330a2509086ab04","name":"maddison.csv","type":"text/csv","lastModified":1662466388019.413,"size":562020},{"id":"20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","href":"https://static.observableusercontent.com/files/20295e2a91bf54bba01a6d41987a2a5900e655c8d12e941f52bb106c904694223c331bfb4c3668b59d5a257f3823fd8eb8ac25f52f00dabfa2b2de4e0cb51fab","name":"d3jsgithub.png","type":"image/png","lastModified":1662655753028.358,"size":204966},{"id":"081ea7b32adbfe1104e92cb590b394d1aaf29fa55fbcfc36989540aae56838691f25773fdb131cc67f319659fa8d051ef30523bfd84ac7162bc5e93b60643119","href":"https://static.observableusercontent.com/files/081ea7b32adbfe1104e92cb590b394d1aaf29fa55fbcfc36989540aae56838691f25773fdb131cc67f319659fa8d051ef30523bfd84ac7162bc5e93b60643119","name":"esperance.csv","type":"text/csv","lastModified":1662728753784.873,"size":128021},{"id":"22aa1ade50574e944582e0ad4b5304ed1823653061eccbfec9b72aee597eb124b7ceb12f371f346f23a9302fbc0c8e44892b000de9385f99dbd313c3c5772587","href":"https://static.observableusercontent.com/files/22aa1ade50574e944582e0ad4b5304ed1823653061eccbfec9b72aee597eb124b7ceb12f371f346f23a9302fbc0c8e44892b000de9385f99dbd313c3c5772587","name":"co2.csv","type":"text/csv","lastModified":1662728753727.813,"size":76891},{"id":"551708660640602b4a4525de0c1badf892984d42dc619791442454645b140facc347346002e732fff0ed2d3bc90b82469a390e967b24a1ce8784c90fdd534384","href":"https://static.observableusercontent.com/files/551708660640602b4a4525de0c1badf892984d42dc619791442454645b140facc347346002e732fff0ed2d3bc90b82469a390e967b24a1ce8784c90fdd534384","name":"electricite.csv","type":"text/csv","lastModified":1662728753714.079,"size":73020},{"id":"0b5d051c6ea6088de4b34a16e75a307f66fd346e49e52afa9f0d72384f5f682cbaf502f14b04a28ca11c42329c55939e0e6c2fada43fab8c48e4234deb76ba1a","href":"https://static.observableusercontent.com/files/0b5d051c6ea6088de4b34a16e75a307f66fd346e49e52afa9f0d72384f5f682cbaf502f14b04a28ca11c42329c55939e0e6c2fada43fab8c48e4234deb76ba1a","name":"alphabetisation.csv","type":"text/csv","lastModified":1662728753512.229,"size":47977}] 2c:{"id":"d9794ae5bd1a97dc","slug":"geoteca","title":"Visualisation de données spatiales dans Observable avec bertin.js (les midi de Géotéca)","thumbnail":"437d8dadff000278105e69d8a255d4e268662a81a507f14a6a1df35c6769f808","access_level":"public","create_time":"$D2022-09-06T09:11:11.488Z","update_time":"$D2022-10-17T10:11:17.562Z","view_time":null,"first_public_time":"$D2022-09-27T08:58:31.965Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":1742,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"}],"comments":[{"id":"ec037f517b3c0225","reply_to_id":null,"content":"Ah oui ? Mais c'est génial :-)","create_time":"$D2022-09-06T12:30:43.508Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}}],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"4f8e90870d4fae9b","slug":"tutos","title":"Courses & Training","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"title":"Visualisation de données spatiales dans Observable avec bertin.js (les midi de Géotéca)","cells":[{"id":0,"value":"# Visualisation de données spatiales dans Observable avec [bertin.js](https://github.com/neocarto/bertin) (les midi de Géotéca)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":3,"value":"croppedLogo_geoteca_fond_transparent1 = FileAttachment(\"cropped-logo_GEOTECA_fond_transparent-1.png\").image()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"*Ce document est le support de la présentation réalisée le 27 septembre 2022 dans les locaux de [Géotéca](http://geoteca.u-paris.fr/). N'hésitez pas à la partager, la modifier et la réutiliser.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1449,"value":"

SOMMAIRE

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1466,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1554,"value":"{\n const button = html``;\n button.onclick = () => intro.parentElement.requestFullscreen();\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1548,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"

Et pourquoi pas le javascript ?

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1374,"value":"

HISTORIQUE

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1392,"value":"

CARACTERISTIQUES DU LANGAGE

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1394,"value":"

POINTS FAIBLES 👎

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1399,"value":"

POINTS FORTS 👍

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1405,"value":"

JAVASCRIPT POUR LA SCIENCE DES DONNÉES ?

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1429,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"

Observable, kezako ?

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1442,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"

LES NOTEBOOKS

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"

LES CELLULES

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":246,"value":"Un notebook est constitué d'un ensemble de cellules qui communiquent entre elles. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":251,"value":"

JAVASCRIPT

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":253,"value":"a = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"b = 6","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"c = a + b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":271,"value":"sum(10, 30)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"multi = (a, b) => a * b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"multi(3, 8)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"

MARKDOWN

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

HTML

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":293,"value":"

FORMULES

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

CANVAS

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":306,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"

SVG

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":312,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":273,"value":"

LES INPUTS

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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","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","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","output":"$undefined","database":"$undefined"},{"id":334,"value":"

TOUT EST RÉACTIF 🔥

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":337,"value":"viewof slider1 = Inputs.range([0, 100], {\n label: \"Choisissez une valeur\",\n step: 1\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"slider1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"La valeur choisie est **${slider1}**. Trop cool, hein ?","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":372,"value":"viewof color = Inputs.color({ label: \"Couleur\", value: \"#4ab58c\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":506,"value":"

VERSIONNEMENT

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":776,"value":"

FORKS

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":516,"value":"

COLLABORER

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":523,"value":"On peut ajouter des commentaires","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1501,"value":"

TEAMS

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":525,"value":"On peut travailler à 5 de façon privée et à autant qu'on veut de façon publique ([free teams](https://observablehq.com/@observablehq/introducing-free-teams)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1507,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":514,"value":"

IMPORTS

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":786,"value":"Tous les notebooks peuvent communiquer entre eux.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":789,"value":"import { sketch } from \"@neocartocnrs/cartographic-doodles\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"sketch(world, { fill: \"none\", k: k })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1023,"value":"

REQUIRE

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1645,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1512,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1025,"value":"geo = require(\"geotoolbox\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"geo.border(world)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"

IMPORTER DES DONNÉES

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":470,"value":"On importe les données comme des pièces jointes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":465,"value":"maddison = FileAttachment(\"maddison.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":499,"value":"Inputs.table(maddison)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"On peut aller chercher des données en ligne directement via leur url.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":456,"value":"cities = d3\n .csv(\n\"https://raw.githubusercontent.com/neocarto/resources/master/datasets/simplemaps_worldcities_basicv1.73/worldcities.csv\"\n )\n .then((r) => r.filter((d) => +d.population > 1000000))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"Inputs.table(cities)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"On peut aussi aller les chercher sur notre ordinateur en local. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":475,"value":"viewof file = Inputs.file({label: \"Data\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":479,"value":"world = d3.json(\n \"https://raw.githubusercontent.com/neocarto/bertin/main/data/world.geojson\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":503,"value":"view(world)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"

BASES DE DONNÉES

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":689,"value":"select * from electricite","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"dbtable","database":"var:db"},{"id":718,"value":"dbtable","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"

CLOUD FILES

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":747,"value":"Seulement pour les notebooks privés.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":536,"value":"

SAUVEGARDER

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":823,"value":"On peut sauvegarder l'ensemble de son notebook en un clic. Et on peut l’exécuter en dehors d'Observable. Car le runtime, est open source.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":821,"value":"

PUBLIER

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":538,"value":"Tant qu'on ne les publie pas, les notebooks sont privés. On peut leur attribuer une licence. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":840,"value":"

EXPORTER

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"

INTEROPÉRABILITÉ

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1668,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"

D3.js

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":608,"value":"d3jsgithub = FileAttachment(\"d3jsgithub.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":613,"value":"myData = [10, 3, 20, 20, 10]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":648,"value":"Ca permet de faire des graphiques divers et variés","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":630,"value":"Grace au module d3.geo, ça marche aussi avec des données géométriques","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":633,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"

Observable Plot

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":872,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1053,"value":"data = FileAttachment(\"data.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"Inputs.table(data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"

MARKS

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1059,"value":"Plot.plot({\n marks: [Plot.tickX(data, { x: \"gdppc\" })]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1063,"value":"Plot.plot({\n marks: [Plot.boxX(data, { x: \"gdppc\" })]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1156,"value":"

TRANSFORMATIONS

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1160,"value":"Plot.plot({\n marks: [Plot.dotX(data, { x: \"gdppc\", fill: \"black\" })]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1078,"value":"

FACETTES

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1186,"value":"

\"GAPMINDER\" EN QUELQUES LIGNES

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1189,"value":"Inputs.table(maddison)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1740,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1194,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"viewof logx = Inputs.toggle({ label: \"Log (x)\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"viewof logy = Inputs.toggle({ label: \"Log (y)\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1208,"value":"# ${year}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"

FEUILLES DE TRICHE

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

Bertin.js

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

PRINCIPE

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":436,"value":"

REQUIRE

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":169,"value":"```js\nbertin = require(\"bertin@1.1.0\")\n```","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1227,"value":"

DONNÉES ET FONDS DE CARTES

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

RÉALISER UNE CARTE : la fonction draw()

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1221,"value":"Dans bertin.js, chaque couche est associée à un type.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"viewof k2 = Inputs.range([2, 100], { label: \"k\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1540,"value":"bertin.draw({\n params: {\n projection: \"Bertin1953\"\n //projection: \"Berghaus\"\n //projection: \"HoaXiaoguang\"\n //projection: \"Spilhaus\"\n //projection: \"Polar\"\n },\n layers: [\n { type: \"header\", text: \"La population mondiale\" },\n {\n type: \"bubble\",\n geojson: countries,\n values: \"pop\",\n fill: {\n type: \"choro\",\n values: \"gdppc\",\n colors: \"RdYlGn\",\n leg_x: 100,\n leg_y: 100,\n leg_round: 0\n },\n //dorling: true,\n k: k2,\n leg_x: 650,\n leg_y: 400,\n leg_round: 0,\n tooltip: [\"$name\", \"$pop\"]\n },\n { geojson: countries, fill: \"white\", fillOpacity: 0.5, stroke: \"none\" },\n { type: \"graticule\" },\n { type: \"outline\" }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":406,"value":"

EXEMPLES

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":399,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"

CODE & DOCUMENTATION

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":417,"value":"https://github.com/neocarto/bertin","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":22,"value":"

Conclusion

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":540,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":640,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":396,"value":"import { previews } from \"@d3/gallery\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"Reveal = require(\"reveal.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":661,"value":"import { DuckDBClient } from \"@cmudig/duckdb\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":664,"value":"db = DuckDBClient.of({ co2, alphabetisation, electricite, esperance })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":654,"value":"alphabetisation = FileAttachment(\"alphabetisation.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":656,"value":"esperance = FileAttachment(\"esperance.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"import {Icicle} from \"@d3/icicle\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1244,"value":"import { logo } from \"@neocartocnrs/bertin-logo\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1264,"value":"bertin = require(\"bertin@1.1.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2d:"$2c:body"