30:T1905, 31:[] 2e:{"title":"Shapes & Patterns","cells":[{"id":0,"value":"# Shapes & Patterns","pinned":false,"hidden":false,"mode":"md"},{"id":116,"value":"You can use custom shapes and custom patterns (fills & textures) for marks as well as for visually encoding your data","pinned":false,"hidden":false,"mode":"md"},{"id":417,"value":"vegaEmbed(shapeSpec)","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"vegaEmbed(fillGradientSpec)","pinned":false,"hidden":false,"mode":"ojs"},{"id":440,"value":"vegaEmbed(strokeGradientSpec)","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"vegaEmbed(patternSpec, { renderer: \"svg\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":738,"value":"vegaEmbed(iconSpec, { renderer: \"svg\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"## Shapes\n\nWe can use `SVG path` or `SVG icons` as custom shapes\n\n### Paths\nTo use custom shape, we will use a custom [SVG Path](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/path) as a `point` mark. \n\nAny shape path can be used as is, but for correct size (encoding), custom shape paths should be defined within a square bounding box with coordinates ranging from -1 to 1 along both the x and y dimensions.\n\nIf you use a larger SVG grid area, then the size encoding has to be managed manually. Do ensure that all the shape are in the same bounding box.","pinned":false,"hidden":false,"mode":"md"},{"id":239,"value":"petals = ({\n p1: \"M0 0 C50 50 50 100 0 100 C-50 100 -50 50 0 0\",\n p2: \"M-35 0 C-25 25 25 25 35 0 C50 25 25 75 0 100 C-25 75 -50 25 -35 0\",\n p3: \"M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0\",\n p4: \"M0 0 C50 25 50 75 0 100 C-50 75 -50 25 0 0\",\n p5: \"M0 100 C50 50 50 100 0 0 C-50 100 -50 50 0 100\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":410,"value":"vegaEmbed(shapeSpec)","pinned":false,"hidden":false,"mode":"ojs"},{"id":364,"value":"shapeSpec = ({\n width: { step: 100 },\n title: \"Custom Shape Paths\",\n data: { values: [1, 2, 3, 4, 5] },\n mark: { type: \"point\", size: 2 },\n encoding: {\n x: { field: \"data\", type: \"nominal\" },\n shape: {\n field: \"data\",\n type: \"nominal\",\n scale: { range: Object.values(petals) }\n }\n },\n config: theme\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":594,"value":"### Icons\n\nIf we are using a set of icons as SVG, we can import them as image marks.\n\nBelow we have 5 SVG icons in a 24 x 24 px grid\n- Apple\n- Nuts\n- Orange\n- Fish\n- Mushrooms","pinned":false,"hidden":false,"mode":"md"},{"id":605,"value":"$30","pinned":false,"hidden":false,"mode":"html"},{"id":741,"value":"To load it in VegaEmbed as image marks (in Observablehq), we will use an hosted url for these icons","pinned":false,"hidden":false,"mode":"md"},{"id":746,"value":"icons = [\n { name: \"apple\", icon: \"https://amitkaps.com/ixd20/icons/apple.svg\" },\n { name: \"nuts\", icon: \"https://amitkaps.com/ixd20/icons/nuts.svg\" },\n { name: \"orange\", icon: \"https://amitkaps.com/ixd20/icons/orange.svg\" },\n { name: \"fish\", icon: \"https://amitkaps.com/ixd20/icons/fish.svg\" },\n { name: \"mushroom\", icon: \"https://amitkaps.com/ixd20/icons/mushroom.svg\" }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":749,"value":"vegaEmbed(iconSpec, { renderer: \"svg\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":636,"value":"iconSpec = ({\n width: { step: 100 },\n height: 72,\n title: \"Icons as Image Marks\",\n data: { values: icons },\n mark: { type: \"image\" },\n encoding: {\n x: { field: \"name\", type: \"nominal\" },\n url: { field: \"icon\", type: \"nominal\" }\n },\n config: theme\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"## Patterns\n\nPatterns can be created using *gradients* or *textures* added to the marks","pinned":false,"hidden":false,"mode":"md"},{"id":376,"value":"### Gradients\n\nYou can apply `linear` or `radial` gradient to the shapes","pinned":false,"hidden":false,"mode":"md"},{"id":425,"value":"vegaEmbed(fillGradientSpec)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":380,"value":"fillGradientSpec = ({\n width: { step: 100 },\n title: \"Fill Radial Gradient\",\n data: { values: [1, 2, 3, 4, 5] },\n mark: {\n type: \"point\",\n size: 2,\n stroke: null,\n fill: {\n gradient: \"radial\",\n stops: [\n { offset: 0.0, color: \"crimson\" },\n { offset: 1.0, color: \"mediumblue\" }\n ]\n }\n },\n encoding: {\n x: { field: \"data\", type: \"nominal\" },\n shape: {\n field: \"data\",\n type: \"nominal\",\n scale: { range: Object.values(petals) }\n }\n },\n config: theme\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":438,"value":"vegaEmbed(strokeGradientSpec)","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"strokeGradientSpec = ({\n width: { step: 100 },\n title: \"Stroke Linear Gradient\",\n data: { values: [1, 2, 3, 4, 5] },\n mark: {\n type: \"point\",\n size: 2,\n stroke: {\n gradient: \"linear\",\n stops: [\n { offset: 0.0, color: \"red\" },\n { offset: 1.0, color: \"blue\" }\n ]\n }\n },\n encoding: {\n x: { field: \"data\", type: \"nominal\" },\n shape: {\n field: \"data\",\n type: \"nominal\",\n scale: { range: Object.values(petals) }\n }\n },\n config: theme\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":473,"value":"## Textures\n\nWe can use texture patterns as fills to our marks. Here we are loading an SVG on the page with a unique id: `#texture` and referencing it in our visualisation using a url\n\n*Note*: This will only work with the SVG renderer for VegaLite, so we need to pass that along","pinned":false,"hidden":false,"mode":"md"},{"id":516,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":555,"value":"vegaEmbed(patternSpec, { renderer: \"svg\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":511,"value":"patternSpec = ({\n width: { step: 100 },\n title: \"Fill Pattern using Url\",\n data: { values: [1, 2, 3, 4, 5] },\n mark: {\n type: \"point\",\n size: 2,\n stroke: null,\n fill: \"url(#texture)\"\n },\n encoding: {\n x: { field: \"data\", type: \"nominal\" },\n shape: {\n field: \"data\",\n type: \"nominal\",\n scale: { range: Object.values(petals) }\n }\n },\n config: theme\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":124,"value":"### Libraries","pinned":false,"hidden":false,"mode":"md"},{"id":127,"value":"vegaEmbed = require(\"vega-embed\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":322,"value":"theme = ({\n // Default Theme for the Visualisation\n padding: { top: 30, bottom: 30, right: 20, left: 20 },\n font: \"ui-monospace, menlo, consolas, monospace\",\n title: { offset: 20, fontWeight: 500 },\n view: { stroke: null, fill: null },\n axis: {\n domain: false,\n ticks: false,\n title: false,\n labels: false\n },\n legend: { disable: true }\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}