30:[] 2e:{"title":"SVG filters and clip","cells":[{"id":0,"value":"# SVG filters and clip","pinned":false,"hidden":false,"mode":"md"},{"id":16,"value":"disclaimer","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"The SVG format is really great for creating beautiful, aesthetic maps. You can modify thicknesses, colors, opacities, define complex dotted lines, etc. The SVG format also allows the use of filters, defined in SVG by the `` element, which must be placed in the `` section of the file. In `geoviz`, a set of useful filters has been predefined. ","pinned":false,"hidden":false,"mode":"md"},{"id":43,"value":"## 1 - Blur","pinned":false,"hidden":false,"mode":"md"},{"id":48,"value":"The effect.blur() function is used to define a blur filter. The id parameter defines the filter identifier. The stdDeviation parameter determines the blur range.","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"viewof stdDeviation = Inputs.range([0, 15], {\n label: \"stdDeviation\",\n step: 0.1,\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":50,"value":"{\n let svg = viz.create({ domain: aus, width: 600, margin: 20 });\n\n // Filter definition\n svg.effect.blur({ id: \"blur\", stdDeviation: stdDeviation });\n\n // Layer display with filter\n svg.path({\n datum: aus,\n fill: \"#38896F\",\n filter: \"url(#blur)\"\n });\n\n // Or directly\n // svg.path({ datum: aus, fill: \"#38896F\", filter: svg.defs.blur({ stdDeviation: stdDeviation }) });\n\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"## 2 - Shadow","pinned":false,"hidden":false,"mode":"md"},{"id":199,"value":"The effect.shadow() function can be used to draw a drop shadow","pinned":false,"hidden":false,"mode":"md"},{"id":212,"value":"viewof stdDeviation2 = Inputs.range([0, 15], {\n label: \"stdDeviation\",\n step: 0.1,\n value: 1.5\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"viewof dx = Inputs.range([0, 15], {\n label: \"dx\",\n step: 1,\n value: 4\n})\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"viewof dy = Inputs.range([0, 15], {\n label: \"dy\",\n step: 1,\n value: 4\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":75,"value":"{\n let svg = viz.create({ domain: aus, width: 600, margin: 20 });\n\n // Shadow Effect\n svg.path({\n datum: aus,\n fill: \"black\",\n fillOpacity: 0.6,\n filter: svg.effect.shadow({\n stdDeviation: stdDeviation2,\n fill: \"black\",\n fillOpacity: 0.7,\n dx: dx,\n dy: dy\n })\n });\n\n // Australia\n svg.path({ datum: aus, fill: \"#38896F\" });\n\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"## 3 - radialGradient","pinned":false,"hidden":false,"mode":"md"},{"id":91,"value":"With effect.radialGradient(), you can create a radial gradient. In addition to the filter id, the function takes several parameters as input. color1 and color2 define the gradient colors. The parameters offset1, offset2, fx and fy define how the gradation is performed. Then, you have to apply it on the fill attribute.","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"viewof color1 = Inputs.color({ label: \"color1\", value: \"#7db054\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"viewof color2 = Inputs.color({ label: \"color2\", value: \"#38896F\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"viewof offset1 = Inputs.range([0, 100], {\n label: \"offset1\",\n step: 1,\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof offset2 = Inputs.range([0, 100], {\n label: \"offset2\",\n step: 1,\n value: 100\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":144,"value":"viewof fx = Inputs.range([0, 100], {\n label: \"fx\",\n step: 1,\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":146,"value":"viewof fy = Inputs.range([0, 100], {\n label: \"fy\",\n step: 1,\n value: 50\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"{\n let svg = viz.create({ domain: aus, width: 600, margin: 20 });\n\n svg.path({\n datum: aus,\n fill: svg.effect.radialGradient({\n color1,\n color2,\n offset1,\n offset2,\n fx,\n fy\n })\n });\n\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":156,"value":"## 4 - clipPath","pinned":false,"hidden":false,"mode":"md"},{"id":159,"value":"The `` SVG element defines a clipping path, to be used by the clip-path property. A clipping path restricts the region to which paint can be applied. In `geoviz`, you can add a clipPath element with the effect.clipPath() function.","pinned":false,"hidden":false,"mode":"md"},{"id":183,"value":"*Please note that the clipPath element is valid for the entire web page, not just within this svg container.*","pinned":false,"hidden":false,"mode":"md"},{"id":170,"value":"{\n let svg = viz.create({\n domain: aus,\n width: 600,\n margin: 20,\n projection: \"mercator\"\n });\n\n // clip definition\n const ausclip = svg.effect.clipPath({ datum: aus });\n\n // Clipped tiles\n svg.tile({ url: \"worldStreet\", clipPath: ausclip });\n\n // Outline of australia\n svg.path({\n data: aus,\n fill: \"none\",\n stroke: \"#38896F\",\n strokeWidth: 1\n });\n\n return svg.render();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":9,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"import { style, disclaimer, aus, viz } from \"@neocartocnrs/geoviz-appendix\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"style","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}