Voronoi Clipping

100%

Voronoi Clipping

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Dec 8, 2012

Two points generate a two-cell Voronoi diagram clipped to the SVG canvas. The example shows how `d3.geom.voronoi` clips its output polygons using the `.clipExtent` method, with each cell rendered as an SVG path and each input point as a circle. D3.v3’s `category10` scale colors the cells and points. Hovering a path slightly raises its fill opacity, though no other interaction is implemented.

AI-generated description

The Voronoi layout, d3.geom.voronoi, provides clipping via the clipExtent property. If no clip extent is specified, the returned shapes cover the area [±1e6, ±1e6].

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Voronoi Test (N=2)

The example shows a Voronoi diagram computed from two fixed points, with each cell and its corresponding point circle filled using the same color from `d3.scale.category10()`. Using d3.v3 and SVG, the code applies `d3.geom.voronoi` to generate the cell polygons, then renders them as `path` elements with a hover effect that increases fill opacity. The circles are positioned via `transform` translations, and both layers receive black strokes from the shared CSS rule.

Mmbostock

85% match

Loading thumbnail…

d3-voronoi.clipCircle

This example demonstrates a Voronoi tessellation clipped by a circular boundary that follows the mouse cursor. It shows how to programmatically clip Voronoi cells to a circle, rather than relying on browser-level clipping, with the clipping circle moving interactively as the user drags. The algorithm computes segment-circle intersections and constructs a path using lines and arcs, blending d3.line with curveCatmullRomClosed. Built with d3.v4, it uses d3.voronoi, d3.scaleOrdinal with d3.schemePastel1, and renders 100 randomly placed sites as SVG polygons and circles.

KKcnarf

82% match

Loading thumbnail…

Voronoi-based point picker

This example demonstrates a Voronoi-based point picker that lets users hover over the clipped Voronoi cell around each point to highlight both the cell and the corresponding circle. Using D3.js with the `d3.geom.voronoi` API, the code generates 100 random vertices and computes their Voronoi diagram, then clips each cell with `clipPath` elements. Mouseover and mouseout events toggle the fill color of the path and the point circle from light gray to blue. The underlying data is purely synthetic, created via `Math.random()`.

FFrissAnalytics

81% match

Loading thumbnail…

d3-voronoi.clipCircle

This interactive visualization demonstrates how to programmatically clip a Voronoi tessellation to a circular boundary using d3.voronoi and custom geometry routines rather than relying on the browser’s screen-space clipping. As the user moves the mouse, the first site follows the pointer, dynamically recomputing the diagram and redrawing all polygon paths with a clipped `d` attribute. The code uses SVG, D3 v4, and functions like `segmentCircleIntersections` and `largeArc` to compute arc segments, with site positions generated from a random polar distribution inside the circle.

KKcnarf

80% match

Loading thumbnail…

voronoi Play

A small set of six points defines a Voronoi tessellation, filling a 960 by 500 SVG canvas with colored polygons. Built with d3.v4, it uses `d3.voronoi().extent()` to compute polygon and link geometry from mapped coordinates. Hovering a polygon turns it grey, and on mouse-out it returns to its ordinal `schemeCategory10` color. The underlying seed points appear as fixed circles, while the computed edges are also drawn as lines.

RRobertDelgado

79% match

Loading thumbnail…

Voronoi tests

A test suite of 33 mini Voronoi diagrams rendered as SVGs checks edge cases for the `d3.geom.voronoi` API, focusing on degenerate configurations of one to four points. Each square plot shows clipped Voronoi cells and source points, demonstrating how the algorithm handles collinear points, duplicate ordering, and single-point inputs. The examples are generated with `d3.geom.voronoi()` with a clipping extent, using `d3.select` and inline SVG paths and circles. The source data is hardcoded in the script, comprising point arrays laid out in a grid of small graphs.

Mmbostock

79% match

Loading thumbnail…

Voronoi-based point picker (revisited)

This example demonstrates a Voronoi diagram where each point’s interactive zone is limited by a maximum radius, adjusted via a slider. It shows how hovering over a polygon highlights the corresponding data point. The visualization uses the `d3.distanceLimitedVoronoi` plugin to compute these clipped regions, replacing the need for clip paths. The code generates 100 random vertices, renders the polygons and circles using D3.js v4, and redraws the diagram in response to slider input.

KKcnarf

78% match

Loading thumbnail…

Voronoi Tessellation

This interactive Voronoi diagram shows how a set of one hundred random points partitions a 960-by-500 SVG canvas into polygonal cells. Moving the mouse repositions the first site, causing the diagram to recompute dynamically with the red polygon, black links, and white site markers updating in real time. Built with D3 v4 and the d3-voronoi library, the example renders polygons as SVG paths, links as lines, and sites as circles, with all geometry recalculated on each mouse move.

Mmbostock

78% match