Skip to main content
100%

Voronoi Sorting v2 update for d3.unconf badge

✓ Published0🌍 Public
Aalexmacy
Last edited Sep 26, 2016
Created on Sep 25, 2016

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.

AI-generated description

Made some changes for using this as a badge for d3.unconf. The background color is now black and the stroke color is now white for a cleaner look with the badge's color scheme. It also sorts vertically to fit with the badge's orientation.

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>, <a href='http://bl.ocks.org/alexmacy/5f9ba684d2c9ec68392dee86ff9636bb'>Voronoi Shuffling v3</a>, & <a href='http://bl.ocks.org/alexmacy/2dc8e86b3fde00c23ccad92e390a2ef5'>Voronoi Sorting v2</a>

forked from <a href='http://bl.ocks.org/alexmacy/'>alexmacy</a>'s block: <a href='http://bl.ocks.org/alexmacy/2dc8e86b3fde00c23ccad92e390a2ef5'>Voronoi Sorting v2 update for d3.unconf badge</a>

gpl-3.0 Licensed

Similar vizzes

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
91% match
Loading thumbnail…

Voronoi Sorting

A Voronoi diagram of 500 randomly placed points continuously sorts its cells by area. Each polygon’s fill color encodes its area on a logarithmic scale, and cells slide horizontally into size order before the diagram recalculates from their new positions. The process repeats indefinitely, redrawing shapes and colors as areas change. Built with D3 v4, it uses `d3.voronoi` for tessellation, `d3.scaleLog` and `d3.scaleSequential` for mapping, and SVG `path` transitions with `d3.timeout` to loop the animation.

Aalexmacy
88% match
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
84% match
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
83% 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
82% 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
81% 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
81% 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
81% match