31:T7e5,html ` `32:[] 2f:{"title":"How to use Textures / Patterns in Vega-Lite","cells":[{"id":0,"value":"md`# How to use Textures / Patterns in Vega-Lite`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md `Define svg patterns within <svg><def></def></svg>:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = [{name:'A', value: 3, category: 'W' },\n {name:'B', value: 10, category: 'X'},\n {name:'C', value: 7, category: 'Y'},\n {name:'D', value: 12, category: 'Z'}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"pattern_scale = ({\n domain: ['W', 'X', 'Y', 'Z'],\n range: ['url(#pattern_1)', 'url(#pattern_2)', 'url(#pattern_3)', 'url(#houndstooth)']\n});","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"md `Render the chart as SVG and apply patterns using .fill:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"vl.markBar() \n .data(data) \n .encode(\n vl.y().fieldN(\"name\"), \n vl.x().fieldQ(\"value\"), \n vl.fill().fieldN(\"category\").scale(pattern_scale)\n )\n .render({renderer: 'svg'}) // Make sure you're rendering an svg (not the default, canvas) or it won't work","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"import {vl} from '@vega/vega-lite-api'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}