30:T69d,demo = { // Container const svg = viz.create({ zoomable: true, projection: "mercator", domain: africa, margin: 20, width: 800, responsive: false }); // Choro clasification const data = africa.features.map((d) => d.properties.gdppc); const choro = viz.tool.choro(data, { method: "quantile", nb: 6, precision: 0, colors: "BluGrn" }); // Tiles svg.tile({ url: "worldphysical" }); // Header svg.header({ text: "Hello Geoviz", background_fill: "#38896F", fill: "white", fontSize: 30 }); // Graticule svg.graticule({ stroke: "black", strokeWidth: 1.5, strokeOpacity: 0.3, strokeDasharray: 5, transform: "translate(1,1)" }); svg.graticule({ stroke: "white", strokeWidth: 1.5, strokeOpacity: 0.5, strokeDasharray: 5 }); // Countries svg.path({ data: africa, fill: (d) => choro.colorize(d.properties.gdppc), tip: "$NAMEen\n\nGDP per capita: $gdppc\nPopulation:$pop", fillOpacity: 0.8, stroke: "none", filter: svg.effect.shadow({}) }); // Countries svg.circle({ data: africa, r: "pop", stroke: "white", strokeWidth: 1.3, fill: "none" }); // Sclaleber & North svg.scalebar(); svg.north({ scale: 1.5, pos: [663, 155], fill: "#38896F" }); // Legend svg.legend.choro_vertical({ pos: [40, 390], ...choro, title: "GDP per Capita", frame: true, frame_stroke: "none" }); svg.legend.circles_nested({ pos: [40, 575], data: world.features.map((d) => d.properties.pop), title: "Population", frame: true, frame_stroke: "none" }); // Render return svg.render(); }31:T6b8,{ // Data let africa = viz.tool.featurecollection( world.features.filter((d) => d.properties.region == "Africa") ); // Font viz.tool.addfonts([ { fontFamily: "Pacifico", url: await FileAttachment("Pacifico-Regular.ttf").url() } ]); // main map let svg = viz.create({ domain: africa, width: 800, margin: [20, 20, 20, 20], background: "#C9EAFE", fontFamily: "Pacifico" }); svg.path({ datum: world, fill: "grey", fillOpacity: 0.1 }); svg.path({ datum: africa, fill: "black", transform: "translate(4,7)", fillOpacity: 0.2 }); svg.path({ datum: africa, fill: "#F7E3A1", stroke: "white" }); svg.header({ text: "The African continent", fill: "#6b6969", background_fill: "#F7E3A1", fontSize: 60 }); let k = 50; let scale = d3.scaleSqrt( [0, d3.max(africa.features.map((d) => +d.properties.pop))], [0, k * 0.6] ); svg.text({ data: africa, text: "NAMEen", fill: "#6b6969", strokeWidth: 5, stroke: "white", strokeOpacity: 0.7, fontSize: (d) => scale(d.properties.pop) }); // inset let inset = viz.container.create({ parent: svg, pos: [15, 510], width: 340, projection: await require("d3-geo-polygon").then((d) => d.geoAirocean()) }); inset.outline({ fill: "white", strokeWidth: 1, stroke: "#7499d6" }); inset.graticule({ step: 30, strokeDasharray: "none", strokeOpacity: 0.5, stroke: "#7499d6" }); inset.path({ datum: world, fill: "#a1acc2", stroke: "none" }); inset.path({ datum: africa, fill: "#7499d6", stroke: "#7499d6" }); return svg.render(); }32:[{"id":"ba1175ea2dccaebd2429693444000c56c72edf33148e27a8a0a2d6f1170aff18c697481bbb7f4ce45e070a45b0401e8e20d6651004a32b838edd4f9cb1086fc5","href":"https://static.observableusercontent.com/files/ba1175ea2dccaebd2429693444000c56c72edf33148e27a8a0a2d6f1170aff18c697481bbb7f4ce45e070a45b0401e8e20d6651004a32b838edd4f9cb1086fc5","name":"interoperable.svg","type":"image/svg+xml","lastModified":1702912625145.9,"size":5055},{"id":"999d048de92d8f450891a4abb93e168eecb631ec9f6a02dbb9e7a8013e9b429d1470f34bad975d6bc826f3ce61968386ff8d788013bbaba4943db3b5967a05c5","href":"https://static.observableusercontent.com/files/999d048de92d8f450891a4abb93e168eecb631ec9f6a02dbb9e7a8013e9b429d1470f34bad975d6bc826f3ce61968386ff8d788013bbaba4943db3b5967a05c5","name":"vectorial.svg","type":"image/svg+xml","lastModified":1702912625302.196,"size":5000},{"id":"ee5864041ee44a811795629bb9441f80eb07972a205d5e9b3a04ed2c4fcac51234efd9052a39bd1719e6099c49649533203fd66daa0b4fd2a9713ab3269c8059","href":"https://static.observableusercontent.com/files/ee5864041ee44a811795629bb9441f80eb07972a205d5e9b3a04ed2c4fcac51234efd9052a39bd1719e6099c49649533203fd66daa0b4fd2a9713ab3269c8059","name":"interactive.svg","type":"image/svg+xml","lastModified":1702912625481.096,"size":3860},{"id":"81d3a6ada7451594c8369c0ef4679a0651258db56dd05b77f91ba4d782e0efc4b7c830a90cc2d4618e4941449f20e0f5104ddbe8a8abccf8b0320d3f0d5c27f3","href":"https://static.observableusercontent.com/files/81d3a6ada7451594c8369c0ef4679a0651258db56dd05b77f91ba4d782e0efc4b7c830a90cc2d4618e4941449f20e0f5104ddbe8a8abccf8b0320d3f0d5c27f3","name":"thematic.svg","type":"image/svg+xml","lastModified":1702912625499.617,"size":3201},{"id":"18abe1b1e9c7d269c03d9fc30616a909239925fb887af5fc13e3aa29217a5c58b1da8549b092647884cd1a3cf0962834305745a063630bdf1432ad830254595a","href":"https://static.observableusercontent.com/files/18abe1b1e9c7d269c03d9fc30616a909239925fb887af5fc13e3aa29217a5c58b1da8549b092647884cd1a3cf0962834305745a063630bdf1432ad830254595a","name":"zoomable.svg","type":"image/svg+xml","lastModified":1702912625511.703,"size":3963},{"id":"6e61cda98cbf970437dbc71e964a704b6ee0b05406e3aca3c577ec739eb84727a54f08178d6d7c54c927a9b2a78ff53e68dc0a20804513244f2025fb911a964d","href":"https://static.observableusercontent.com/files/6e61cda98cbf970437dbc71e964a704b6ee0b05406e3aca3c577ec739eb84727a54f08178d6d7c54c927a9b2a78ff53e68dc0a20804513244f2025fb911a964d","name":"Pacifico-Regular.ttf","type":"font/ttf","lastModified":1696515764166.791,"size":315408},{"id":"397254501d62d5b1a439018f1b705da854e33ad083bbc68ac68094da2bb96c273e8e4c4509d94bc2b973f75e28e11f59d8cd2d47497c809979d83d1aad851a34","href":"https://static.observableusercontent.com/files/397254501d62d5b1a439018f1b705da854e33ad083bbc68ac68094da2bb96c273e8e4c4509d94bc2b973f75e28e11f59d8cd2d47497c809979d83d1aad851a34","name":"logo.jpg","type":"image/jpeg","lastModified":1702555498214.184,"size":9875},{"id":"ac522440e8f0e34ead1dacec9655affedebe6ee8db0f5334c32d457e64cae81c5c1ed7932ae24f9159b69c2b19730e69b98ba862ccd533713524c2409d92a24a","href":"https://static.observableusercontent.com/files/ac522440e8f0e34ead1dacec9655affedebe6ee8db0f5334c32d457e64cae81c5c1ed7932ae24f9159b69c2b19730e69b98ba862ccd533713524c2409d92a24a","name":"world.json","type":"application/json","lastModified":1693915616038.81,"size":278391},{"id":"1c13c46008b784ead0e7491c23f2b503465240888e8d21e19075418736349305aad4ab649c3588efb6e43787078a1c1b8ee1dde91bd9d60cd147259864d38d1a","href":"https://static.observableusercontent.com/files/1c13c46008b784ead0e7491c23f2b503465240888e8d21e19075418736349305aad4ab649c3588efb6e43787078a1c1b8ee1dde91bd9d60cd147259864d38d1a","name":"logo_small.png","type":"image/png","lastModified":1694607557693.687,"size":119172}] 2e:{"title":"Hello geoviz","cells":[{"id":0,"value":"# Hello geoviz","pinned":false,"hidden":false,"mode":"md"},{"id":917,"value":"logo = FileAttachment(\"logo.jpg\").image({ width: 250 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"geoviz is a JavaScript library for designing thematic maps. The library provides a set of [d3](https://github.com/d3/d3) compatible functions that you can mix with the usual d3 syntax. The library is designed to be intuitive and concise. Its use is particularly well suited to Observable notebooks. Maps deigned with `geoviz` are:","pinned":false,"hidden":false,"mode":"md"},{"id":1249,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":8,"value":"- **`npm`** - https://www.npmjs.com/package/geoviz\n- **`github`** - https://github.com/riatelab/geoviz\n- **`API reference`** - https://riatelab.github.io/geoviz/","pinned":false,"hidden":false,"mode":"md"},{"id":1219,"value":"To load the library:","pinned":false,"hidden":false,"mode":"md"},{"id":1214,"value":"~~~js\nviz = require(\"geoviz@${version}\")\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":1429,"value":"xx = require(\"geoviz@1.0.7\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1284,"value":"## An example of zoomable thematic map","pinned":false,"hidden":false,"mode":"md"},{"id":1281,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1401,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1152,"value":"## Documentation","pinned":false,"hidden":false,"mode":"md"},{"id":818,"value":"documentation","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"## Gallery","pinned":false,"hidden":false,"mode":"md"},{"id":832,"value":"gallery","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"## Principles","pinned":false,"hidden":false,"mode":"md"},{"id":868,"value":"`geoviz` helps you to create SVG thematic maps. For that, you have at your disposal a set of marks that define various layer types, such as path, circle, graticule, header, footer, scalebar, text, north... Each layer type contains default settings, which you can of course change. ","pinned":false,"hidden":false,"mode":"md"},{"id":906,"value":"Each mark can be displayed directly. ","pinned":false,"hidden":false,"mode":"md"},{"id":908,"value":"viz.circle({ data: world, fill: \"#38896F\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1360,"value":"Or via the plot() function.","pinned":false,"hidden":false,"mode":"md"},{"id":1362,"value":"viz.plot({ type: \"circle\", data: world, fill: \"#38896F\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":871,"value":"But to combine them on a map, they have to be invoked inside an svg container, which is created with the create() instruction and displayed with the render() instruction. Don't forget to define the geographic domain (and projection, if needed).","pinned":false,"hidden":false,"mode":"md"},{"id":1191,"value":"You have several ways of writing.","pinned":false,"hidden":false,"mode":"md"},{"id":1193,"value":"~~~js\n// svg is the container\nviz.path(svg, { options });\nsvg.path({ options }); \nviz.plot(svg, { type=\"path\", options }); \nsvg.plot({ plot = \"path\", options });\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":878,"value":"{\n let svg = viz.create({\n projection: d3.geoNaturalEarth1()\n });\n svg.plot({ type: \"graticule\", stroke: \"#38896F\" }); // 1st way to write\n svg.plot({ type: \"path\", data: world, fill: \"#38896F\", tip: true }); // 2nd way to write\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1182,"value":"This container also allows you to add elements to the map directly with `d3js`. ","pinned":false,"hidden":false,"mode":"md"},{"id":1184,"value":"{\n let svg = viz.create({ domain: world, projection: d3.geoNaturalEarth1() });\n svg.plot({ type: \"path\", data: world, fill: \"#38896F\", tip: true });\n svg\n .append(\"text\")\n .attr(\"x\", 330)\n .attr(\"y\", 170)\n .attr(\"fill\", \"#38896F\")\n .text(\"Text with d3js\");\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":888,"value":"The container can be customized. You can change its width, background color, margin, etc. The zoomable argument makes the map zoomable. ","pinned":false,"hidden":false,"mode":"md"},{"id":893,"value":"{\n let svg = viz.create({\n zoomable: true,\n projection: d3.geoNaturalEarth1(),\n background: \"#bddbf0\",\n width: 600,\n margin: 20\n });\n svg.path({ datum: world, fill: \"#38896F\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":859,"value":"## A simple map","pinned":false,"hidden":false,"mode":"md"},{"id":932,"value":"So we're ready to create a pretty map.","pinned":false,"hidden":false,"mode":"md"},{"id":936,"value":"{\n let svg = viz.create({\n zoomable: true,\n projection: d3.geoNaturalEarth1()\n });\n svg.plot({ type: \"outline\" });\n svg.plot({ type: \"graticule\", stroke: \"white\" });\n svg.plot({ type: \"path\", datum: world, fill: \"white\", fillOpacity: 0.4 });\n svg.plot({ type: \"header\", text: \"Hello Geoviz\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":853,"value":"## Bubbles","pinned":false,"hidden":false,"mode":"md"},{"id":1053,"value":"The purpose of the `geoviz` library is not just to display layers, but to represent statistical data using graphic semiology. So, to represent absolute quantitative data, we can use the mark circle. By assigning a variable to the r attribute, the circle area becomes proportional to that variable. ","pinned":false,"hidden":false,"mode":"md"},{"id":1066,"value":"viewof k = Inputs.range([15, 100], { label: \"Radius max\", step: 1, value: 50 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":1057,"value":"{\n let svg = viz.container.create({\n zoomable: true,\n projection: d3.geoEqualEarth()\n });\n svg.outline();\n svg.path({\n datum: world,\n fill: \"white\",\n fillOpacity: 0.4\n });\n\n svg.circle({\n data: world,\n r: \"pop\",\n fill: \"#38896F\",\n k,\n tip: `$name\n$pop inh.`\n });\n\n svg.legend.circles_nested({\n pos: [20, 220],\n title: \"Population in the country\",\n subtitle: \"(inhabitants)\",\n data: world.features.map((d) => d.properties.pop),\n values_round: 0,\n k\n });\n\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":850,"value":"## Choropleth","pinned":false,"hidden":false,"mode":"md"},{"id":945,"value":"To create a choropleth map, wa can use the tool.choro() function. This function takes in an array of numerical values and some options. It returns breaks, colors and a classification function. This function is based on [`statsbreaks`](https://observablehq.com/@neocartocnrs/hello-statsbreaks) and [`dicopal`](https://observablehq.com/@neocartocnrs/dicopal-library). The methods and palettes contained in these libraries are therefore available. ","pinned":false,"hidden":false,"mode":"md"},{"id":950,"value":"choro = viz.tool.choro(world.features.map((d) => d.properties.gdppc))","pinned":true,"hidden":false,"mode":"ojs"},{"id":956,"value":"Then","pinned":false,"hidden":false,"mode":"md"},{"id":954,"value":"{\n let svg = viz.container.create({\n zoomable: true,\n projection: await require(\"d3-geo-projection\").then((d) => d.geoHill())\n });\n svg.outline();\n svg.path({\n data: world,\n fill: (d) => choro.colorize(d.properties.gdppc),\n strokeWidth: 0.3,\n tip: `$name\nWealth: $gdppc$ per inh.`\n });\n svg.legend.choro_horizontal({\n pos: [380, 452],\n title: \"GDP per capita\",\n subtitle: \"($ per inh.)\",\n note: \"Source: worldbank, 2020\",\n values_round: 0,\n breaks: choro.breaks,\n colors: choro.colors\n });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":855,"value":"## Typology","pinned":false,"hidden":false,"mode":"md"},{"id":976,"value":"Based on the same principle, the tool.typo() function can be used to create maps with qualitative data. ","pinned":false,"hidden":false,"mode":"md"},{"id":980,"value":"typo = viz.tool.typo(world.features.map((d) => d.properties.region))","pinned":true,"hidden":false,"mode":"ojs"},{"id":985,"value":"{\n let svg = viz.create({\n width: 700,\n margin: [20, 0, 0, 0],\n zoomable: true,\n projection: d3.geoAzimuthalEqualArea()\n });\n svg.outline();\n svg.path({\n data: world,\n fill: (d) => typo.colorize(d.properties.region),\n tip: (d) => `${d.properties.name} (${d.properties.region})`\n });\n svg.legend.typo_vertical({\n pos: [280, 400],\n title: null,\n alphabetical: true,\n values_fill: \"black\",\n colors: typo.colors,\n types: typo.types,\n missing: false\n });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"## Insets & layout","pinned":false,"hidden":false,"mode":"md"},{"id":279,"value":"Maps are fully customizable. Fonts can be imported. Multiple containers can be created to display multiple maps on the same document. Etc.","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":811,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":813,"value":"import {\n style,\n world,\n documentation,\n gallery,\n viz,\n africa,\n version\n} from \"@neocartocnrs/geoviz-appendix\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"style","pinned":false,"hidden":false,"mode":"ojs"},{"id":1397,"value":"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}