Published
Edited
Sep 21, 2022
4 stars
Insert cell
Insert cell
x = d3.scaleLinear([0, 10], [10, width - 10])
Insert cell
viewof n = Inputs.range(x.domain(), {label: "n", step: 1, value: 0})
Insert cell
Insert cell
htl.svg`<svg viewBox="0 0 ${width} 20">
<circle r="10" cy="10" cx=${x(n)}>
</svg>`
Insert cell
Insert cell
chart = {
const node = htl.svg`<svg viewBox="0 0 ${width} 20">
<circle r="10" cy="10" cx=${x(0)}>
</svg>`

return Object.assign(node, {
update(value) {
d3.select(node).select("circle").transition().duration(1000).attr("cx", x(value));
}
});
}
Insert cell
Insert cell
update = chart.update(n)
Insert cell
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