D3.js: d3-delaunay - how to get started?

Question

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.

Answer 1

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>