How can we use D3.js, d3-delaunay, to create a Voronoi background? The guide from the official page is really hard to follow. The example page is even worst. For example:
view = {
const context = DOM.context2d(width, height);
context.clearRect(0, 0, width, height);
context.fillStyle = "black";
context.beginPath();
voronoi.delaunay.renderPoints(context, 1);
context.fill();
context.lineWidth = 1.5;
const segments = voronoi.render().split(/M/).slice(1);
let i = 0;
for (const e of segments) {
context.beginPath();
context.strokeStyle = d3.hsl(360 * Math.random(), 0.7, 0.5);
context.stroke(new Path2D("M" + e));
if (i++ % 5 === 0) yield context.canvas;
}
}
There is no other basic code structure - importing D3, declaring variables, and targeting an HTML element. How do apply and use this view object then?
I have looked around online. Still can't find any reliable guide for d3-delaunay. Any ideas?
EDIT:
I just want to use d3-delaunay on a web page, plain HTML with classic JS, without anything from Observerable HQ. But the documentation from D3.js is tightly coupled with Observable HQ. So I have no idea how to get d3-delaunay to work at all.
The creator or the team of D3.js never seems to care much about how unfriendly and counter-intuitive Observerable HQ is for some users. Platforms like Codepen are great. But how can a platform like Observerable HQ is ever conceived and created? It creates another BIG unnecessary obstacle layer on a JavaScript library.
Here is a possible converted code. Notice that you can easily connect the DOM API with Observablehq abstractions, losing the reactivity from the Observablehq runtime.
<script type="module">
import * as d3 from "https://cdn.skypack.dev/d3@7";
const w = window.innerWidth;
const h = (w * 9) / 16;
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d"); // DOM.context2d(width, height);
canvas.width = w;
canvas.height = h;
const data = Array(100)
.fill()
.map((_, i) => ({ x: (i * w) / 100, y: Math.random() * h }));
const voronoi = d3.Delaunay.from(
data,
(d) => d.x,
(d) => d.y
).voronoi([0, 0, w, h]);
context.clearRect(0, 0, w, h);
context.fillStyle = "black";
context.beginPath();
voronoi.delaunay.renderPoints(context, 1);
context.fill();
context.lineWidth = 1.5;
const segments = voronoi.render().split(/M/).slice(1);
let i = 0;
for (const e of segments) {
context.beginPath();
context.strokeStyle = d3.hsl(360 * Math.random(), 0.7, 0.5);
context.stroke(new Path2D("M" + e));
}
// no yield context.canvas; as we're not on a generator
document.querySelector("#app").appendChild(canvas);
</script>
<div id="app"></div>