Doing stuff
Published
Edited
Oct 28, 2021
1 star
{
const svg = d3.create("svg").attr("width", width).attr("height", 200);
const path = svg
.append("path")
.attr("d", line(walk))
.attr("stroke", "black")
.attr("fill", "none");
const [x, y] = getCoordinates(path.node(), progress);
svg
.append("circle")
.attr("cx", x)
.attr("cy", y)
.attr("r", 5)
.attr("fill", "tomato");
return svg.node();
}
function getCoordinates(path, progress) {
const length = path.getTotalLength();
const distance = length * progress;
const point = path.getPointAtLength(distance);
return [point.x, point.y];
}
walk = {
const data = [];
let v = 2;
for (let i = 0; i < 50; ++i) {
v += Math.random() - 0.5;
v = Math.max(Math.min(v, 4), 0);
data.push([i, v]);
}
return data;
}
walkX = d3
.scaleLinear()
.domain([0, 49])
.range([10, width - 10])
walkY = d3
.scaleLinear()
.domain([0, 4])
.range([200 - 10, 10])
line = d3
.line()
.curve(d3.curveBasis)
.x((d) => walkX(d[0]))
.y((d) => walkY(d[1]))
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.
