31:T98c7,html ` `32:[] 2f:{"title":"Tartan and Tweed Textures / Patterns in Vega-Lite","cells":[{"id":0,"value":"md`# Tartan and Tweed Textures / Patterns in Vega-Lite`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md `Define SVG patterns for use in Vega-lite within <svg><def></def></svg>. [This blogpost](https://vanseodesign.com/web-design/svg-pattern-element/) is a good introduction to working with patterns in SVG.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"md`\n[Tartanify](https://tartanify.com/) has over 5,000 tartan patterns as repeating tiles in SVG󠁧󠁢󠁳󠁣󠁴󠁳󠁣󠁴󠁿! To use them, you want to grab the tartan SVG as an encoded URI (more info on what that is [here](https://css-tricks.com/how-we-created-a-static-site-that-generates-tartan-patterns-in-svg/#article-header-id-2)). It's easy to do by navigating to the Tartanify page with the tartan of your choice, opening up your browser's Developer Tools and grabbing the encoded URI from the 'style' of <div class=\"bgtartan\"> inside <main class=\"wrapper\"><div class=\"content\">. The tartans used here are defined as patterns at the bottom of the page. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":419,"value":"md `\nTo adjust the pattern scale, change the 'height' and 'width' of the <pattern> element and <image> element within it.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"md `\n## Swatches\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"data = [{name:'Houndstooth', value: 12, category: 'A'},\n {name:'Stuart', value: 8, category: 'B'},\n {name:'Gearach Woodcock Tweed', value: 5, category: 'C'},\n {name:'Gift of Life Michigan', value: 10, category: 'D'},\n {name:'Black Watch', value: 8, category: 'E'},\n {name:'Prince of Wales Check', value: 17, category: 'F'},\n {name:'Burberry', value: 9, category: 'G'},\n {name:'Tartan', value: 10, category: 'H'}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":90,"value":"pattern_scale = ({\n domain: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],\n range: ['url(#houndstooth)', 'url(#Stuart)', 'url(#tweed)','url(#michigan)', 'url(#blackWatch)', 'url(#POW)', 'url(#Burberry)', 'url(#tartan)']\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({size: 45}) \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 .height(400)\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":374,"value":"md `## Tweed / Tartan defined as SVG patterns:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","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"}