GROUPING SVG elements
height= 200
data_arr= Array.from( { length: 100}).map( d => ({
x: Math.random() * width,
y: Math.random() * height
}))
html`
<svg viewBox= "0 0 ${width} ${height}">
${ data_arr.map(
d=>
`<g transform= "translate( ${d.x}, ${d.y})">
<circle r="3"/>
<text >N</>
</g>`
)}
</svg>
`
html`
<svg viewBox= "0 0 ${width} ${height}">
${data_arr.map( d=>
`<g transform= "translate( ${d.x}, ${d.y})">
<circle fill="green" r="3"/>
</g>`
)}
<path stroke="blue" fill= "none" d= "$"
</svg>
`
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.
