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.
@vx/voronoi package provides a wrapper around the existing d3-voronoi
@vx/voronoi package exports a wrapped version of the d3
voronoi layout for flexible usage,
as well as a
<VoronoiPolygon /> component for rendering Voronoi regions.
;const points = Arrayn;// width + height set an extent on the voronoi// x + y set relevant accessors depending on the shape of your dataconst voronoiLayout =;const voronoiDiagram = ;const polygons = voronoiLayout; // equivalent to voronoiDiagram.polygons()return<svg><Group>polygonspoints
npm install --save @vx/voronoi
# VoronoiPolygon.polygon<arrayOf[object Object]>