Voronoi Shuffling v3

100%

Voronoi Shuffling v3

✓ Published0🌍 Public

Last edited Jul 27, 2016

Created on Jul 27, 2016

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.

AI-generated description

I realized that the annoying reshaping transition was a result of the new polygon having more sides than the one it was transitioning from. This meant that rather than transition the side from somewhere along the path of the old polygon, it would transition from off screen. To solve this, I included a function that basically draws extra points on top of eachother to give the polygon more sides than necessary - you can't see them, but they're there if you inspect the elements.

The previous versions are here: <a href='http://bl.ocks.org/alexmacy/07389b74c1a83b589c1d9c67c6cef14c'>Voronoi Shuffling v1</a> & <a href='http://bl.ocks.org/alexmacy/1944e5d8967453e1f7c128b7d668761f'>Voronoi Shuffling v2</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Voronoi Shuffling v2

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.

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

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

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

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

Voronoi 101 visualizes a Voronoi diagram of ten randomly generated points on a 960×500 SVG canvas. It shows how the plane partitions into colored cells, each containing one point, with white stroke boundaries. The code uses D3 v5’s `d3.voronoi()` with an extent covering the full canvas, computes `voronoi.polygons(vertices)`, and renders each polygon as an SVG `path` via the custom `polygon` function. Fill colors come from `d3.schemePaired`, and the original points appear as small circles.

Aaaizemberg

82% match