Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

@vx/voronoi

0.0.183 • Public • Published

@vx/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 @vx/voronoi package provides a wrapper around the existing d3-voronoi package.

Usage

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

import { voronoi, VoronoiPolygon } from '@vx/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, // maybe pass a scale here?
  y: d => d.y,
  width,
  height,
});
 
const voronoiDiagram = voronoiLayout(data);
const polygons = voronoiLayout.polygons(points); // equivalent to voronoiDiagram.polygons()
 
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.

Installation

npm install --save @vx/voronoi

Components

API

<VoronoiPolygon />

# VoronoiPolygon.children<func>

# VoronoiPolygon.className<string>

# VoronoiPolygon.polygon<arrayOf[object Object]>

install

npm i @vx/voronoi

Downloadsweekly downloads

4,302

version

0.0.183

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability