How to use @vx/voronoi - 3 common examples
To help you get started, we’ve selected a few @vx/voronoi examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
hshoff / vx / packages / vx-demo / components / charts / VoronoiChart.js View on Github 
static getUpdatedState(props) {
const { width, height, margin } = props;
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const xScale = scaleLinear({
domain: extent(data, d => d.x),
range: [0, innerWidth]
});
const yScale = scaleLinear({
domain: extent(data, d => d.y),
range: [innerHeight, 0]
});
const voronoiDiagram = voronoi({
x: d => xScale(d.x),
y: d => yScale(d.y),
width: innerWidth,
height: innerHeight
})(data);
return {
selected: null,
selectedNeighbors: null,
xScale,
yScale,
voronoiDiagram,
innerWidth,
innerHeight
};
}static getVoronoi(props) {
const { x, y, data, width, height } = props;
return voronoiLayout({ x, y, width, height })(data);
}}) => {
if (width < 10) return <div>;
const innerWidth = width - margin.left - margin.right;
const innerHeight = height - margin.top - margin.bottom;
const data = Array(150)
.fill(null)
.map(() => ({
x: Math.random() * innerWidth,
y: Math.random() * innerHeight,
id: Math.random()
.toString(36)
.slice(2)
}));
const voronoiLayout = voronoi({
x: d => d.x,
y: d => d.y,
width: innerWidth,
height: innerHeight
});
const polygons = voronoiLayout.polygons(data);
return (
<svg height="{height}" width="{width}">
{polygons.map(polygon => (
</svg></div>
