Graphics Developer, Creative Coder, DataViz Cognoscenti
Public
Edited
Jun 17, 2024
Plot.plot({
width,
marks: [
Plot.dot(dots, { x: `x`, y: `y`, fill: `black` }),
Plot.link(lines, {
opacity: 0.1,
x1: (d) => d.from[0],
y1: (d) => d.from[1],
x2: (d) => d.to[0],
y2: (d) => d.to[1]
})
]
})
htl.html`<svg>
<path d=${path_def} fill="none" stroke="red" />
</svg>`
path_def = delaunay.render()
lines = {
const triangles = Array.from(delaunay.trianglePolygons());
return triangles
.map((points) =>
[0, 1, 2].map((k) => ({
from: points[k],
to: points[k + 1]
}))
)
.flat(1);
}
delaunay = d3.Delaunay.from(
dots,
(d) => d.x,
(d) => d.y
)
dots = d3.range(100).map((_, index, arr) => {
const num_dots = arr.length;
const mid = num_dots / 2;
return {
index,
x: 100 * Math.sin((index * now) / 5e5),
y: 50 * Math.cos((index * now) / 4e5)
};
})
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.
