Consultant Designer & Developer
points = {
if (samplingType === "poisson")
return poissonSampling2d(width, height, { minDistance });
return randomPoints(width, height, 300);
}
tessellation = createVoronoiTessellation(width, height, points, iteration)
createVoronoiTessellation = (width, height, pts, iteration = 12) => {
const delaunay = d3.Delaunay.from(
pts,
(d) => d[0],
(d) => d[1]
);
const voronoi = delaunay.voronoi([0, 0, width, height]);
if (iteration === 0) {
const { polygons } = getCentroidAndCellsFromVoronoi(voronoi);
return { points: pts, polygons };
}
for (let k = 0; k < iteration; k++) {
for (let i = 0; i < delaunay.points.length; i += 2) {
const cell = voronoi.cellPolygon(i >> 1);
if (cell === null) continue;
const x0 = delaunay.points[i];
const y0 = delaunay.points[i + 1];
const [x1, y1] = d3.polygonCentroid(cell);
delaunay.points[i] = x0 + (x1 - x0) * 1;
delaunay.points[i + 1] = y0 + (y1 - y0) * 1;
}
voronoi.update();
}
return getCentroidAndCellsFromVoronoi(voronoi);
}
getCentroidAndCellsFromVoronoi = (voronoi) => {
const points = [];
const polygons = [];
for (let poly of voronoi.cellPolygons()) {
polygons.push(poly);
const centroid = d3.polygonCentroid(poly);
points.push(centroid);
}
return {
points,
polygons
};
}
randomPoints = (width, height, num = 100) => {
const focus = {
x: random.range(0, width),
y: random.range(0, height)
};
return math.linspace(num).map(() => {
return [
randomBias(0, width, focus.x, 1),
randomBias(0, height, focus.y, 1)
];
});
}
height = width / 2
svg = htl.svg
// From https://github.com/georgedoescode/generative-utils/blob/master/src/randomBias.js
function randomBias(min, max, bias, influence = 0.5) {
const base = random.range(min, max);
const mix = random.range(0, 1) * influence;
return base * (1 - mix) + bias * mix;
}
Imports
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.
