Public
Edited
Feb 9, 2023
<svg width=${width} height=${height} viewBox="0 0 ${width} ${height}">
<path d="${p}" stroke="black" fill="none" />
</svg>
p = d3.line()([
[10, 10],
[190, 10]
])
viewof height = Inputs.range([0, 200], { label: "Height", step: 1 })
viewof width = Inputs.range([0, 200], { label: "Width", step: 1 })
levelLine = d3.line(
(d) => d.step,
(d) => d.value
)
levels = {
replay;
let vx = width / 2,
vy = height / 2;
const data = [];
let numbers = [10, 20, 5, 60, 100, 40, 70];
for (let index = 0; index < numbers.length; ++index) {
data.push({
step: (vx += index * 5),
value: numbers[index]
});
await Promises.delay(200);
yield data;
}
}
viewof replay = Inputs.button("Replay")
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.
