Interested in data visualisation, maps, JavasScript, and geology
Public
Edited
Feb 2, 2023
{
const svg = d3.create("svg").attr("width", width).attr("height", 500);
svg
.append("g")
.selectAll("circle")
.data(points)
.join("circle")
.attr("r", 2)
.attr("cx", (d) => d[0])
.attr("cy", (d) => d[1])
.attr("stroke", "black");
let pathLength;
svg
.append("path")
.attr("d", line(points))
.attr("fill", "none")
.attr("stroke", "dimgray")
.attr("stroke-width", 5)
.attr("stroke-opacity", 0.5)
.attr("stroke-dasharray", function () {
return (pathLength = this.getTotalLength());
})
.attr("stroke-dashoffset", pathLength)
.transition()
.duration(points.length * 500)
.on("start", function repeat() {
d3.active(this)
.attr("stroke-dashoffset", 0)
.transition()
.attr("stroke-dashoffset", pathLength)
.transition()
.on("start", repeat);
});
return svg.node();
}
height = 500
points = random2d(width, height, N) //.sort((a, b) => d3.min([a, b]))
line = d3.line().curve(d3[curveSelect])
import { random2d } from "@fil/2d-point-distributions"
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.
