d3 / d3

Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

Home Page:https://d3js.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Better documentation needed to get d3-delaunay started

lautiamkok opened this issue · comments

How can we learn d3-delaunay without Observable? It is supper difficult to understand how D3 and d3-delaunay work on Observable. Any user friendly guide or documentation to get d3-delaunay started easily with plain JavaScript, HTML and CSS locally?

For example, I want to know how this Voronoi is created:

    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 in the Observable environment. How do apply and use this view object then?

Observable is really a BIG obstacle to newcomers. Please consider providing us with friendly documentation.

Thanks,