Data visualisation design + code.
Interactive data journalist @TheEconomist
Published
Edited
Apr 3, 2020
1 fork
8 stars
html `
<svg height="0" width="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<!-- From SVG stripe generator
https://www.coffee-break-designs.com/labs/svg_stripe_generator/ -->
<pattern id="pattern_1" patternUnits="userSpaceOnUse" width="3" height="3" patternTransform="rotate(45)">
<line x1="0" y="0" x2="0" y2="3" stroke="#000000" stroke-width="4" />
</pattern>
<!-- From Pattern Fills by Irene Ros
http://iros.github.io/patternfills/sample_svg.html
http://iros.github.io/patternfills/ -->
<pattern id="pattern_2" patternUnits="userSpaceOnUse" width="8" height="8"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc4JyBoZWlnaHQ9JzgnPgogIDxyZWN0IHdpZHRoPSc4JyBoZWlnaHQ9JzgnIGZpbGw9JyNmZmYnLz4KICA8cGF0aCBkPSdNMCAwTDggOFpNOCAwTDAgOFonIHN0cm9rZS13aWR0aD0nMC41JyBzdHJva2U9JyNhYWEnLz4KPC9zdmc+Cg==" x="0" y="0" width="8" height="8"> </image> </pattern>
<pattern id="pattern_3" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPScjNTU5NGU3Jy8+CiAgPHBhdGggZD0nTS0xLDEgbDIsLTIKICAgICAgICAgICBNMCwxMCBsMTAsLTEwCiAgICAgICAgICAgTTksMTEgbDIsLTInIHN0cm9rZT0nd2hpdGUnIHN0cm9rZS13aWR0aD0nMScvPgo8L3N2Zz4=" x="0" y="0" width="10" height="10"> </image> </pattern>
<pattern id="houndstooth" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMTAnIGhlaWdodD0nMTAnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+CiAgPHBhdGggZD0nTTAgMEw0IDQnIHN0cm9rZT0nI2FhYScgZmlsbD0nI2FhYScgc3Ryb2tlLXdpZHRoPScxJy8+CiAgPHBhdGggZD0nTTIuNSAwTDUgMi41TDUgNUw5IDlMNSA1TDEwIDVMMTAgMCcgc3Ryb2tlPScjYWFhJyBmaWxsPScjYWFhJyBzdHJva2Utd2lkdGg9JzEnLz4KICA8cGF0aCBkPSdNNSAxMEw1IDcuNUw3LjUgMTAnIHN0cm9rZT0nI2FhYScgZmlsbD0nI2FhYScgc3Ryb2tlLXdpZHRoPScxJy8+Cjwvc3ZnPgo=" x="0" y="0" width="10" height="10"> </image> </pattern>
</defs>
</svg>
`
data = [{name:'A', value: 3, category: 'W' },
{name:'B', value: 10, category: 'X'},
{name:'C', value: 7, category: 'Y'},
{name:'D', value: 12, category: 'Z'}]
pattern_scale = ({
domain: ['W', 'X', 'Y', 'Z'],
range: ['url(#pattern_1)', 'url(#pattern_2)', 'url(#pattern_3)', 'url(#houndstooth)']
});
vl.markBar()
.data(data)
.encode(
vl.y().fieldN("name"),
vl.x().fieldQ("value"),
vl.fill().fieldN("category").scale(pattern_scale)
)
.render({renderer: 'svg'}) // Make sure you're rendering an svg (not the default, canvas) or it won't work
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
