A Voronoi diagram partitions a two-dimensional plane into regions based on a set of input points. Each unique input point maps to a corresponding region, where each region represents all points that are closer to the input point than to any other input point.

Not only are Voronoi diagrams 😍, but they can be used to improve the interactive experience of a visualization. This is most often accomplished by overlaying an invisible voronoi grid on top of the visualization to increase the target area of interaction sites such as points on a scatter plot.

The @visx/voronoi package provides a wrapper around the existing d3-voronoi package with some react-specific utilities.


npm install --save @visx/voronoi


The @visx/voronoi package exports a wrapped version of the d3 voronoi layout for flexible usage, as well as a <VoronoiPolygon /> component for rendering Voronoi regions.

import { voronoi, VoronoiPolygon } from '@visx/voronoi';

const points = Array(n).fill(null).map(() => ({
  x: Math.random() * innerWidth,
  y: Math.random() * innerHeight,

// width + height set an extent on the voronoi
// x + y set relevant accessors depending on the shape of your data
const voronoiLayout = voronoi({
  x: d => d.x,
  y: d => d.y,

const voronoiDiagram = voronoiLayout(data);
const polygons = voronoiDiagram.polygons(); // equivalent to voronoiLayout.polygons(points)

return (
      {polygons.map((polygon) => (
        <VoronoiPolygon key={...} polygon={polygon} />
      {points.map(({ x, y }) => (
        <circle key={...} cx={x} cy={y} />

For more advanced usage with events, see this example. Additional information about the voronoi layout + diagram can be found in the d3-voronoi documentation.




# heightnumber | undefined

The total width of the voronoi layout.

Default 0

# widthnumber | undefined

The total width of the voronoi layout.

Default 0

# x((d: Datum) => number) | undefined

Set the x-value accessor function for the voronoi layout.

# y((d: Datum) => number) | undefined

Set the y-value accessor function for the voronoi layout.

#<VoronoiPolygon />

# children(({ path, polygon }: { path: string; polygon: [number, number][]; }) => ReactNode) | undefined

Override render function which is provided polygon and generated path.

# classNamestring | undefined

className to apply to path element.

# polygon[number, number][] | undefined

Array of coordinate arrays for the polygon (e.g., [x,y, x1,y1, ...]), used to generate polygon path.