@vx/voronoi

@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 with some react-specific utilities.

Installation

npm install --save @vx/voronoi

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

Changelog

v0.0.199

:boom: Breaking Changes

• [scale] Deprecate rangeRound field in the input of scaleLinear(), scaleLog(), scalePoint(), scalePower(), scaleSqrt(), scaleTime() and scaleUtc(). #766 Instead of

  scaleLinear({ rangeRound: xxx })
  

  Do this instead

  scaleLinear({ range: xxx, round: true });
  

• [scale] Deprecate ticks and tickFormat in the input of scaleQuantize(). It was not really doing anything anyway as both scale.ticks() and scale.tickFormat() do not mutate the scale. #766
• [scale] Remove scale.type field that was attached to the d3 scales. #766
• [grid] @vx/grid components now accept D3 Scale as generic type instead of ScaleInput. Developers should not expect to specify this generic type as it can be inferred from the passed scale. #775
• [grid] Renames GridColumnProps => GridColumnsProps (+s) to match GridRowsProps. #787
• [legend] Update generic types for legend components. #777
• [marker] remove old <Marker /> implementation of a Line and some Text. #783

:rocket: Enhancements

• [scale] new functions & New fields for the scale configs. #766
• [scale] add meta scale types. #770
• [scale] Add fallback overload for createScale. #791
• [scale] add new types: AnyD3Scale, InferD3ScaleOutput, InferD3ScaleDiscreteInput, InferD3ScaleThresholdInput and ScaleInput. Add new utilities functions: getTicks, coerceNumber and toString. #773
• [scale] add reverse field to scale config. This will reverse the range. Useful when the ranges are programmatically supplied to the scale factories such as in XYChart and developers want easy way to reverse the dynamic range. #780
• [legend] exports @vx/legend shapes from the index for convenience / non-deep imports. #772
• [grid] adds children prop to GridRows + GridColumns to support animated rendering. #787
• [shape] add <BarRounded /> shape. #774
• [shape] Create new factory functions for d3-shape and export as part of vx/shape (arc, area, line, pie, radialLine), similar to vx/scale has factories for d3-scale. #776
• [shape] add SplitLinePath component to @vx/shape that allows you to create a line path split into multiple smaller line paths that can be styled independently. #778
• [axis] consistent and compatible typings across vx/scale and vx/axis. More fields passed to child render props of Axis. #773
• [axis] Axis is refactored to accept a ticksComponent which allows us to animate them. #779
• [axis] adds a third argument values to tickFormat(value, index, values) so that format logic can more easily leverage all ticks (because numTicks is approximate, lib consumers do not know how many tick values exist a priori). #779
• [marker] add new <Marker /> that matches actual SVG <marker>. #783
• [marker] add <MarkerArrow />, <MarkerCross />, <MarkerX />, <MarkerCircle />, <MarkerLine />. #783
• [react-spring] adds a new package @vx/react-spring that includes react-spring as a peerDep and can be a home for things that depend on react-spring. #779
• [react-spring] Adds an <AnimatedAxis /> and <AnimatedTicksRender /> in @vx/react-spring. #779
• [react-spring] updates the vx-demo/axis demo to use <AnimatedAxis />. #779
• [react-spring] adds AnimatedGridRows + AnimatedGridColumns. #787
• [react-spring] modularizes AnimatedTicks/useAnimatedTicksConfig to spring-configs/useAnimatedLineTransitionConfig so it can power both animated tick + grid lines. #787
• [react-spring] adds animationTrajectory=outside | inside | min | max to AnimatedAxis and AnimatedGridRows/Columns. #787

:bug: Bug Fix

• [responsive] exclude enableDebounceLeadingCall prop being passed into div. #763
• [responsive] fix prettier format. #764
• [text] fix warning for NaN or invalid values are passed as x or y. #790

:memo: Documentation

• [scale] Improve documentation of the fields in scale configs. #766

:house: Internal

• [scale] rewrite individual scale factory with composition of shared operators. This ensure order of operators and simplified code. #766
• [scale] add 100+ unit tests to make this vx/scale package has 100% test coverage. #766
• [stats] use updated @vx/scale types. #770
• [legend] extract defaultDomain helper. #777
• [demo] updated curves demo to use new <Marker>. #783
• [demo] updates the /axis demo to include AnimatedGrid* and a animationTrajectory config. #787
• [jest] ignore vx-demo, vx-vx code coverage. #784
• [annotation] 100% coverage. #784
• [bounds] 100% coverage. #784
• [brush] add utils test. #786
• [event] add tests. #786
• [test] add tests for vx/grid, vx/zoom, vx/threshold, vx/shape. #793

:trophy: Contributors

• robinsoncol
• kristw
• williaster
• hshoff

 - @vx/annotation: 0.0.198 => 0.0.199
 - @vx/axis: 0.0.198 => 0.0.199
 - @vx/bounds: 0.0.198 => 0.0.199
 - @vx/brush: 0.0.198 => 0.0.199
 - @vx/chord: 0.0.198 => 0.0.199
 - @vx/clip-path: 0.0.198 => 0.0.199
 - @vx/curve: 0.0.198 => 0.0.199
 - @vx/demo: 0.0.198 => 0.0.199
 - @vx/drag: 0.0.198 => 0.0.199
 - @vx/event: 0.0.198 => 0.0.199
 - @vx/geo: 0.0.198 => 0.0.199
 - @vx/glyph: 0.0.198 => 0.0.199
 - @vx/gradient: 0.0.198 => 0.0.199
 - @vx/grid: 0.0.198 => 0.0.199
 - @vx/group: 0.0.198 => 0.0.199
 - @vx/heatmap: 0.0.198 => 0.0.199
 - @vx/hierarchy: 0.0.198 => 0.0.199
 - @vx/legend: 0.0.198 => 0.0.199
 - @vx/marker: 0.0.198 => 0.0.199
 - @vx/mock-data: 0.0.198 => 0.0.199
 - @vx/network: 0.0.198 => 0.0.199
 - @vx/pattern: 0.0.198 => 0.0.199
 - @vx/point: 0.0.198 => 0.0.199
 - @vx/react-spring: 0.0.198 => 0.0.199
 - @vx/responsive: 0.0.198 => 0.0.199
 - @vx/scale: 0.0.198 => 0.0.199
 - @vx/shape: 0.0.198 => 0.0.199
 - @vx/stats: 0.0.198 => 0.0.199
 - @vx/text: 0.0.198 => 0.0.199
 - @vx/threshold: 0.0.198 => 0.0.199
 - @vx/tooltip: 0.0.198 => 0.0.199
 - @vx/voronoi: 0.0.198 => 0.0.199
 - @vx/vx: 0.0.198 => 0.0.199
 - @vx/xychart: 0.0.0 => 0.0.199 (private)
 - @vx/zoom: 0.0.198 => 0.0.199