CCPD Snowden

100%

✓ Published0🌍 Public

Last edited Aug 1, 2017

Created on Oct 26, 2016

This example uses a Capacity Constrained Point Distribution to render a portrait of Edward Snowden from a photograph. The code loads the image via a Canvas `getImageData` call, samples pixels to generate a set of points, and then iteratively swaps points between neighboring Voronoi cells—computed with `d3.voronoi`—to evenly distribute them according to local image density. The resulting animation shows the points and Voronoi polygons updating in SVG as the distribution converges, with the final arrangement forming the recognizable portrait. The algorithm is a faster variant of the original capacity-constrained approach, using only local neighborhood swaps.

AI-generated description

Using a Capacity Constrained Point Distribution to display a picture of an American hero.

This is a variant of the original algorithm by Michael Balzer, Thomas Schlömer & Oliver Deussen (University of Konstanz, Germany, 2009), in which I use a Voronoi Diagram to create a topology of the current sites, and only swap the points between neighbouring sites (and neighbours of neighbours). It appears to be much faster than the original algorithm.

See also https://seenthis.net/messages/619204 for an application in cartography.

Note to self: do not edit on BlockBuilder

mit Licensed

Similar vizzes

Loading thumbnail…

Stippling

This stippling example uses a capacity-constrained point distribution algorithm to render a portrait of President Obama from a grayscale source image. The canvas displays 2000 colored sites, each with 15 assigned points, which iteratively swap points and recenter to achieve a uniform, dense stipple pattern. The animation runs in a loop, redrawing the points and site locations every frame. The code uses Canvas `getImageData` to read pixel density, then applies a custom algorithm with flat typed arrays (`Float32Array`, `Uint32Array`) to optimize performance in the browser.

FFrissAnalytics

67% match

Loading thumbnail…

Capacity Constrained Point Distributions

Animated Voronoi diagrams partition a canvas into colored cells, each containing a cluster of small points. The algorithm iteratively balances point distributions by swapping points between neighboring cells until a capacity constraint is met. This implementation uses `d3.voronoi` for cell computation, `d3.scan` for efficient candidate selection, and `d3.transition` to fade cell fills once stabilized. The process shows how points redistribute across regions over time.

PPhilippe Rivière

67% match

Loading thumbnail…

Voronoi Circles

Voronoi Circles uses D3’s Voronoi tessellation to partition a canvas into regions around moving points, with each region filled by a colored circle that pulses and shifts in size. The animation, rendered with the Canvas API, computes the Voronoi diagram via `d3.voronoi` and updates the drawing each frame. The example demonstrates how Delaunay-based spatial subdivision can drive a simple, rhythmic visual effect.

Mmbostock

63% match

Loading thumbnail…

Painting Manhattan-distance Voronoi

This example paints a canvas pixel-by-pixel to show the Manhattan-distance Voronoi diagram of 400 random points. Each pixel receives the color of its nearest site, revealing diamond-shaped cell boundaries. The rendering iterates over every pixel sequentially using a `d3.interval`, computing the Manhattan distance via a custom function and selecting the closest site with `d3.scan`. The sites are drawn as white crosses on top of the colored cells, and the animation pauses after 30 seconds or when all pixels are processed.

PPhilippe Rivière

62% match

Loading thumbnail…

Poisson-Disc IV

This example generates a set of points using a Poisson-disc sampling algorithm and renders them as a clipped Voronoi diagram. The SVG paths are filled with a color mapped from each polygon’s area using a cubehelix color scale, creating a smooth gradient across the canvas. The code uses d3.geom.voronoi for the diagram, d3.scale.cubehelix for coloring, and d3.svg for rendering. The Poisson-disc sampler is based on Jason Davies’ implementation, with a fixed radius of 5.68 pixels.

Mmbostock

62% match

Loading thumbnail…

Painting Euclidian Voronoi

This example paints a Euclidean Voronoi diagram pixel by pixel onto a canvas, with each pixel colored according to its nearest site among 400 randomly placed points. A white overlay of the true Voronoi cell boundaries, computed with `d3.voronoi().polygons()`, is drawn after the painting finishes. The rendering uses an `O(n*x*y)` brute-force scan, computing squared Euclidean distances with `d3.scan()` and filling one vertical strip per pixel column. Site markers are drawn with colored strokes using Canvas 2D methods.

PPhilippe Rivière

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

61% match

Loading thumbnail…

Snowden’s Route

A world map in the Kavrayskiy VII projection traces Edward Snowden’s flight path from Honolulu to Hong Kong, Moscow, Havana, Caracas, and Quito as a red line. Red-ringed markers label each airport with its three-letter code. The map renders via D3’s geo projection API, using `d3.geo.kavrayskiy7()`, `d3.geo.path()`, and a geographic graticule, overlaid with land and country boundaries from a TopoJSON source loaded through `topojson.feature` and `topojson.mesh`.

Mmbostock

61% match