Skip to main content
SimilarExport ZIP
100%

Voronoi-based point picker (revisited)

✓ Published0🌍 Public
KKcnarf
Last edited Dec 3, 2018
Created on Jun 21, 2016

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.

AI-generated description

This block is based on Voronoi-based point picker from njvack

This block uses the d3.distanceLimitedVoronoi d3 plugin I made. This plugin produces the appropriate interactive zones, depending on the Voronoï tesselation and a maximum distance from each datum.

Compared to the original block, there is no need to produce and bind clipPathes, making the code (and usage) simpler.

Acknowledgments to:

gpl-3.0 Licensed

Similar vizzes

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
86% 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
80% 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
78% 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
78% 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
78% match
Loading thumbnail…

Rotating Distance-limited Voronoi - d3v4

The example visualizes a rotating set of points whose Voronoi cells are limited by a dynamic maximum distance, creating an evolving pattern of filled polygons against a black background. It revisits Mike Bostock’s original rotating Voronoi using the `d3.distanceLimitedVoronoi` plugin, which recomputes cell boundaries at each animation frame based on the shrinking or growing distance limit. The code uses two `d3.timer` callbacks—one to update point positions via trigonometric motion and another to adjust the `limit` value—while rendering SVG `path` elements that trace each cell’s computed outline in white.

KKcnarf
78% match
Loading thumbnail…

Rotating Distance-limited Voronoi

This example animates a rotating Voronoi diagram where cell boundaries are clipped by a dynamically shrinking maximum distance from each seed point. Multiple concentric rings of points orbit at different radii and speeds, creating a shifting mosaic of white polygons on a black background. The code uses the d3.distanceLimitedVoronoi plugin with d3.v3, recomputing the distance limit from a cosine function each frame via d3.timer. The SVG paths update continuously, with point positions driven by nested timers for circular motion.

KKcnarf
77% match
Loading thumbnail…

Voroni & Chromatic Scale

This visualization displays a Voronoi tessellation of 2,000 random points, with each polygon’s fill color mapped through a chromatic scale. The example uses D3 v4.0 with the `d3.voronoi` layout, `d3-scale-chromatic`’s `d3.interpolateRdYlBu` for continuous ColorBrewer coloring, and SVG paths for rendering. On mouseover, all polygon fills recolor based on the Euclidean distance from the hovered point’s coordinates, creating an interactive distance-based heatmap effect.

FFrissAnalytics
77% match