Public
Edited
Jan 27, 2024
1 fork
svg = html`<svg height="1500" id="lines"></svg>`
j = {
f();
const line = d3
.line()
.x(([x, y]) => x)
.y(([x, y]) => y)
.curve(d3.curveBasisOpen);
const li = d3.select("#lines").selectAll("path").data(data);
li.enter()
.append("path")
.attr("fill", "none")
.attr("stroke-width", "2")
.attr("stroke", (_, i) => colors[i])
.merge(li)
.attr("d", line)
.style("stroke-dasharray", function (d) {
return d3.select(this).node().getTotalLength();
})
.style("stroke-dashoffset", function (d) {
return d3.select(this).node().getTotalLength() / (step - 1);
})
.transition()
.ease(d3.easeLinear)
.duration(200)
.style("stroke-dashoffset", 0)
.style();
//f();
}
colors = ["#795548ca", "#767948ca", "#392e13ca"]
f = () => {
setTimeout(() => {
go();
}, 200);
}
g = () => {
// f();
}
mutable data = [[[10,0],[30.32969926898278,15],[21.807021454676978,30],[14.9985425246221,45]],[[20,0],[10.006568939417399,15],[30.04735406287494,30],[21.44519241648385,45]],[[30,0],[23.472552675485172,15],[11.222471223439488,30],[31.11293885603404,45]]]
JSON.stringify(data)
mutable step = 4
go = () => {
mutable step = step + 1;
mutable data = data.map((d) => {
let last = d[d.length - 1][0];
let r1 = Math.random() * 3;
let x = last < 15 ? 30 : last <= 25 ? 10 : 20;
return [...d, [x + r1, step * 15]];
});
}
// data2 = d3.range(step)
// .map((d,i,o)=>d===0?
// [[10,0],[20,0],[30,0],[40,0]]:
// o[i-1].map(([x,y]=>²)))
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.
