Voronoi Sorting

100%

Voronoi Sorting

✓ Published0🌍 Public

Last edited Jul 28, 2016

Created on Jul 27, 2016

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.

AI-generated description

This is an experiment with sorting the polygons of a voronoi diagram. They sort on a logarithmic scale because a linear scale was causing them to cluster all to one side in a progressively more compact way. The sorting is by the area of the shape - which is also represented by color. After moving to the new location, the sort is re-calculated based on the new shapes and the shapes move again. This was the result of reading <a href="http://bl.ocks.org/mbostock">Mike Bostock's</a> article on <a href="http://bost.ocks.org/mike/algorithms/">Visualizing Algorithms</a>.

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>

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

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

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

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

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

84% match

Loading thumbnail…

Voronoi

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.

AAjayyy

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

83% match

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

83% match