2e:["$","title",null,{"children":"Layout marks | Nicolas Lambert | Observable"}] 33:[{"id":"360e21066ce88b010bff583c207ebd3d7f58febf13147e773739eedc9cf8bdee4b0448b57603e1c9966f11148294fc4d3d74f14bb881331bb884bfa00f2ddf67","href":"https://static.observableusercontent.com/files/360e21066ce88b010bff583c207ebd3d7f58febf13147e773739eedc9cf8bdee4b0448b57603e1c9966f11148294fc4d3d74f14bb881331bb884bfa00f2ddf67","name":"Slackey-Regular.ttf","type":"font/ttf","lastModified":1702571301550.39,"size":36836}] 31:{"id":"b360dc41264d1074","slug":"layout-marks","title":"Layout marks","thumbnail":"c54618d78f088a28f6413bbdb65f6b8f7d0396616bc58f5b3163e249f5b571af","access_level":"public","create_time":"$D2023-12-14T16:10:46.662Z","update_time":"$D2026-09-04T11:30:26.132Z","view_time":null,"first_public_time":"$D2023-12-15T12:20:33.925Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":"starter_2024"},"version":258,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null}],"members":[{"type":"individual","id":"01f8081399df8778","login":"neocarto","name":"Nicolas Lambert","avatar_url":"https://avatars-next.observableusercontent.com/c01b6664b447a3bb88f88dbfa170e3ef1d61f3a5b13c2fc613c8da5ef8bccb41","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"bfb3f0e24e42a069","slug":"geoviz","title":"geoviz","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"type":"notebook","body":{"title":"Layout marks","cells":[{"id":0,"value":"# Layout marks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":219,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":43,"value":"## 1 - Header and footer","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"viz.header lets you add a title above the map. viz.footer displays text below. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":47,"value":"viz.header()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"viz.footer()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"With options, you can define the way it is displayed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"Or","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"## 2 - Outline and graticule","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"viz.outline()","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"viz.graticule({ step: 30, strokeDasharray: 5, stroke: \"#38896F\" })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"## 3 - Rhumbs ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"The rhumbs function allows to display \"rhumb lines\" like on old portolan charts.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":207,"value":"viz.rhumbs({ nb: 36, strokeDasharray: 5, stroke: \"#38896F\", strokeWidth: 2 })","pinned":true,"hidden":false,"mode":"js","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"## 4 - Scalebar & Noth arrow","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"## 5 - Let's make a pretty map template","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":135,"value":"First, we import a nice font-family","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"Et voilà!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 32:"$31:body" 2d:E{"digest":"NEXT_REDIRECT;replace;/@neocarto/layout-marks;307;"}