viewof xPosition = Inputs.range([10, 300], { step: 1, label: "Position" })
{
const svg = d3.create("svg").attr("width", 400).attr("height", 50);
const circle = svg
.append("circle")
.attr("cx", viewof xPosition.value)
.attr("cy", 10)
.attr("r", 10);
const update = () => {
circle
.transition()
.duration(500)
.attr("cx", viewof xPosition.value);
};
viewof xPosition.addEventListener("input", update);
invalidation.then(() =>
viewof xPosition.removeEventListener("input", update)
);
return Object.assign(svg.node(), { update });
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
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.
