31:[] 2f:{"title":"Path mark","cells":[{"id":0,"value":"# Path mark","pinned":false,"hidden":false,"mode":"md"},{"id":309,"value":"🆕 *Updated for Notebook 2.0*","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"## 1 - Display a featureCollection","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":39,"value":"viz.path({ data: world, fill: \"#38896F\" })","pinned":true,"hidden":false,"mode":"js"},{"id":297,"value":"Or","pinned":false,"hidden":false,"mode":"md"},{"id":299,"value":"viz.plot({ type: \"path\", data: world, fill: \"#38896F\" })","pinned":true,"hidden":false,"mode":"js"},{"id":26,"value":"## 2 - data or datum?","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":83,"value":"viz.path({ datum: world, fill: \"#38896F\" })","pinned":true,"hidden":false,"mode":"js"},{"id":85,"value":"viz.path({ data: world, fill: (d) => viz.tool.random(), tip: true })","pinned":true,"hidden":false,"mode":"js"},{"id":92,"value":"## 3 - Overlay layers","pinned":false,"hidden":false,"mode":"md"},{"id":97,"value":"To overlay layers, you need to create a container with the create() instruction","pinned":false,"hidden":false,"mode":"md"},{"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 display(svg.render())\n}","pinned":true,"hidden":false,"mode":"js"},{"id":125,"value":"Note that you can also add a legend with the legend.box() instruction.","pinned":false,"hidden":false,"mode":"md"},{"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 display(svg.render())\n}","pinned":true,"hidden":false,"mode":"js"},{"id":5,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"import {\n viz,\n style,\n world,\n disclaimer,\n aus_ports,\n aus,\n aus_roads\n} from \"observable:@neocartocnrs/geoviz-appendix\"","pinned":true,"hidden":false,"mode":"js"},{"id":9,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"2","titling":"auto"}