@visx/voronoi
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.2 • Public • Published

    @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.

    Install

    npm i @visx/voronoi

    DownloadsWeekly Downloads

    26,894

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    12.6 kB

    Total Files

    15

    Last publish

    Collaborators

    • vx-hshoff
    • hshoff
    • christopher.card.williams
    • lencioni