Poisson-Disc

100%

✓ Published0🌍 Public

Last edited Oct 30, 2017

Created on Jun 20, 2017

This visualization demonstrates Poisson-disc sampling, a blue-noise distribution pattern that places icons evenly across a canvas while maintaining a minimum distance between them. Using Bridson’s algorithm, the d3.timer function adds 100 new samples per frame, each rendered as an SVG image element that animates from zero to its full size via the .transition() method. The code relies on d3.v4 for timer and transition APIs, with the poissonDiscSampler function handling spatial grid-based rejection sampling to ensure uniform coverage. The icons animate into place, illustrating the algorithm’s progressive point generation in real time.

AI-generated description

Based on Jason Davies’ implementation of Bridson’s algorithm. See the related explanation and Mike Bostock's block. Icon comes from here.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Poisson-Disc

Poisson-Disc uses d3.timer to progressively render a two-dimensional Poisson-disc sampling of 960 by 500 pixels. The animation reveals the algorithm’s output by appending SVG circles that transition their radius from zero to two pixels. The code implements Bridson’s algorithm, based on Jason Davies’ version, which generates evenly distributed random samples without clustering. Each new point is rejected if it falls within a minimum distance (radius 10) of existing points, producing a blue-noise pattern across the canvas.

Mmbostock

90% match

Loading thumbnail…

Poisson-Disc

The visualization shows a square canvas being progressively filled with small circles using Poisson-disc sampling, a method for generating evenly distributed random points. The algorithm, based on Bridson’s technique, ensures each new point is at least a specified distance from existing ones, creating a uniform, pseudo-random pattern. Built with d3.v3, the animation adds circles one at a time via `d3.timer`, with each circle’s radius animated using `transition()`. The code explicitly implements the sampling logic, including a grid-based spatial index for efficient distance checks, and renders the result as SVG circles.

JJaapSuter

89% match

Loading thumbnail…

Poisson-Disc II

This animation illustrates the Poisson-disc sampling algorithm, which generates a set of points with a minimum spacing. Red dots are active samples; one is selected randomly, and up to *k* candidate points (open black circles) are generated in an annulus around it. Candidates are rejected if too close to any existing sample, shown by a gray exclusion zone and black lines to the offending neighbor. Inactive samples turn black, and the process ends when none remain active. The code uses d3.svg.arc for the annulus and CSS transitions for animation.

Mmbostock

83% match

Loading thumbnail…

Poisson-Disc V

This animation visualizes Bridson’s Poisson-disc sampling algorithm by showing the branching process as new samples are added. Each time a sample is placed, a line animates outward from the neighboring sample that spawned it, revealing the algorithm’s growth tree. The code uses d3.v3 to append SVG line elements and applies staggered transitions with a delay based on each sample’s depth, making the generation order visible. The sampling itself follows Jason Davies’s implementation, generating random points with a minimum radius while rejecting candidates that are too close or outside the canvas.

Mmbostock

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

81% match

Loading thumbnail…

Poisson-Disc III

This visualization uses Poisson-disc sampling to place 10,000 points across Van Gogh’s *The Starry Night*, then renders each point as a Voronoi cell colored by the underlying image pixel. The code loads the painting into a Canvas, reads its pixel data via `getImageData`, and fills each cell with the sampled color. It relies on `d3.geom.voronoi` for the cell geometry and a custom `poissonDiscSampler` function to ensure even spacing between points. The output is a stippled, mosaic-like reinterpretation of the artwork, contrasting with uniform random sampling.

Mmbostock

78% match

Loading thumbnail…

Distribution Scatter 3

Transparent rectangles in 45-degree rotation render the distribution of 500 samples from a Pareto distribution, each rectangle's width fixed at 25 pixels. Every five seconds, a palette randomly selects a background and foreground color pair, triggering `d3.transition` with 1000-millisecond durations on both the background `rect` and the foreground rectangles. The SVG animation cycles through six predefined color schemes, from teals to violets, while the rectangles maintain a 0.02 opacity. The visualization uses `d3.randomPareto` to generate data and `d3.selectAll` with `.enter()` to bind it to SVG elements.

WWaseem Medhat

71% match

Loading thumbnail…

Distribution Scatter 2

A grid of 700 narrow vertical rectangles spans the full height of the visualization, each sampled from a Pareto distribution using `d3.randomPareto` and scaled by 25. Every five seconds, the entire composition shifts color as the background rectangle and all foreground rectangles smoothly transition between one of six predefined color palettes, alternating between dark and light themes. The animation uses `transition().duration(1000)` on both the background and foreground elements, cycling randomly through palettes with contrasting pairs like teals, blues, or violets. Rendered as SVG with semi-transparent rectangles (0.02 opacity), the overlapping shapes create a dense, layered texture across the 960×500 canvas.

WWaseem Medhat

70% match