Published unlisted
Edited
Sep 19, 2022
Insert cell
# Is XMLSerializer the only way?
Insert cell
Insert cell
function showCircle(radius) {
return htl.html`
<svg viewBox="0 0 ${width} 50">
<circle cx=${0.5*width} cy=${25} r=${radius} fill="red"/>
</svg>
`
}
Insert cell
Insert cell
showCircle(10)
Insert cell
Insert cell
{
const top = htl.html`
<div>
<div>
`
d3.select(top).select('div').html(showCircle(10))
return top;
}
Insert cell
Insert cell
{
const top = htl.html`
<div>
<div>
`
const s = new XMLSerializer();
d3.select(top).select('div').html(s.serializeToString(showCircle(10)))
return top;
}
Insert cell

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.
Learn more