31:T45c,bertin.draw({ params: { projection: "Eckert3" }, // Paramètres généraux (marges, projection, etc.) layers: [ { type: "header", text: "La population mondiale" }, // Titre { type: "footer", text: "Fait avec bertin.js", anchor: "middle" }, // Source // COUCHE 1 (cercles) { type: "bubble", geojson: world, // géometrie values: "pop", // variable fill: "#b566ac", // couleur des cercles stroke: "white", // couleur de contour des cercles strokeWidth: 0.5, // épaisseur tooltip: ["$name", "$pop"], // Infobulle leg_x: 100, // position de la légende (x) leg_y: 250, // position de la légende (y) leg_title: "Population des\npays en 2000", // Titre de la légende leg_round: -3 // arrondi }, // COUCHE 1 (pays) { geojson: world, // géométrie fill: "white", // couleur de fond stroke: "none", // cauleur de contour (aucun) fillOpacity: 0.5 // Opacité }, { type: "graticule" }, // Lignes de latitude et longitude { type: "outline" } // coutour de la Terre dans la projection ] })32:T472,bertin.draw({ params: { projection: "Eckert3" }, // Paramètres généraux (marges, projection, etc.) layers: [ { type: "header", text: title }, // Titre { type: "footer", text: "Fait avec bertin.js", anchor: "middle" }, // Source // COUCHE 1 (cercles) { type: "bubble", k: k, // <- ICI dorling: toggle, geojson: world, // géometrie values: "pop", // variable fill: color, // couleur des cercles stroke: "white", // couleur de contour des cercles strokeWidth: 0.5, // épaisseur tooltip: ["$name", "$pop"], // Infobulle leg_x: 100, // position de la légende (x) leg_y: 250, // position de la légende (y) leg_title: "Population des\npays en 2000", // Titre de la légende leg_round: -3 // arrondi }, // COUCHE 1 (pays) { geojson: world, // géométrie fill: "white", // couleur de fond stroke: "none", // cauleur de contour (aucun) fillOpacity: 0.5 // Opacité }, { type: "graticule" }, // Lignes de latitude et longitude { type: "outline" } // coutour de la Terre dans la projection ] })33:[{"id":"04b776ac337ad3dfcd18a21c6ccc2617a3e46440273b287f2e26e62488dfd52d6b56da1b6082753de5f5e654ae06c08841d6af1f803b3f77920b5cc4b3dc53c1","href":"https://static.observableusercontent.com/files/04b776ac337ad3dfcd18a21c6ccc2617a3e46440273b287f2e26e62488dfd52d6b56da1b6082753de5f5e654ae06c08841d6af1f803b3f77920b5cc4b3dc53c1","name":"data.csv","type":"text/csv","lastModified":1663753978390.768,"size":11101},{"id":"bc034e10ddaded99bf232606ffea9101ebf194fe3baaeb41bc28f79a4e20427d98c30dd3e2a711ed53bc55eb660d23e2a13374b4b428039a0bf87ce224aa2abd","href":"https://static.observableusercontent.com/files/bc034e10ddaded99bf232606ffea9101ebf194fe3baaeb41bc28f79a4e20427d98c30dd3e2a711ed53bc55eb660d23e2a13374b4b428039a0bf87ce224aa2abd","name":"attach.png","type":"image/png","lastModified":1663754057329.035,"size":7147},{"id":"1ed9b03b746abf7a9386d29470bf4a638463c5fc9131b0794a5ef8c4a2c20937ee43f7df1d5b4fc9601fad9c3f6914b8224d60ebe17b22525800cd2a33675e16","href":"https://static.observableusercontent.com/files/1ed9b03b746abf7a9386d29470bf4a638463c5fc9131b0794a5ef8c4a2c20937ee43f7df1d5b4fc9601fad9c3f6914b8224d60ebe17b22525800cd2a33675e16","name":"bertincode@1.svg","type":"image/svg+xml","lastModified":1658222288450.08,"size":20082},{"id":"a1db6ed14631c5980b7b730b067e5cddcbe226a1547f9ea4cfac591c12b772eea8b77911f10618634b76c3f12c7db66cc6fd244b76b8b862738cae3b65bc2da1","href":"https://static.observableusercontent.com/files/a1db6ed14631c5980b7b730b067e5cddcbe226a1547f9ea4cfac591c12b772eea8b77911f10618634b76c3f12c7db66cc6fd244b76b8b862738cae3b65bc2da1","name":"geom.geojson","type":"application/geo+json","lastModified":1663753978647.396,"size":765648},{"id":"981d2b20de8b9bb14b25273f0e85648275b71ae600095eb5ea37ceceed28ca45977ee665f32cf6b6758cbf39bc3ae1a6e1169429aab55501c056dc3ed2c4c52d","href":"https://static.observableusercontent.com/files/981d2b20de8b9bb14b25273f0e85648275b71ae600095eb5ea37ceceed28ca45977ee665f32cf6b6758cbf39bc3ae1a6e1169429aab55501c056dc3ed2c4c52d","name":"levels.svg","type":"image/svg+xml","lastModified":1658216357346.61,"size":5910}] 2f:{"title":"Faire des cartes avec bertin.js","cells":[{"id":0,"value":"# Faire des cartes avec bertin.js","pinned":false,"hidden":false,"mode":"md"},{"id":777,"value":"","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"## bertin.js, kezako ?","pinned":false,"hidden":false,"mode":"md"},{"id":393,"value":"getlogo(150, true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"[bertin.js](https://github.com/neocarto/bertin) est une librairie (un ensemble de fonctionnalités) écrite en [javascript](https://developer.mozilla.org/fr/docs/Web/JavaScript) qui permet de réaliser des cartes thématiques pour le web. Son développement s'appuie en grande partie sur le librairie javascript [d3.js](https://d3js.org/) développée par Mike Bostock depuis 10 ans. ","pinned":false,"hidden":false,"mode":"md"},{"id":667,"value":"- **`Documentation`** - https://github.com/neocarto/bertin\n- **`exemples`** - https://observablehq.com/collection/@neocartocnrs/bertin","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":69,"value":"## Installer bertin.js dans Observable","pinned":false,"hidden":false,"mode":"md"},{"id":84,"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":236,"value":"```js\nbertin = require(\"bertin\")\n```","pinned":false,"hidden":false,"mode":"md"},{"id":350,"value":"## Ajouter des données","pinned":false,"hidden":false,"mode":"md"},{"id":360,"value":"On attache les données comme des pièces jointes.","pinned":false,"hidden":false,"mode":"md"},{"id":353,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":348,"value":"geom = FileAttachment(\"geom.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"data = FileAttachment(\"data.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"## Joindre les données attributaires et le fond de carte","pinned":false,"hidden":false,"mode":"md"},{"id":376,"value":"Avec **bertin.match()** on peut tester et visualiser la compatibilité des données.","pinned":false,"hidden":false,"mode":"md"},{"id":374,"value":"bertin.match(geom, \"ISO3\", data, \"id\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"Avec **bertin.merge()** on effectue la jointure en tant que tel.","pinned":false,"hidden":false,"mode":"md"},{"id":382,"value":"world = bertin.merge(geom, \"ISO3\", data, \"id\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"## Faire une carte avec bertin.js","pinned":false,"hidden":false,"mode":"md"},{"id":239,"value":"Tout est dans la fonction draw.","pinned":false,"hidden":false,"mode":"md"},{"id":223,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":241,"value":"## Un exemple simple","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"bertin.draw({\n layers: [\n {\n geojson: world,\n fill: \"#CCC\",\n stroke: \"blue\"\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":413,"value":"## Représenter des données quantitatives absolues","pinned":false,"hidden":false,"mode":"md"},{"id":415,"value":"Pour représenter des données de stock, on utilise le type \"bubble\"","pinned":false,"hidden":false,"mode":"md"},{"id":419,"value":"bertin.draw({\n layers: [\n {\n type: \"bubble\",\n geojson: world,\n values: \"pop\", // <- données quantitatives absolues\n fill: \"red\",\n leg_x: 75,\n leg_y: 250,\n leg_round: -2,\n leg_title: \"coucou\"\n },\n {\n geojson: world,\n fill: \"#CCC\"\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"## Représenter des données quantitatives relatives","pinned":false,"hidden":false,"mode":"md"},{"id":436,"value":"Pour représenter des données de stock, on utilise le type \"choro\" dans la propriété *fill*.","pinned":false,"hidden":false,"mode":"md"},{"id":442,"value":"bertin.draw({\n layers: [\n {\n geojson: world,\n fill: {\n type: \"choro\",\n values: \"gdppc\", // <- données quantitatives realtives\n leg_x: 75,\n leg_y: 250,\n leg_round: -2\n }\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":434,"value":"## Représenter des données qualitatives","pinned":false,"hidden":false,"mode":"md"},{"id":453,"value":"Pour représenter des données qualitatives nominales, on utilise le type \"typo\" dans la propriété *fill*.","pinned":false,"hidden":false,"mode":"md"},{"id":455,"value":"bertin.draw({\n layers: [\n {\n geojson: world,\n //strokeWidth: 10,\n fill: {\n type: \"typo\",\n values: \"region\", // <- données qualitatives\n leg_x: 75,\n leg_y: 250\n }\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":439,"value":"## Combinaisons","pinned":false,"hidden":false,"mode":"md"},{"id":459,"value":"Il est tout à fait possible de combiner les représentations. ","pinned":false,"hidden":false,"mode":"md"},{"id":467,"value":"Par superposition de couches.","pinned":false,"hidden":false,"mode":"md"},{"id":473,"value":"bertin.draw({\n layers: [\n // COUCHE 1\n {\n type: \"bubble\",\n geojson: world,\n values: \"pop\", // <- données quantitatives absolues\n fill: \"none\",\n stroke: \"black\",\n strokeWidth: 1.5\n },\n //COUCHE 2\n {\n geojson: world,\n fill: {\n type: \"typo\",\n values: \"region\" // <- données qualitatives\n }\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"Ou en coloriant les symboles.","pinned":false,"hidden":false,"mode":"md"},{"id":461,"value":"bertin.draw({\n layers: [\n {\n type: \"bubble\",\n geojson: world,\n values: \"pop\", // <- données quantitatives absolues\n fill: {\n type: \"typo\",\n values: \"region\" // <- données qualitatives\n }\n },\n {\n geojson: world,\n fill: \"#CCC\"\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"## Habillage et mise en page","pinned":false,"hidden":false,"mode":"md"},{"id":261,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":681,"value":"## Rendre la carte réactive","pinned":false,"hidden":false,"mode":"md"},{"id":754,"value":"viewof color = Inputs.color({ label: \"Favorite color\", value: \"#4682b4\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":757,"value":"viewof title = Inputs.text({ label: \"Name\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":685,"value":"viewof k = Inputs.range([10, 100], { label: \"k\", step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":761,"value":"viewof toggle = Inputs.toggle({label: \"Active\", value: true})","pinned":true,"hidden":false,"mode":"ojs"},{"id":683,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":655,"value":"## Présentation des différentes fonctions","pinned":false,"hidden":false,"mode":"md"},{"id":657,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":634,"value":"## Gallerie","pinned":false,"hidden":false,"mode":"md"},{"id":629,"value":"gallery","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":528,"value":"import { gallery } from \"@neocartocnrs/hello-bertin-js\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":391,"value":"import { getlogo } from \"@neocartocnrs/bertin-logo\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"bertin = require(\"bertin@1.4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"import { disclaimer } from \"d41fbc44e11a58e6\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}