31:[{"id":"360e21066ce88b010bff583c207ebd3d7f58febf13147e773739eedc9cf8bdee4b0448b57603e1c9966f11148294fc4d3d74f14bb881331bb884bfa00f2ddf67","href":"https://static.observableusercontent.com/files/360e21066ce88b010bff583c207ebd3d7f58febf13147e773739eedc9cf8bdee4b0448b57603e1c9966f11148294fc4d3d74f14bb881331bb884bfa00f2ddf67","name":"Slackey-Regular.ttf","type":"font/ttf","lastModified":1702571301550.39,"size":36836}] 2f:{"title":"Layout marks","cells":[{"id":0,"value":"# Layout marks","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"Map staging is very important in thematic cartography. And an attractive map is also an effective map. That's why geoviz also offers you the possibility of adding *\"dressing\"* elements to your maps.","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"## 1 - Header and footer","pinned":false,"hidden":false,"mode":"md"},{"id":49,"value":"viz.header lets you add a title above the map. viz.footer displays text below. ","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"viz.header()","pinned":true,"hidden":false,"mode":"js"},{"id":52,"value":"viz.footer()","pinned":true,"hidden":false,"mode":"js"},{"id":54,"value":"With options, you can define the way it is displayed.","pinned":false,"hidden":false,"mode":"md"},{"id":59,"value":"viz.header({\n text: \"This is my\\npretty title\",\n background_fill: \"#38896F\",\n fill: \"white\",\n textAnchor: \"start\",\n dx: 20,\n margin: 20\n})","pinned":true,"hidden":false,"mode":"js"},{"id":198,"value":"Or","pinned":false,"hidden":false,"mode":"md"},{"id":200,"value":"viz.plot({\n type: \"header\",\n text: \"This is my\\npretty title\",\n background_fill: \"#38896F\",\n fill: \"white\",\n textAnchor: \"start\",\n dx: 20,\n margin: 20\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"## 2 - Outline and graticule","pinned":false,"hidden":false,"mode":"md"},{"id":33,"value":"These two elements are very classic on maps made with d3. In geoviz, you can add them directly with the graticule and outline marks.","pinned":false,"hidden":false,"mode":"md"},{"id":35,"value":"viz.outline()","pinned":true,"hidden":false,"mode":"js"},{"id":37,"value":"viz.graticule({ step: 30, strokeDasharray: 5, stroke: \"#38896F\" })","pinned":true,"hidden":false,"mode":"js"},{"id":205,"value":"## 3 - Rhumbs ","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"The rhumbs function allows to display \"rhumb lines\" like on old portolan charts.","pinned":false,"hidden":false,"mode":"md"},{"id":207,"value":"viz.rhumbs({ nb: 36, strokeDasharray: 5, stroke: \"#38896F\", strokeWidth: 2 })","pinned":true,"hidden":false,"mode":"js"},{"id":41,"value":"## 4 - Scalebar & Noth arrow","pinned":false,"hidden":false,"mode":"md"},{"id":141,"value":"The viz.scalebar() function, based on [d3-geo-scale-bar](https://github.com/HarryStevens/d3-geo-scale-bar), uses much the same parameters. See some examples [here](https://observablehq.com/@neocartocnrs/geoviz-scalebar). The viz.north() function allow to add a North arrow on the map. ","pinned":false,"hidden":false,"mode":"md"},{"id":139,"value":"let svg = viz.create({\n domain: aus,\n projection: \"mercator\",\n width: 800,\n background: \"#c2e6f2\",\n margin: 20\n });\n svg.path({ datum: aus, fill: \"white\", fillOpacity: 0.3 });\n svg.scalebar({\n tickValues: [0, 200]\n //distance: 500,\n //units: \"mi\",\n //tickSize: 5,\n //pos: [20, svg.height - 30]\n });\n svg.north({ scale: 2, pos: [50, 50] });\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"id":77,"value":"## 5 - Let's make a pretty map template","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"First, we import a nice font-family","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"viz.tool.addfonts([\n {\n fontFamily: \"Slackey\",\n url: await FileAttachment(\"Slackey-Regular.ttf\").url()\n }\n])","pinned":true,"hidden":false,"mode":"js"},{"id":137,"value":"Et voilà!","pinned":false,"hidden":false,"mode":"md"},{"id":79,"value":"let svg = viz.create({\n domain: aus,\n width: 800,\n margin: 20,\n projection: \"mercator\",\n fontFamily: \"Slackey\"\n });\n svg.outline();\n svg.path({ datum: aus, fill: \"#38896F\" });\n svg.path({ datum: aus_roads, stroke: \"white\", strokeOpacity: 0.2 });\n svg.scalebar();\n svg.north({ pos: [75, 125], scale: 2, fill: \"white\" });\n svg.header({\n text: \"Hello Australia\",\n background_fill: \"#38896F\",\n margin: 10,\n fill: \"white\",\n fontSize: 50\n });\n svg.footer({\n text: \"Made with Geoviz\"\n });\n svg.graticule({ stroke: \"white\", strokeWidth: 2, strokeDasharray: 10 });\n svg.graticule({\n stroke: \"black\",\n strokeOpacity: 0.2,\n strokeWidth: 2,\n strokeDasharray: 10,\n\n transform: \"translate(2,2)\"\n });\n display(svg.render())\n","pinned":true,"hidden":false,"mode":"js"},{"id":9,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"import {\n style,\n world,\n disclaimer,\n aus,\n aus_roads,\n viz\n} from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js"},{"id":27,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"2","titling":"auto"}