25:["$","title",null,{"children":"Hello Bertin.js | Nicolas Roelandt | Observable"}] 49:T1895,gallery = previews([ { path: "@neocartocnrs/hello-bertin-js", thumbnail: "66e441ced4a189c18031171b7a40ae3f833742f1d60739caaeb0366bd9ce4d9c", title: "Hello bertin" }, { path: "@neocartocnrs/bertin-logo", thumbnail: "70ef324f7a57ff526399c7d7c0e3523e1087dd95ec5e19e898d9997202829d2d", title: "The logo" }, { path: "@neocartocnrs/bertin-js-quickdraw-table2geo", thumbnail: "848e842d1c3db603ef79c1f622a4ea4e8e73eefc61c728a1918b37dec9724baa", title: "Quickdraw & table2geo" }, { path: "@neocartocnrs/bertin-js-layer-types-in-brief", thumbnail: "8294764c5aa59dcc565db4e5a24fc2eb2568268013708e0bbc71ed73bc796cdd", title: "Layer types in brief" }, { path: "@neocartocnrs/bertin-js-symbols", thumbnail: "aa020c3837313798403f2f0f799cb12e67a6313712e1bc3f309fc9b4fcf4c638", title: "Symbols" }, { path: "@neocartocnrs/bertin-js-tooltips", thumbnail: "7ed784e17d5763e0aca0226cfe77214e7f3fbe53a8f09295cf29df67cc46f749", title: "Tooltips" }, { path: "@neocartocnrs/bertin-js-texts", thumbnail: "eaf1c06d58a342fbd21ccc9a8383f495ee3e2892093c24c02efa8e31b29b09bc", title: "Texts" }, { path: "@neocartocnrs/bertin-js-match-and-merge", thumbnail: "e3b6b1e695f9e8df558478ac6a01a6b80f645885a7766bfa804425dbace03bff", title: "Math & merge" }, { path: "@neocartocnrs/bertin-js-prop-symbols", thumbnail: "e9f0eabd609ad6aa7a036c1fbe806005980ad6d84cc5aaf3d929a97a01f964d7", title: "Bubbles" }, { path: "@neocartocnrs/bertin-js-typo", thumbnail: "1b5332147298a57ab8f8114f46f1ec62b5b8cd7c28b273e7b8a1622cc77b476b", title: "Typologies" }, { path: "@neocartocnrs/bertin-js-chropoleth", thumbnail: "94b25df3a8d7d4d4e2d431ff4f862aa7b163b7379c138385caff66f1167da8ee", title: "Choropleth" }, { path: "@neocartocnrs/bertin-js-stock-typo", thumbnail: "b30f86263bf9078b513a0f791d6fd8992b81c49e4bf67d3c56c7bfcabe6b76aa", title: "Stock & typo" }, { path: "@neocartocnrs/bertin-js-stock-choro", thumbnail: "6092f001e916f001dd24466efa8109cad6f8c042c6dc0f5ea2dfed65f3475bb5", title: "Stock & choro" }, { path: "@neocartocnrs/bertin-js-dorling-cartogram", thumbnail: "eba0d6fa4dd88537c60e25afb4f9cec4394e533662e8192e99c9f74f43199020", title: "Dorling cartogram" }, { path: "@neocartocnrs/bertin-js-prop-squares", thumbnail: "d1aedcbb6c7e412f515614657e9551b51b978de771f0e07ee98a4e79e0947b5e", title: "Demers cartogram" }, { path: "@neocartocnrs/bertin-js-spikes", thumbnail: "3e77c293c16215abe91bd1428cbfbb72cd9a651b260515b3932a4dfd4e73bd05", title: "Spikes" }, { path: "@neocartocnrs/bertin-js-dots-cartograms", thumbnail: "3746ad035df9683ac8f0dbce360a0f19e146699d1c69d1641d84bc87ff1b596e", title: "Dots cartogram" }, { path: "@neocartocnrs/bertin-js-mashroom", thumbnail: "ce2ce2e61acfc5d0c0b6e3e4bdc970209cde766780acfa9cc9555aaffe35968c", title: "Mashroom" }, { path: "@neocartocnrs/bertin-js-links", thumbnail: "294f06f5ec90bf0e0960a84240d52d4d84c7bdaf3769de59a394ef1067a00a60", title: "Links" }, { path: "@neocartocnrs/bertin-js-thickness", thumbnail: "deffd3d2d4c7c065f61444d1ebd70bc6337a90e096a5c53ee65aafbfeec27a14", title: "Networks & discontinuities" }, { path: "@neocartocnrs/bertin-js-dot-density-map-bertin", thumbnail: "82bf50e9e0aa6a65fc5c0a8470ecd7dbc369f1d2476ca395569a3c1af1fbfeb9", title: "Dots" }, { path: "@neocartocnrs/bertin-js-regular-bubbles", thumbnail: "78d27904c11f56427bfd4bd50daed8fcb839f8558901497c0c303a3198bb4f72", title: "Bertin dots" }, { path: "@neocartocnrs/bertin-js-tiles", thumbnail: "02d0cbcac7fbe5521aa13d1df201ad5fbd6d8c8eb1790e6bf4f94ab76fa8a840", title: "Mercator tiles" }, { path: "@neocartocnrs/smooth", thumbnail: "3ec03a066a86cc6d4ecdf0a837866f69392c0eeaaade01691b78c0e435ad7853", title: "Smooth" }, { path: "@neocartocnrs/ridge", thumbnail: "41194615039fd03e8f2a872e7f9a302f5b8cad8623eb060572005d26b1ea3a68", title: "Ridge" }, { path: "@neocartocnrs/bertin-js-regular-grid", thumbnail: "4db480fac5cb3a9dbaa27b51021bcab3905a5b39c7fe183ceb8c94045a7bc32e", title: "Regular Grid" }, { path: "@neocartocnrs/bertin-js-regular-bubbles", thumbnail: "b0e30e6dbafc0d0c96ebbd27524a2f6c37e1def4aed33afe0d2bb595933ac3b0", title: "Regular Bubbles" }, { path: "@neocartocnrs/bertin-js-regular-squares", thumbnail: "55292e648d5a4018875c329abbe87dbc848343ed14cb9a3dff1b6149bc06ed1b", title: "Regular Squares" }, { path: "@neocartocnrs/bertin-js-location-map", thumbnail: "849a62eb51930281a1ea25c58263cec517135ff4e0e95fc71ad39380e97aa8ac", title: "Location map" }, { path: "@neocartocnrs/waterlines", thumbnail: "c842082c518ec752eb08a2747cff7fe1018a7f6e278ea1b7b9c52e6e26ea72e5", title: "Waterlines" }, { path: "@neocartocnrs/several-ways-to-represent-dead-and-missing-migrants-in-the-m", thumbnail: "7a50ecb070f74b045fe5e61ea7b9587881770a6e7fe960374c5f33c469556496", title: "Multi representation" }, { path: "@neocartocnrs/combine-bertin-with-plot-and-d3js", thumbnail: "25366aa7c8e8c7c7eb9e75d188b688dfe1eb7d3f65c8946a53637f8e68052f80", title: "Custom types & interoperability" }, { path: "@neocartocnrs/bertin-js-projections", thumbnail: "98f1325f5cf4e5b22d9b1bf740991dc3977414d601f87660169c433a240b7a77", title: "Map projections" }, { path: "@neocartocnrs/bertins-js-deal-with-with-geojson-properties", thumbnail: "c9df8b547ed2659c424146c6cc0b475f643deca6e7fc39f22043eb442156ef04", title: "Attribute data & properties" }, { path: "@neocartocnrs/bertin-path", thumbnail: "29d97be834a464cc0e04fbb5ea7aca2c191eb9ecf43f29a7ff2007dbc5a61124", title: "SVG path" }, { path: "@neocartocnrs/sheet-cheat-bertin", thumbnail: "79be30aeb4069ec8f5934fcd562399bd706bcb12c82673c338b54a11a8587c5b", title: "Sheet cheat" } ])4a:[{"id":"253bccd929b7493936ef9d50252ac45044a97b9053897acc0116adf7c999a89aea5ce6982888eae7e2644c6ecbc3281f0e964760e2fcdcad57f1ab6be577bce8","href":"https://static.observableusercontent.com/files/253bccd929b7493936ef9d50252ac45044a97b9053897acc0116adf7c999a89aea5ce6982888eae7e2644c6ecbc3281f0e964760e2fcdcad57f1ab6be577bce8","name":"AUS@1.geojson","type":"application/geo+json","lastModified":1687513380601.917,"size":623543},{"id":"97444418350bcc5027e5ed8d3e439bb091db265e32bed5f4194c27d2e1c9058f7d0eeb8264da3267cd94954049f22618319a9bbc8c8d6247436a1d0e5566c001","href":"https://static.observableusercontent.com/files/97444418350bcc5027e5ed8d3e439bb091db265e32bed5f4194c27d2e1c9058f7d0eeb8264da3267cd94954049f22618319a9bbc8c8d6247436a1d0e5566c001","name":"AUS_ports.geojson","type":"application/geo+json","lastModified":1687513380601.917,"size":11914},{"id":"09f6ea9eca5c491110c75c445de36d256cc0eef20f49013280a681f91dd98fdc4caf9babe31f0cc700101b3efe92f25b124288a207152096eea1d32ba9594d52","href":"https://static.observableusercontent.com/files/09f6ea9eca5c491110c75c445de36d256cc0eef20f49013280a681f91dd98fdc4caf9babe31f0cc700101b3efe92f25b124288a207152096eea1d32ba9594d52","name":"AUS_roads.geojson","type":"application/geo+json","lastModified":1687513380601.917,"size":933366}] 29:{"id":"42ddc9d69111534f","slug":null,"title":"Hello Bertin.js","thumbnail":"8a8a5623b30509f01c8fab9ffa357e8a4e56366a704398217b8aa7792d785cd6","access_level":"public","create_time":"$D2023-06-23T09:43:00.601Z","update_time":"$D2023-06-23T09:43:00.601Z","view_time":null,"first_public_time":"$D2023-06-23T09:43:00.601Z","has_unpublished_edits":null,"fork":{"id":"d59855d7cc99f6e5","slug":"hello-bertin-js","title":"Hello Bertin.js","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"stars":0,"starred":false,"owner":{"type":"team","id":"e597a95876cd8b1d","login":"nicolas-roelandt","name":"Nicolas Roelandt","avatar_url":"https://avatars-next.observableusercontent.com/3d4d85d075b491f258c368c19985306c58aacde95f35142a13affa0324adb641","tier":"starter_2024","bio":"","following":false},"version":1464,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bc974906b980d52b","login":"nicolas-roelandt","name":"Nicolas Roelandt","avatar_url":"https://avatars-next.observableusercontent.com/3d4d85d075b491f258c368c19985306c58aacde95f35142a13affa0324adb641","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"bc974906b980d52b","login":"nicolas-roelandt","name":"Nicolas Roelandt","avatar_url":"https://avatars-next.observableusercontent.com/3d4d85d075b491f258c368c19985306c58aacde95f35142a13affa0324adb641","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Hello Bertin.js","cells":[{"id":0,"value":"# Hello Bertin.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1309,"value":"getlogo(120)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"[bertin.js](https://github.com/neocarto/bertin) is an easy to use wrapper around [d3js](https://github.com/d3/d3) to facilitate the process of **making thematic maps**. The principle is to work with layers stacked on each other. As in a GIS, the layers that are displayed above are placed at the top in the code, the layers that are displayed below are placed at the bottom in the code. The layers that can be displayed are of [several types](https://observablehq.com/@neocartocnrs/bertin-js-layer-types-in-brief): header, footer, graticule, outline, choro, typo, prop, shadow, scalebar, text... Each type has its own parameters. This list will be completed gradually.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":161,"value":"*Bertin.js is **under development** so not necessarily very stable yet. The names of the functions and the parameters are still subject to change.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":998,"value":"Code source and documentation are available on [github](https://github.com/neocarto/bertin) an [npmjs.com](https://www.npmjs.com/package/bertin).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":146,"value":"**Why Bertin ?**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"[Jacques Bertin](https://en.wikipedia.org/wiki/Jacques_Bertin) (1918-2010) was a **French cartographer**, whose major contribution was a theoretical and practical reflection on all graphic representations (diagrams, maps and graphs), forming the subject of a fundamental treatise, [_Graphic Semiology_](https://www.esri.com/en-us/esri-press/browse/semiology-of-graphics-diagrams-networks-maps), originally published in 1967. Bertin's influence remains strong in the university teaching of cartography today, but also in the circles of statisticians and data visualization specialists.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":92,"value":"**Import bertin.js**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":707,"value":"To import the library, just do like that:\n\n~~~js\nbertin = require(\"bertin\")\n~~~\n\nAnd if you want the very last version, you can copy this line:\n\n\n~~~js\nbertin = require(\"bertin@latest\")\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":280,"value":"**Let's start**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":325,"value":"With Bertin.js, a map in actually a json object with specific parameters like below. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":329,"value":"~~~js\nmymap = {\n params : {\"an object with global parameters (optional)\"},\n layers: [\"an array of objects. One object by layer\"];\n}\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":688,"value":"Displaying a simple layer can therefore be done like that.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":693,"value":"~~~js\nbertin.draw({\n layers: [\n { type: \"layer\", geojson: *a geojson* }\n ]\n})\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":346,"value":"If you want to display several layers, it is not more complicated. Geojsons can be dots, lines or polygons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":350,"value":"~~~js\nbertin.draw({\n layers: [\n { type: \"layer\", geojson: *a geojson* },\n { type: \"layer\", geojson: *a geojson* },\n { type: \"layer\", geojson: *a geojson* }\n ]\n})\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":720,"value":"**Let's make a map of Australia**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":806,"value":"First, we load geometries: dots, lines and polygons.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":748,"value":"AUS = FileAttachment(\"AUS@1.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"AUS_ports = FileAttachment(\"AUS_ports.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"AUS_roads = FileAttachment(\"AUS_roads.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"Then, we draw the map!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":294,"value":"simplemap = bertin.draw({\n params: { background: \"#bde1f0\", margin: 10 },\n layers: [\n {\n type: \"layer\",\n geojson: AUS_ports,\n fill: \"#1f0754\",\n stroke: \"#1f0754\",\n strokeWidth: 2,\n symbol: \"square\",\n symbol_size: 50\n },\n {\n type: \"layer\",\n geojson: AUS_roads,\n stroke: \"#bf4783\",\n strokeWidth: 1.2\n },\n {\n type: \"layer\",\n geojson: AUS,\n fill: \"#f7da48\",\n stroke: \"#6eb5e0\",\n strokeWidth: 1.5\n },\n { type: \"scalebar\" }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"**Automatic extent**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"In bertin.js, the extent of the map is automatically calculated according to the displayed layers. In addition, it is possible to add a margin.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":443,"value":"viewof ctr1 = Inputs.select(\n africa.features.map((d) => d.properties.NAMEen),\n {\n label: \"Layer 1\",\n value: \"Morocco\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"viewof ctr2 = Inputs.select(\n africa.features.map((d) => d.properties.NAMEen),\n { label: \"Layer 2\", value: \"Algeria\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"viewof ctr3 = Inputs.select(\n africa.features.map((d) => d.properties.NAMEen),\n { label: \"Layer 3\", value: \"Libya\" }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"viewof margin = Inputs.range([0, 100], { label: \"margin\", value: 0, step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"bertin.draw({\n params: { background: \"#bde1f0\", margin: margin },\n layers: [\n {\n type: \"layer\",\n geojson: country1,\n fill: \"#3B556D\",\n stroke: \"#bde1f0\",\n strokeWidth: 3\n },\n {\n type: \"layer\",\n geojson: country2,\n fill: \"#3B556D\",\n stroke: \"#bde1f0\",\n strokeWidth: 3\n },\n {\n type: \"layer\",\n geojson: country3,\n fill: \"#3B556D\",\n stroke: \"#bde1f0\",\n strokeWidth: 3\n }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"**Let's make a nice map of Africa**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":133,"value":"In addition to geographic layers, it is possible to add other elements such as a header (title), a footer (sources), a shadow and a scale bar. Moreover, **maps are interactive**. Move your mouse over the countries to see the tooltip. In general, the map coverage is always automatically adapted to the coverage of the layers that have been filled in. But it is possible in the general settings to define a specific layer on which the coverage is calculated (here Africa). Note also that each layer can be associated with it's legend (if *leg_x* and *leg_y* parameters are filled). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"bertin.draw({\n params: {\n extent: africa,\n margin: 30,\n background: \"#bde1f0\"\n },\n layers: [\n {\n type: \"header\",\n text: \"A Map of the African Continent\",\n background: \"#de4960\",\n fill: \"white\",\n fontSize: 40,\n anchor: \"start\"\n },\n {\n type: \"footer\",\n text: `Nicolas Lambert, 2022\n Made with Bertin.js`\n },\n {\n type: \"layer\",\n geojson: africa,\n fill: \"#de4960\",\n leg_x: 180,\n leg_y: 550,\n leg_w: 45,\n leg_h: 30,\n leg_title: `Location\n of the countries`,\n leg_fontSize: 20,\n leg_fontSize2: 14,\n leg_text: \"African countries\",\n tooltip: [\"$ISO3\", \"$NAMEen\"]\n },\n { type: \"shadow\", geojson: africa, dx: 5, dy: 5 },\n {\n type: \"layer\",\n geojson: world,\n fill: \"#e0d0b6\",\n leg_x: 180,\n leg_y: 650,\n leg_w: 45,\n\n leg_h: 30,\n leg_fontSize2: 14,\n\n leg_text: \"Other\"\n },\n { type: \"scalebar\", units: \"kilometers\" }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"**At world scale**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":875,"value":"If you add a layer *Outline*, le map is automatically at word scale, even if you represent only one country. Of course, you can add graticules and change the projection (See [d3-geo-projection@4](https://github.com/d3/d3-geo-projection)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":933,"value":"viewof projection = Inputs.select(projections, {\n label: \"Projection\",\n format: (x) => x.name\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"viewof step = Inputs.range([5, 30], {\n label: \"Graticule step\",\n value: 10,\n step: 1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"map = bertin.draw({\n params: { projection: projection.proj, margin: 2.5, clip: true },\n layers: [\n { type: \"header\", text: \"World Population\\nin 2018 (inh.)\" },\n {\n type: \"layer\",\n geojson: world,\n fill: \"#74c4ac\",\n tooltip: [\"$ISO3\", \"$NAMEen\"]\n },\n {\n type: \"header\",\n text: projection.name + \" projection\",\n fill: \"#74c4ac\",\n fontSize: 34\n },\n {\n type: \"graticule\",\n strokeWidth: 1.5,\n strokeDasharray: 2,\n stroke: \"#74c4ac\",\n step: step\n },\n {\n type: \"graticule\",\n strokeWidth: 2.5,\n stroke: \"#74c4ac\",\n strokeDasharray: \"none\",\n strokeOpacity: 1,\n step: [0, 90]\n },\n { type: \"outline\", fill: \"none\", stroke: \"#74c4ac\", strokeWidth: 2.5 }\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"projections = [\n { name: \"Interrupted Sinusoidal\", proj: d3.geoInterruptedSinusoidal() },\n { name: \"Armadillo\", proj: d3.geoArmadillo() },\n { name: \"Baker\", proj: d3.geoBaker() },\n { name: \"Gingery\", proj: d3.geoGingery() },\n { name: \"Berghaus\", proj: d3.geoBerghaus() },\n { name: \"Loximuthal\", proj: d3.geoLoximuthal() },\n { name: \"Healpix\", proj: d3.geoHealpix() },\n {\n name: \"Interrupted Mollweide Hemispheres\",\n proj: d3.geoInterruptedMollweideHemispheres()\n },\n\n { name: \"Miller\", proj: d3.geoMiller() },\n { name: \"Aitoff\", proj: d3.geoAitoff() }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":952,"value":"**Thematic mapping**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":955,"value":"`bertin.js` also allows you to create statistical maps and many other things: bubble, choropleth, spikes, typologies, mashroom, squares, smooth, links, discontinuities...\n\nTake a look ⬇️ ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1425,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"**Appendix**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":739,"value":"In this section, we import the data and prepare them.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":608,"value":"world = d3.json(\n \"https://raw.githubusercontent.com/neocarto/bertin/main/data/world.geojson\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"country1 = ({\n type: \"FeatureCollection\",\n features: africa.features.filter((d) => d.properties.NAMEen == ctr1)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"country2 = ({\n type: \"FeatureCollection\",\n features: africa.features.filter((d) => d.properties.NAMEen == ctr2)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":519,"value":"country3 = ({\n type: \"FeatureCollection\",\n features: africa.features.filter((d) => d.properties.NAMEen == ctr3)\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"regions = d3.csv(\n \"https://raw.githubusercontent.com/neocarto/bertin/main/data/data.csv\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"africa = ({\n type: \"FeatureCollection\",\n features: world.features.filter((d) =>\n regions\n .filter((d) => d.region == \"Africa\")\n .map((d) => d.id)\n .includes(d.properties.ISO3)\n )\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"function preview({ path, title, thumbnail }) {\n return htl.html`\n (event.currentTarget.firstElementChild.style.borderColor =\n \"#1b1e23\")} onmouseout=${(event) =>\n (event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\")}>\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1417,"value":"function previews(notebooks) {\n return htl.html`

${notebooks.map(\n preview\n )}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"**Dependencies**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1447,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"bertin = require(`bertin@latest`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1313,"value":"import { getlogo } from \"@neocartocnrs/bertin-logo\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3@7\", \"d3-geo-projection@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null