30:[{"id":"1f94e74bbc1068fa03c8c608ec30025df916c9c866508307e356b48aa2760286905fbf44de1d9e9c4aa7f756e089effdb4b4b00dfd208dc40c69ce707977a484","href":"https://static.observableusercontent.com/files/1f94e74bbc1068fa03c8c608ec30025df916c9c866508307e356b48aa2760286905fbf44de1d9e9c4aa7f756e089effdb4b4b00dfd208dc40c69ce707977a484","name":"Courgette-Regular.ttf","type":"font/ttf","lastModified":1702654520695.912,"size":118784}] 2e:{"title":"Containers","cells":[{"id":0,"value":"# Containers","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"## 1 - Containers","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"In `geoviz`, to combine different layers on a map, you need to create an SVG container. This is created with the create() instruction. It can then be displayed using the render() function. ","pinned":false,"hidden":false,"mode":"md"},{"id":567,"value":"By default, no map projection is defined. Geometries are displayed as they are. But you do need to specify the geographic domain. ","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"{\n let svg = viz.create({ domain: world }); // we create a container\n svg.path({ datum: world, fill: \"#38896F\" }); // we do stuffs\n return svg.render(); // we render the container\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":571,"value":"If a projection is defined, then the default display domain is the world. ","pinned":false,"hidden":false,"mode":"md"},{"id":573,"value":"{\n let svg = viz.create({ projection: d3.geoNaturalEarth1() }); // we create a container\n svg.path({ datum: world, fill: \"#38896F\" }); // we do stuffs\n return svg.render(); // we render the container\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"Note that it is possible to create a container inside another one unsing the parent argument. See https://observablehq.com/@neocartocnrs/insets","pinned":false,"hidden":false,"mode":"md"},{"id":60,"value":"The container designed with the create() function doesn't just contain the SVG drawing. It also contains some useful context information. Let's go back to the previous example and see what's inside.","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"svg = {\n let svg = viz.create({ projection: d3.geoAlbers() });\n svg.path({ datum: world, fill: \"#38896F\" });\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"In addition to the SVG itself, we can see that there is, for example, the projection function, the map extent and its dimensions. ","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"svg.projection","pinned":true,"hidden":false,"mode":"ojs"},{"id":146,"value":"svg.height","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"svg.bbox","pinned":true,"hidden":false,"mode":"ojs"},{"id":152,"value":"This can be useful, for example, if I want to add an element to the center of the map. In this way, I can:","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"{\n let svg = viz.create({ domain: world });\n svg.path({ datum: world, fill: \"#38896F\", fillOpacity: 0.5 });\n svg\n .append(\"circle\")\n .attr(\"cx\", svg.width / 2) // Centered in x\n .attr(\"cy\", svg.height / 2) // Centerd in y\n .attr(\"r\", 10)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"#38896F\")\n .attr(\"stroke-width\", 5);\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":172,"value":"## 2 - zoomable","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"It's in the create() function that you can tell whether the map is zoomable or not. If you set the zoomable argument to true, the map becomes zoomable. But you can also specify an array of 2 values to say from or to or zoom is valid. The default is 1 to 8.","pinned":false,"hidden":false,"mode":"md"},{"id":181,"value":"{\n let svg = viz.create({ domain: world, zoomable: [0.5, 2] });\n await svg.path({ data: world, fill: \"#38896F\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"## 3 - Width, margin and background","pinned":false,"hidden":false,"mode":"md"},{"id":84,"value":"When you create the container, you can define a few parameters, such as its width (the height is calculated automatically), the margin margin and the background color. Note that you can define the margin with a single value, or an array of 4 values in this order: top, right, bottom, left. ","pinned":false,"hidden":false,"mode":"md"},{"id":156,"value":"{\n let svg = viz.create({\n margin: 40, // Or [40,40,40,40]\n background: \"#d9fcff\",\n width: 400,\n domain: world\n });\n svg.path({ datum: world, fill: \"#38896F\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"## 4 - domain","pinned":false,"hidden":false,"mode":"md"},{"id":188,"value":"In the create function, you can also use the geographical domain to focus on a specific territories.","pinned":false,"hidden":false,"mode":"md"},{"id":198,"value":"For that, you can specify a single geoJSON","pinned":false,"hidden":false,"mode":"md"},{"id":196,"value":"{\n let svg = viz.create({\n domain: chn,\n margin: 10,\n width: 400\n });\n svg.path({ datum: world, fill: \"#38896F\", fillOpacity: 0.3 });\n svg.path({ datum: chn, fill: \"#38896F\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"An array of geoJSONs","pinned":false,"hidden":false,"mode":"md"},{"id":204,"value":"{\n let svg = viz.create({\n domain: [aus, chn],\n margin: 10,\n width: 400\n });\n svg.path({ datum: world, fill: \"#38896F\", fillOpacity: 0.3 });\n svg.path({ datum: aus, fill: \"#38896F\" });\n svg.path({ datum: chn, fill: \"#38896F\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"Or a bbox","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"{\n let svg = viz.create({\n domain: [\n [-12, 20],\n [43, 65]\n ],\n\n width: 400\n });\n svg.path({ datum: world, fill: \"#38896F\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"## 5 - font family","pinned":false,"hidden":false,"mode":"md"},{"id":109,"value":"At container level, you can also define the fontFamily for the entire map. This will save you having to specify it every time you add text. To add a new font to the web page,, use the tool.addFont() function.","pinned":false,"hidden":false,"mode":"md"},{"id":102,"value":"viz.tool.addfonts([\n {\n fontFamily: \"Courgette\",\n url: await FileAttachment(\"Courgette-Regular.ttf\").url()\n }\n])","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"{\n let svg = viz.create({ fontFamily: \"Courgette\", domain: world });\n svg.path({ datum: world, fill: \"#38896F\", fillOpacity: 0.2 });\n svg.text({ data: world, text: \"Courgette\", fill: \"#38896F\" });\n svg.header({ text: \"Courgette\" });\n svg.footer({ text: \"Courgette\" });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"## 6 - Projections","pinned":false,"hidden":false,"mode":"md"},{"id":241,"value":"How do you flatten the world? Actually, map projections are an essential part of cartographic construction. In geoviz, we'll be using D3js map projections. We find them in 3 different libraries: d3-geo (available by default in Observable), d3-geo-projection and d3-geo-polygon. In the last 2 cases, you must load the libraries","pinned":false,"hidden":false,"mode":"md"},{"id":339,"value":"See: [d3-geo](https://github.com/d3/d3-geo), [d3-geo-projection](https://github.com/d3/d3-geo-projection) & [d3-geo-polygon](https://github.com/d3/d3-geo-polygon).","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"d3 = require(\"d3\", \"d3-geo-projection@2\", \"d3-geo-polygon\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":303,"value":"viewof proj = Inputs.select(\n new Map([\n [\"Foucaut\", d3.geoFoucaut()],\n [\"Berghaus\", d3.geoBerghaus()],\n [\"Gingery\", d3.geoGingery()],\n [\"Healpix\", d3.geoHealpix()],\n [\"Dodecahedral\", d3.geoDodecahedral()]\n ]),\n { label: \"Projection\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":257,"value":"{\n let svg = viz.create({ projection: proj, width: 700 });\n svg.outline();\n svg.graticule({ stroke: \"white\" });\n svg.path({ datum: world, fill: \"#38896F\" });\n\n return svg.render();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":343,"value":"Note that you can change the projection center with rotate","pinned":false,"hidden":false,"mode":"md"},{"id":356,"value":"viewof longitude = Inputs.range([-180, 180], { step: 1, label: \"longitude\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":353,"value":"viewof latitude = Inputs.range([-90, 90], { step: 1, label: \"latitude\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"{\n let svg = viz.create({\n projection: d3.geoNaturalEarth1().rotate([longitude, latitude]),\n width: 700\n });\n svg.outline();\n svg.graticule({ stroke: \"white\" });\n svg.path({ datum: world, fill: \"#38896F\" });\n\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"## 7 - Render","pinned":false,"hidden":false,"mode":"md"},{"id":520,"value":"An finally, the render function. It's the one you use to display the map. By default, it doesn't require any settings. But if map layers are spread over several cells in Observable, you need to use the order argument to specify the order in which the layers should be displayed. ","pinned":false,"hidden":false,"mode":"md"},{"id":534,"value":"container = viz.create({\n projection: d3.geoNaturalEarth1(),\n width: 700\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"countries = container.path({ datum: world, fill: \"#38896F\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":527,"value":"outline = container.outline({ id: \"outline\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":532,"value":"graticule = container.graticule({ id: \"toto\", stroke: \"white\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":542,"value":"container.render({ order: [outline, graticule, countries] })","pinned":true,"hidden":false,"mode":"ojs"},{"id":7,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"import {\n style,\n world,\n disclaimer,\n aus,\n chn,\n viz\n} from \"@neocartocnrs/geoviz-appendix\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}