Voronoi

100%

✓ Published0🌍 Public

Last edited Jun 19, 2018

Created on Jun 19, 2018

This example shows an interactive Voronoi diagram built with D3 v4, displaying 100 randomly generated points and their corresponding cells. Initially, the cells are hidden, but users can enable a hover effect that highlights the cell containing the mouse cursor, turning the hovered point red. A toggle also reveals all Voronoi polygons as thin gray outlines. The visualization uses `d3.voronoi()` to compute polygon boundaries from the points, and renders the result as SVG paths and circles within a menu-driven interface.

AI-generated description

Voronoi.

From D3 in Depth book by Peter Cook.

forked from <a href='http://bl.ocks.org/d3indepth/'>d3indepth</a>'s block: <a href='http://bl.ocks.org/d3indepth/ee5a4b110b9841cc55dbba0716343143'>Voronoi (from introduction)</a>

gpl-3.0 Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Voronoi binning (animated)

This animated visualization demonstrates Voronoi binning: 4,000 random points are generated, then sorted by size, with the top 10% selected as Voronoi sites. Initially, all dots appear white, but after a delay, the larger site points are colored, and then every other point is recolored according to the site of its Voronoi cell, found via the `diagram.find` method. The animation uses `d3.interval` to repeat the algorithm, `d3.voronoi` for the diagram, and D3 transitions to fade polygons and dots in and out, rendering in SVG.

AAjayyy

87% match

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 interaction

This example demonstrates how Voronoi diagrams improve hover interaction on a scatterplot by partitioning the chart area into cells around 50 randomly generated points. Clicking the chart reveals the Voronoi overlay, while moving the mouse highlights the nearest data point with a colored ring and displays its properties in a text output. The implementation uses D3 v4’s `d3.voronoi` layout with the `find()` method to locate the closest site, alongside `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for scales and axes. Points and axes are rendered as SVG elements within an HTML page.

FFrissAnalytics

85% match

Loading thumbnail…

Canvas Voronoi

This example visualizes a Voronoi diagram of 100 randomly generated points, with the cell containing the mouse position highlighted in red. As the cursor moves, that site and its cell update in real time. The diagram is rendered entirely to a Canvas 2D context using the d3-voronoi API, computing both cell polygons and Delaunay links. The code draws all cells with black strokes, site markers as small circles, and semi-transparent link lines, demonstrating how d3-voronoi outputs geometric data suitable for immediate canvas drawing.

FFrissAnalytics

84% match

Loading thumbnail…

Voronoi binning (animated)

Four thousand random points are colored by size, with the largest ten percent becoming Voronoi sites. The animation cycles through stages: it sorts points by size, uses the top ten percent as sites for d3.voronoi, then assigns every point the color of its site’s cell via the customized `diagram.find()` method. Points and cells fade, recolor, and reset every nine seconds using d3.interval and transitions.

PPhilippe Rivière

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

84% match

Loading thumbnail…

Rotating Voronoi in d3v4

A rotating Voronoi diagram animates dozens of moving points whose cells constantly morph, producing intricate curved patterns against a black background. The animation derives from points arranged on circular paths that rotate at varying speeds and radii, while the Voronoi tessellation updates each frame. The code uses d3.voronoi to compute the polygons and d3.line with the curveBasisClosed interpolator to render them. A custom resample function subdivides each polygon edge into three segments before drawing, creating the smooth, curved cell boundaries. The animation runs continuously via d3.timer, with points’ positions updated directly in response to elapsed time.

PPhilippe Rivière

83% match