svg`
<svg width="400" height="100">
<rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
<circle cx="150" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
`
html`
<svg width="300" height="100" style="border: 1px solid black"></svg>
<!-- style is given to reveal the border -->
`
html`
<svg width="160" height="80">
<circle cx="20" cy="20" r="5" />
<circle cx="0" cy="0" r="10" fill="blue" />
<circle cx="50" cy="50" r="20" fill="red" />
<circle cx="100" cy="50" r="20" fill="red" stroke="green" stroke-width="10" />
</svg>
`
html`
<svg width="160" height="80">
<circle cx="50" cy="40" r="20" fill="red" />
<rect x="50" y="40" width="30" height="30" fill="green"/>
</svg>
`
html`
<svg width="200" height="100">
<line x1="10" y1="10" x2="190" y2="10" stroke="blue" stroke-width="3" />
<line x1="10" y1="30" x2="190" y2="80" stroke="red" stroke-width="3" stroke-dasharray="5 2" />
<line x1="10" y1="80" x2="190" y2="30" stroke="green" stroke-width="10" stroke-linecap="round"/>
</svg>
`
html`
<svg width="300" height="100">
<text x="10" y="20">Text</text>
<text x="0" y="0">Hidden</text> <!-- shows nothing -->
<text x="30" y="40" fill="blue">Blue</text>
<text x="50" y="80" fill="red" font-size="3rem">Large</text>
<text x="80" y="40" fill="green" font-style="italic">Italic</text>
</svg>
`
html`
<svg width="300" height="100">
<text x="50" y="20">Text</text>
<circle cx="50" cy="20" r="3" fill="red" />
<text x="50" y="50" text-anchor="middle">Text</text>
<circle cx="50" cy="50" r="3" fill="red" />
<text x="50" y="80" text-anchor="end">Text</text>
<circle cx="50" cy="80" r="3" fill="red" />
</svg>
`
html`
<svg width="300" height="100">
<text x="50" y="50" text-anchor="middle" alignment-baseline="middle">Text</text>
<circle cx="50" cy="50" r="3" fill="red" />
</svg>
`
html`
<svg width="300" height="100">
<circle cx="50" cy="30" r="3" fill="red" />
<text x="50" y="30">Label</text>
<circle cx="50" cy="80" r="3" fill="blue" />
<text x="50" y="80" dx=".3rem" dy=".3rem">Label</text>
</svg>
`
html`
<svg width="100" height="100">
<path fill="none" stroke="red"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z" />
</svg>
`
html`
<svg width="100" height="100">
<circle cx="40" cy="40" r="25" fill="white" stroke="green" stroke-width="5" />
<circle cx="60" cy="60" r="25" fill="white" stroke="green" stroke-width="5"/>
</svg>
`
html`
<svg width="100" height="100">
<g fill="white" stroke="green" stroke-width="5" transform="translate(40, 40)">
<circle cx="0" cy="0" r="25" />
<circle cx="20" cy="20" r="25" />
</g>
</svg>
`
html`
<svg width="300" height="180">
<circle cx="70" cy="90" r="50" fill="red" stroke="blue" opacity="0.5" stroke-width="10" />
<text x="200" y="130" font-size="2rem" font-style="italic" font-weight="bold">TEXT</text>
<rect x="20" y="30" width="30" height="50" display="none"/>
</svg>
`
html`
<svg width="200" height="100">
<circle cx="50" cy="50" r="5" fill="blue"/>
<circle transform="translate(150, 50)" r="5" fill="red"/>
</svg>
`
html`
<style>
.name { fill: blue; font-weight: bold; font: Arial; }
#cat { fill: green; }
</style>
<svg width="300" height="200">
<text x="50" y="30">Text</text>
<text x="50" y="70" class="name">Class Name</text>
<text x="50" y="110" id="cat" class="name">Cat</text> <!-- id precedes class -->
<text x="50" y="150" class="name" fill="black">Cat</text> <!-- CSS precedes attributes -->
<text x="50" y="190" class="name" style="fill:black">Cat</text> <!-- Inline style attributes precede CSS -->
</svg>
`
{
const svg = d3
.create('svg')
.attr('width', 120)
.attr('height', 150);
const data = [20, 30, 100, 50];
svg
.selectAll('rect')
.data(data)
.join('rect')
.attr('fill', 'steelblue')
.attr('width', 25)
.attr('height', d => d)
.attr('transform', (d, i) => 'translate(' + i * 30 + ',' + (130 - d) + ')');
svg
.append('text')
.attr('transform', 'translate(60, 150)')
.attr('text-anchor', 'middle')
.text('A bar chart');
return svg.node();
}
html`
<svg width="120" height="150">
<!-- Fill here to replicate the bar chart above (without d3.js!)-->
</svg>
`
FileAttachment("wpid-svg-coordinate-system.png")
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.
