31:T46a,bertin.draw({ params: { projection: "InterruptedSinusoidal" }, // 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:T488,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", k: radiusmax, dorling: dorling, 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 ] })33:[{"id":"bc034e10ddaded99bf232606ffea9101ebf194fe3baaeb41bc28f79a4e20427d98c30dd3e2a711ed53bc55eb660d23e2a13374b4b428039a0bf87ce224aa2abd","href":"https://static.observableusercontent.com/files/bc034e10ddaded99bf232606ffea9101ebf194fe3baaeb41bc28f79a4e20427d98c30dd3e2a711ed53bc55eb660d23e2a13374b4b428039a0bf87ce224aa2abd","name":"attach.png","type":"image/png","lastModified":1696235471114.366,"size":7147},{"id":"1ed9b03b746abf7a9386d29470bf4a638463c5fc9131b0794a5ef8c4a2c20937ee43f7df1d5b4fc9601fad9c3f6914b8224d60ebe17b22525800cd2a33675e16","href":"https://static.observableusercontent.com/files/1ed9b03b746abf7a9386d29470bf4a638463c5fc9131b0794a5ef8c4a2c20937ee43f7df1d5b4fc9601fad9c3f6914b8224d60ebe17b22525800cd2a33675e16","name":"bertincode@1.svg","type":"image/svg+xml","lastModified":1696235471114.366,"size":20082},{"id":"04b776ac337ad3dfcd18a21c6ccc2617a3e46440273b287f2e26e62488dfd52d6b56da1b6082753de5f5e654ae06c08841d6af1f803b3f77920b5cc4b3dc53c1","href":"https://static.observableusercontent.com/files/04b776ac337ad3dfcd18a21c6ccc2617a3e46440273b287f2e26e62488dfd52d6b56da1b6082753de5f5e654ae06c08841d6af1f803b3f77920b5cc4b3dc53c1","name":"data.csv","type":"text/csv","lastModified":1696235471114.366,"size":11101},{"id":"a1db6ed14631c5980b7b730b067e5cddcbe226a1547f9ea4cfac591c12b772eea8b77911f10618634b76c3f12c7db66cc6fd244b76b8b862738cae3b65bc2da1","href":"https://static.observableusercontent.com/files/a1db6ed14631c5980b7b730b067e5cddcbe226a1547f9ea4cfac591c12b772eea8b77911f10618634b76c3f12c7db66cc6fd244b76b8b862738cae3b65bc2da1","name":"geom.geojson","type":"application/geo+json","lastModified":1696235471114.366,"size":765648},{"id":"981d2b20de8b9bb14b25273f0e85648275b71ae600095eb5ea37ceceed28ca45977ee665f32cf6b6758cbf39bc3ae1a6e1169429aab55501c056dc3ed2c4c52d","href":"https://static.observableusercontent.com/files/981d2b20de8b9bb14b25273f0e85648275b71ae600095eb5ea37ceceed28ca45977ee665f32cf6b6758cbf39bc3ae1a6e1169429aab55501c056dc3ed2c4c52d","name":"levels.svg","type":"image/svg+xml","lastModified":1696235471114.366,"size":5910}] 2f:{"title":"Faire des cartes avec bertin","cells":[{"id":0,"value":"# Faire des cartes avec `bertin`","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 bibliothèque 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":712,"value":"

DOCUMENTATION ET EXEMPLES

","pinned":false,"hidden":false,"mode":"md"},{"id":667,"value":"- **`Documentation`** - https://github.com/neocarto/bertin\n- **`exemples`** - https://observablehq.com/collection/@neocartocnrs/bertin\n- **`présentation (Sageo 2023)`** - 👇","pinned":false,"hidden":false,"mode":"md"},{"id":657,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":699,"value":"

PRINCIPES

","pinned":false,"hidden":false,"mode":"md"},{"id":53,"value":"

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

CHARGER LA BIBLIOTHÈQUE

","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":"bertin = require(\"bertin\")","pinned":false,"hidden":true,"mode":"ojs"},{"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":"

LA JOINTURE

","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":"

LA FONCTION DRAW

","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":"

UNE CARTE SIMPLE

","pinned":false,"hidden":false,"mode":"md"},{"id":249,"value":"bertin.draw({\n layers: [\n {\n geojson: world,\n fill: \"blue\",\n stroke: \"green\"\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 },\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 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 stroke: {\n type: \"typo\",\n values: \"region\" // <- données qualitatives\n },\n fill: \"none\",\n strokeWidth: 2\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":717,"value":"

VUE GLOBE

","pinned":false,"hidden":false,"mode":"md"},{"id":767,"value":"map2 = bertin.draw({\n params: { margin: [0, 0, 0, 80], projection: \"Globe(-50,-30,0)\", width: 600 },\n layers: [\n {\n id: \"choro\",\n geojson: world,\n strokeWidth: 0.3,\n fill: {\n type: \"choro\",\n values: \"gdppc\",\n colors: \"RdYlGn\",\n method: \"quantile\",\n nbreaks: 5,\n leg_x: 20,\n leg_y: 20,\n leg_round: 0,\n leg_title: \"GDP per capita\"\n },\n tooltip: [\n \"$NAMEfr\",\n (d) => \"gdp per capita:\" + Math.round(d.properties.gdppc)\n ]\n },\n\n { type: \"geolines\", stroke: \"white\" },\n { type: \"outline\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":721,"value":"

RÉACTIVITÉ

","pinned":false,"hidden":false,"mode":"md"},{"id":723,"value":"Pour rendre une carte réactive, on va utiliser les possibilités d'Observable. ","pinned":false,"hidden":false,"mode":"md"},{"id":728,"value":"viewof radiusmax = Inputs.range([1, 100], {\n label: \"Taille des cercles\",\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"viewof dorling = Inputs.toggle({ label: \"Dorling\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":741,"value":"

UPDATE

","pinned":false,"hidden":false,"mode":"md"},{"id":743,"value":"Pour plus de réactivité, la fonction update permet de modifier une partie précise de la carte sans forcément tout redessiner. Seuls les paramètres soulignés dans la documentation sont *updatables*.","pinned":false,"hidden":false,"mode":"md"},{"id":750,"value":"viewof k = Inputs.range([10, 60], { label: \"radius\", step: 1, value: 40 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":752,"value":"viewof val = Inputs.radio([\"pop\", \"gdp\"], { label: \"values\", value: \"pop\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"viewof toggle = Inputs.toggle({ label: \"Dorling\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":745,"value":"map3 = bertin.draw({\n layers: [\n {\n id: \"bub\",\n geojson: world,\n type: \"bubble\",\n values: \"pop\",\n dorling: false,\n k: 40,\n leg_x: 20,\n leg_y: 160,\n leg_round: 0,\n leg_title: \"Population\",\n tooltip: [\n \"$name\",\n (d) =>\n `population: ${Math.round(d.properties.pop / 1000000)} million inh.`,\n (d) =>\n `gdp: ${Math.round(d.properties.gdp / 10000000000) / 100} billion $.`\n ],\n fill: \"#e04031\"\n },\n {\n geojson: world,\n fill: \"white\",\n fillOpacity: 0.5,\n stroke: \"none\"\n },\n { type: \"graticule\" },\n { type: \"outline\" }\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":760,"value":"map3.update({\n id: \"bub\",\n attr: \"k\",\n value: k,\n duration: 500\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"map3.update({\n id: \"bub\",\n attr: \"values\",\n value: val,\n legend: val == \"pop\" ? \"Population\" : \"Wealth\",\n duration: 500\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":762,"value":"map3.update({\n id: \"bub\",\n attr: \"dorling\",\n value: toggle,\n duration: 500\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":634,"value":"

GALERIE

","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":686,"value":"","pinned":false,"hidden":false,"mode":"md"}],"files":"$W33","stdlib":"1","titling":"auto"}