Graphics Developer, Creative Coder, DataViz Cognoscenti
Published
Edited
Jul 11, 2021
md`# Voronoi Bug (fixed!)`
{
const path = ({ pathDefinition, point }) => {
return svg.fragment`<path stroke="red" fill="rgba(0, 0, 0, 0.3)" opacity="0.8" d=${pathDefinition} vector-effect="non-scaling-stroke"></circle>`;
};
const container = (children) => {
return html`
<svg style="border: 1px solid black; height: 400px;" viewBox="0 10 40 70" preserveAspectRatio="none">${children}</svg>
`;
};
const pathsBroken = getCells(voronoiPointsBroken).map(path);
const pathsFixed = getCells(voronoiPointsFixed).map(path);
return html`
${container(pathsBroken)}
${container(pathsFixed)}
`;
}
function getCells(points) {
const voronoi = d3Delaunay.Delaunay.from(points).voronoi([0, 0, 100, 100]);
const cells = points.map((point, i) => {
const pathDefinition = voronoi.renderCell(i);
return { pathDefinition, point };
});
return cells;
}
cells = voronoiPointsBroken.map((point, i) => {
const pathDefinition = voronoi.renderCell(i);
return { pathDefinition, point };
})
voronoi = d3Delaunay.Delaunay.from(voronoiPointsBroken).voronoi([
0,
0,
100,
100
])
voronoiPointsFixed = voronoiPointsOriginal.map(([x, y]) => [
x + Math.random() * 0.00001,
y
])
voronoiPointsBroken = voronoiPointsOriginal
d3Format = require("d3-format")
import { html, svg } from "@observablehq/htl"
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.
