@visx/voronoi

What is @visx/voronoi?

@visx/voronoi is a part of the VisX library, which provides a collection of reusable low-level visualization components for React. The @visx/voronoi package specifically deals with creating and rendering Voronoi diagrams, which are a way of dividing a plane into regions based on distance to a specific set of points.

What are @visx/voronoi's main functionalities?

Creating a Voronoi Layout

This feature allows you to create a Voronoi layout using a set of data points. The `d3.voronoi()` function is used to generate the Voronoi diagram, and the `polygons` method is used to get the Voronoi cells.

const voronoi = d3.voronoi().extent([[0, 0], [width, height]]); const polygons = voronoi.polygons(data);

Rendering Voronoi Cells

This feature allows you to render the Voronoi cells as SVG paths. Each cell is represented as a path element, and the `d` attribute is set to the coordinates of the cell.

polygons.map((polygon, i) => <path key={`polygon-${i}`} d={`M${polygon.join('L')}Z`} />);

Handling Voronoi Events

This feature allows you to handle events on the Voronoi cells. For example, you can add `onMouseEnter` and `onMouseLeave` event handlers to each cell to handle mouse events.

<path key={`polygon-${i}`} d={`M${polygon.join('L')}Z`} onMouseEnter={() => handleMouseEnter(polygon)} onMouseLeave={() => handleMouseLeave(polygon)} />

Other packages similar to @visx/voronoi

d3-voronoi

The `d3-voronoi` package is a part of the D3.js library and provides similar functionality for creating and rendering Voronoi diagrams. It is a lower-level library compared to @visx/voronoi and requires more manual setup, but offers more flexibility and control over the Voronoi diagram generation process.

README

@visx/voronoi

Overview

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.

Installation

npm install --save @visx/voronoi

Usage

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,
  width,
  height,
});

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

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

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