2c:null 2d:["$","title",null,{"children":"Path mark | me | Observable"}] 32:[] 30:{"id":"5e321b46f84cc590","slug":null,"title":"Path mark","thumbnail":"96c1e60512b1854a1448a4c79bc2409d6c5ade2b80b6332399827e6dd2a9fe29","access_level":"public","create_time":"$D2024-01-05T11:03:01.018Z","update_time":"$D2024-01-05T11:03:19.204Z","view_time":null,"first_public_time":"$D2024-01-05T11:03:01.018Z","has_unpublished_edits":null,"fork":{"id":"4c32e93fc539296d","slug":"path-mark","title":"Path mark","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"stars":1,"starred":false,"owner":{"type":"team","id":"50dc6be24ccc11d1","login":"uricanal","name":"me","avatar_url":"https://avatars-next.observableusercontent.com/ba1215e517e8ad3b1f5ddb056e88bc8a85e60381952f2863dae1058a4c62c9a2","tier":"starter_2024"},"version":283,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7814363ffdaac621","login":"oriol-canal","name":"Oriol Canal","avatar_url":"https://avatars-next.observableusercontent.com/054cfeef91c4c0e08193f02006638bedc8c03dadb9f97ca8cdfdf7bcd66ae590","tier":null}],"members":[{"type":"individual","id":"7814363ffdaac621","login":"oriol-canal","name":"Oriol Canal","avatar_url":"https://avatars-next.observableusercontent.com/054cfeef91c4c0e08193f02006638bedc8c03dadb9f97ca8cdfdf7bcd66ae590","tier":null,"role":"editor"},{"type":"team","id":"50dc6be24ccc11d1","login":"uricanal","name":"me","avatar_url":"https://avatars-next.observableusercontent.com/ba1215e517e8ad3b1f5ddb056e88bc8a85e60381952f2863dae1058a4c62c9a2","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Path mark","cells":[{"id":0,"value":"# Path mark","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"## 1 - Display a featureCollection","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":32,"value":"The path mark allows you to display a featureCollection (points lines or polygons). You juste have to ue the data attribute. You can customize this layer using all the usual svg attributes such as **`stroke`**, **`fill`**, **`strokeWidth`**, **`fillOpacity`**, **`strokeDasharray`**...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"viz.path({ data: world, fill: \"#38896F\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"If the geoJSON is in lat/long coordinates, it is displayed in the d3.geoEquirectangular projection. If the geometry already has a projection system, you can display it directly by setting the latlong attribute to false. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"world_NaturalEarth = viz.tool.project(world, {\n projection: d3.geoNaturalEarth1()\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viz.path({ data: world_NaturalEarth, fill: \"#38896F\", latlong: false })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"## 2 - data or datum?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"To display geometries, you can use either data or datum. datum lets you display the layer all at once. By default, polygons have no outline. data displays each feature one at a time and lets you iterate on it. This allows you to change the color of individual features and display a tooltip with the tip attribute. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"viz.path({ datum: world, fill: \"#38896F\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viz.path({ data: world, fill: (d) => viz.tool.random(), tip: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"world","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"## 3 - Overlay layers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"To overlay layers, you need to create a container with the create() instruction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"{\n let svg = viz.create({ domain: aus, width: 800 });\n svg.path({ datum: aus, fill: \"#CCC\" });\n svg.path({ datum: aus_roads, stroke: \"#38896F\", strokeWidth: 1.5 });\n svg.path({\n datum: aus_ports,\n fill: \"white\",\n stroke: \"#38896F\",\n strokeWidth: 3\n });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"Note that you can also add a legend with the legend.box() instruction.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":129,"value":"{\n let svg = viz.create({ domain: aus, width: 400 });\n svg.path({ datum: aus, fill: \"#38896F\" });\n svg.legend.box({ rect_fill: \"#38896F\", label: \"Australia\", pos: [130, 270] });\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"import {\n viz,\n style,\n world,\n disclaimer,\n aus_ports,\n aus,\n aus_roads\n} from \"@neocartocnrs/geoviz-appendix\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 31:"$30:body"