Voronoi Shuffling v2

100%

Voronoi Shuffling v2

✓ Published0🌍 Public

Last edited Jul 27, 2016

Created on Jul 27, 2016

A collection of Voronoi cells continuously shuffles across the screen as their generating points jump to new random positions. The cell outlines remain visible while their filled areas stay transparent, and the points themselves appear as small black dots. The animation uses D3 v4’s `d3.voronoi` layout to compute polygons from 100 random coordinates, with SVG `path` and `circle` elements updated via chained `transition` calls that first offset each polygon by its point’s movement and then reset it to the new cell shape.

AI-generated description

This is the beginning of an experiment in sorting the polygons of a voronoi diagram.

The polygons are moving to random locations rather than sorting because I was working on how to smoothly transition them from one location to another. It's definitely not smooth at this point!

The previous version is here: <a href='http://bl.ocks.org/alexmacy/07389b74c1a83b589c1d9c67c6cef14c'>Voronoi Shuffling v1</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Voronoi Shuffling v3

Voronoi Shuffling v3 animates a set of 100 randomly placed points and their corresponding Voronoi cells, which continuously redraw every few seconds as the points jump to new random positions. The SVG paths representing each polygon transition smoothly between states using D3 v4’s `transition` methods, with a transform offset applied before updating the `d` attribute to avoid abrupt reshaping. The code uses `d3.voronoi` to compute cell polygons and includes extra overlapping points in the path data to ensure each polygon has enough vertices for seamless interpolation. Circles mark the points themselves, and both points and cells shift together over a 3-second duration.

Aalexmacy

95% match

Loading thumbnail…

Voronoi Shuffling v1

A Voronoi diagram with 100 points continuously reshuffles, as each cell’s polygon and its generating dot transition to new random screen positions every few seconds. The animation uses D3 v4’s `d3.voronoi` layout to compute polygons from updated coordinates, then applies 3-second `transition().duration()` tweens to both the SVG `path` elements’ `d` attributes and the `circle` elements’ `transform` attributes. A `d3.timeout` recursively triggers redraws every 8 seconds, cycling the diagram indefinitely.

Aalexmacy

93% match

Loading thumbnail…

Rotating Voronoi

Rotating Voronoi shows a set of curved, teal cells that continuously morph as the underlying points move in circular paths. The animation uses D3’s `d3.geom.voronoi` to compute polygons from moving points, which are then clipped to a rectangular boundary. Each polygon side is subdivided into three equal segments and joined with a `basis-closed` line interpolator, creating the smooth curved cell shapes. The SVG paths animate via D3’s timer, with point positions updated over time based on angular velocity.

Aajayjayayy

84% match

Loading thumbnail…

Voronoi Sorting v2

A collection of Voronoi polygons fills the screen and repeatedly sorts itself by area along a logarithmic horizontal scale, while each polygon’s fill color shifts according to its size using a randomly selected D3 sequential color scheme. The animation uses d3.voronoi to compute polygon shapes, d3.scaleLog for both positioning and color mapping, and d3.transition with timed delays to slide polygons into sorted order, recalculate their geometry, and fade to new colors every six seconds. The rendering is SVG paths with partial fill opacity and black strokes.

Aalexmacy

83% match

Loading thumbnail…

Voronoi Sorting v2 update for d3.unconf badge

Randomly generated points form a Voronoi diagram of black polygons with white strokes, shaded using a color scale based on polygon area. The animation cycles through two phases: first, the polygons slide vertically into sorted order by area using a log scale, then they transition back to their original positions while recomputing the Voronoi cells and updating their fill colors from a randomly selected sequential color scheme. The code uses d3.voronoi, d3.polygonArea, and d3.scaleLog to drive the transitions with d3.transition.

Aalexmacy

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

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

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

82% match