x = d3.scaleLinear([0, 10], [10, width - 10])
viewof n = Inputs.range(x.domain(), {label: "n", step: 1, value: 0})
htl.svg`<svg viewBox="0 0 ${width} 20">
<circle r="10" cy="10" cx=${x(n)}>
</svg>`
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));
}
});
}
update = chart.update(n)
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.
