d3-voronoi.clipCircle

100%

d3-voronoi.clipCircle

✓ Published0🌍 Public

Last edited Jan 27, 2017

Created on Jan 27, 2017

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.

AI-generated description

This block experiments how to programmatically circle-clip a Voronoï tessellation, and does not rely on the browser to do the clipping in the screen space. This block follows the work done by Philippe Riviere in its Circular Bounded Voronoi Tessellation. Another experimentation is available in this block.

By default, d3.voronoi comes with a rectangular clipping, through the d3-voronoi.extent() API. This block shows another way to clip the initial tesselation.

The algorithm used in this block is basically a copy/paste of the algorithm used in the d3.distanceLimitedVoronoi d3 plugin I made. The two algorithms have distinct purposes: the plugin leverages UX by defining [interactive and not-too-far] areas around each site, whereas this block define a global clipping.

Acknowledgments to:

D3.js (v4)
blockbuilder.org

lgpl-3.0 Licensed

Similar vizzes

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

94% match

Loading thumbnail…

path for Distance-limited Voronoi cell - d3v4

This interactive D3.js v4 example visualizes a distance-limited Voronoi cell, showing the intersection between a standard Voronoi polygon and a circle centered on one of its seeds. Users can drag the seed points or the circle's radius handle to update the layout in real time. The code computes the Voronoi polygons via `d3.voronoi` and traces the clipped cell path with a custom line function, rendering the result as SVG paths with interactive drag behaviors.

KKcnarf

81% match

Loading thumbnail…

Voronoi Clipping

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.

Mmbostock

80% 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…

d3-path for Distance-limited Voronoi cell - d3v4

This example demonstrates a distance-limited Voronoi cell, showing the intersection of a Voronoi cell with a circle around a central seed. Users can drag the seeds or the radius anchor to interactively update the highlighted region. The visualization uses D3 v4’s `d3.voronoi()` for layout and a `d3.path()` context to compute the limited-cell path via canvas-like directives, rendering the result as SVG with draggable circles.

KKcnarf

78% match

Loading thumbnail…

path for Distance-limited Voronoi cell

This example visualizes distance-limited Voronoi cells by intersecting each Voronoi region with a circle of adjustable radius. It shows how a cell's boundary changes as seeds or the radius are dragged, highlighting the clipped path where the cell meets the circular limit. The implementation uses D3 v3’s `d3.geom.voronoi` layout and `d3.svg.line` to compute and draw cell paths, with `d3.behavior.drag` enabling interactive updates to seed positions and the maximum cell distance. Rendering is SVG-based, with circles and paths styled via CSS classes.

KKcnarf

78% match

Loading thumbnail…

geoVoronoi circumcircles

This example visualizes the Voronoi tessellation of a sphere using 100 random points, rendered as colored triangles with white links and site markers. Hovering over a triangle reveals its circumcircle, drawn as a semi-transparent circle with dashed rays connecting the circumcenter to each vertex. Built with D3 v5 and the d3-geo-voronoi plugin, it uses d3.geoPath with an Equal Earth projection to draw the geometry in SVG, and d3.geoCircle to construct the interactive circumcircles.

PPhilippe Rivière

76% 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

76% match