30:T63c, // Container const svg = viz.create({ zoomable: true, projection: "mercator", domain: africa, margin: 20, width: 800, responsive: false }); // Tiles svg.tile({ url: "worldphysical" }); // Header svg.header({ text: "Hello Geoviz", background_fill: "#38896F", fill: "white", fontSize: 30 }); // Graticules 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({}) }); svg.choro({ data: africa, var:"gdppc", method: "quantile", nb: 6, precision: 0, colors: "BluGrn", tip: "$NAMEen\n\nGDP per capita: $gdppc\nPopulation:$pop", fillOpacity: 0.8, stroke: "none", filter: svg.effect.shadow(), leg_pos: [40, 390], leg_frame: true, leg_frame_stroke: "none" }); // Countries svg.prop({ data: africa, var: "pop", stroke: "white", strokeWidth: 1.3, fill: "none", leg_title: "Population", leg_pos: [40, 575], leg_frame: true, leg_frame_stroke: "none" }); // Sclaleber & North svg.scalebar(); svg.north({ scale: 1.5, pos: [663, 155], fill: "#38896F" }); // Render display(svg.render()) 31:T5f9, // 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 scale = d3.scaleSqrt( [0, d3.max(africa.features.map((d) => +d.properties.pop))], [0, 50 * 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: "Airocean" }); 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" }); display(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":1466,"value":"🆕 *Updated for Notebook 2.0*","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\nlet viz = import(\"npm:geoviz\")\n~~~\n\nor for the lite version *(recommanded)*\n\n~~~js\nlet viz = import(\"npm:geoviz/lite\")\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":1284,"value":"## An example of zoomable thematic map","pinned":false,"hidden":false,"mode":"md"},{"id":1281,"value":"$30","pinned":false,"hidden":false,"mode":"js"},{"id":1152,"value":"## Documentation","pinned":false,"hidden":false,"mode":"md"},{"id":818,"value":"documentation","pinned":false,"hidden":false,"mode":"js"},{"id":1155,"value":"## Gallery","pinned":false,"hidden":false,"mode":"md"},{"id":1468,"value":"*(Mainly old Observable for now.)*","pinned":false,"hidden":false,"mode":"md"},{"id":832,"value":"gallery","pinned":false,"hidden":false,"mode":"js"},{"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":"js"},{"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":"js"},{"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":"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 display(svg.render())\n","pinned":true,"hidden":false,"mode":"ts"},{"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":" 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 display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"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":" 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 display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"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":"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 display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"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":"let k = view(Inputs.range([15, 100], { label: \"Radius max\", step: 1, value: 50 }))","pinned":false,"hidden":false,"mode":"js"},{"id":1057,"value":" 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 display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"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":" let svg = viz.container.create({\n zoomable: true,\n projection: \"Hill\"\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 display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"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":"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 display(svg.render())","pinned":true,"hidden":false,"mode":"js"},{"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":"js"},{"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 \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js"},{"id":1467,"value":"style","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"2","titling":"auto"}