svg = html`<svg height="${height}" id="lines"></svg>`
curve = d3.curveMonotoneX
{
let prevscroll = 0;
addEventListener("scroll", (e) => {
console.log(e);
});
}
j = {
f();
const line = d3
.line()
.x(([x, y]) => x)
.y(([x, y]) => y)
.curve(curve);
const li = d3
.select("#lines")
.on("mousemove", function ({ x, y }) {
let ss = height / (height - (y - 70));
d3.select(this)
.selectAll("path")
.style("stroke-dashoffset", function (d) {
return d3.select(this).node().getTotalLength() / ss;
});
})
.selectAll("path")
.data(data2);
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 0;
})
.transition()
.ease(d3.easeLinear)
.duration(200)
.style();
//f();
}
colors = ["#795548ca", "#767948ca", "#392e13ca", "#a92e13ca"]
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 = [0, 1, 2, 3].map((j) =>
d3.range(steps).map((d, i, o) => {
let r1 = Math.random() * 3;
return [10 + ((i + j) % 4) * 10 + r1, i * 20];
})
)
height = 1500
steps = height / 20
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.
