Published
Edited
Jul 8, 2020
3 stars
{
const context = DOM.context2d(width, 500);
context.beginPath();
d3.Delaunay.from(points).render(context);
context.stroke();
context.save();
context.beginPath();
context.setLineDash([3, 3]);
context.strokeStyle = "brown";
context.lineWidth = 1.5;
context.moveTo(...points[0]);
context.lineTo(...points[2]);
context.stroke();
context.restore();
context.fillText("Delaunay triangulation", 20, 20);
context.translate(width / 2, 0);
context.beginPath();
constrained.render(context);
context.stroke();
context.save();
context.beginPath();
context.strokeStyle = "brown";
context.lineWidth = 1.5;
for (const [a, b] of constrains) {
context.moveTo(...points[a]);
context.lineTo(...points[b]);
}
context.stroke();
context.fillText("Constrained triangulation", 20, 20);
return context.canvas;
}
points = [[150, 50], [50, 200], [150, 350], [250, 200]]
constrains = [[0, 2]]
constrained = {
const del = d3.Delaunay.from(points);
const con = new Constrainautor(del._delaunator);
for (const c of constrains) con.constrainOne(...c);
con.delaunify();
return del;
}
d3 = require("d3-delaunay@5")
Constrainautor = require("@kninnug/constrainautor")
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.
