Rotating Distance-limited Voronoi

100%

Rotating Distance-limited Voronoi - d3v4

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Jul 26, 2016

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.

AI-generated description

Revisitng the famous mbostock's block: Rotating Voronoi with the d3-distanceLimitedVoronoi plugin I made.

At each iteration, maximum distance from each datum/seed is updated. Compare to the canvas version.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

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

92% match

Loading thumbnail…

Rotating Distance-limited Voronoi - d3v4 - canvas

The example shows a rotating set of distance-limited Voronoi cells rendered on a black canvas, where each cell’s maximum radius shrinks and expands over time. It updates the limit dynamically using a cosine function, redrawing the cells each frame via the `d3.distanceLimitedVoronoi` plugin and the Canvas 2D context. Points are generated from animated circles with varying radii and angular speeds, and the code uses `d3.timer` for the animation loop.

KKcnarf

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

86% match

Loading thumbnail…

Rotating Voronoi

Rotating Voronoi shows a black-and-white field of curved cells generated from continuously moving points. Multiple rings of points orbit at different speeds and radii, causing the Voronoi diagram to shift and deform fluidly over time. The animation uses the D3 `d3.geom.voronoi` to compute the cells, clips them against a rectangular boundary, and subdivides each polygon edge into three equal segments before applying the `basis-closed` interpolation to create the smooth, organic curves. The SVG paths are re-rendered each frame with `d3.timer`.

Mmbostock

84% match

Loading thumbnail…

Rotating Voronoi in colors

Dozens of colored points orbit along concentric circular paths, while the Voronoi cells surrounding them are resampled and smoothed into curved, lens-like shapes that continuously rotate and morph. The animation is rendered as an SVG, with each cell’s fill and stroke sampled from a two-color linear scale. The code uses d3.geom.voronoi to compute cells, a basis-closed line interpolator for curvature, and d3.timer to drive the point motion and redraw the paths.

PPhilippe Rivière

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

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

79% match

Loading thumbnail…

Voronoi Spirals

Randomly placed points generate Voronoi cells that gradually spiral inward, cycling through a Cubehelix color scale over a five-second animation. The d3-voronoi layout computes the initial polygons, then each frame the code shifts a vertex and interpolates a new point along each cell’s first edge, closing the path and filling it with a color based on elapsed time. Rendered on a Canvas via the d3.timer API, this creates a continuous, organic morphing effect.

Mmbostock

78% match