Mitchell’s Best-Candidate

100%

Mitchell’s Best-Candidate

✓ Published0🌍 Public

Last edited Nov 28, 2019

Created on Feb 23, 2012

This example visualizes Mitchell’s best-candidate algorithm, which approximates Poisson-disc sampling to generate a natural, blue-noise distribution of circles. Circles appear one at a time, growing from radius zero, and new candidates are chosen by maximizing distance from all previously placed circles, using a quadtree for efficient spatial lookup. The code uses the D3 v3 library, specifically `d3.select` and `d3.timer`, alongside the custom `bestCircleGenerator` function, which relies on the quadtree’s `visit` method to compute distances. As the number of circles increases, the algorithm gradually increases the candidate count while reducing circles per animation frame.

AI-generated description

Mitchell’s best-candidate algorithm generates a new random sample by creating k candidate samples and picking the best of k. Here the “best” sample is defined as the sample that is farthest away from previous samples. The algorithm approximates Poisson-disc sampling, producing a much more natural appearance (better blue noise spectral characteristics) than uniform random sampling.

See also the white-on-black and Voronoi variations of this example.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Mitchell’s Best-Candidate

The animation shows a field of white circles with black outlines growing into a dense, non-overlapping packing on a dark gray background. It uses the Mitchell’s best-candidate algorithm to iteratively add circles, where each new circle is chosen from a set of random candidates by maximizing the minimum distance to existing circles. The implementation is built with D3 v3’s `d3.geom.quadtree` for spatial indexing, `d3.select` to build the SVG, and `d3.timer` with a `transition()` on the `r` attribute to animate the circles growing from radius zero as they are placed.

Mmbostock

90% match

Loading thumbnail…

Mitchell’s Best-Candidate III

D3’s `d3.geom.quadtree` data structure organizes existing points to accelerate nearest-neighbor searches, while `d3.timer` and SVG `transition` animate the progressive appearance of each circle. The algorithm samples ten random candidates per iteration, selects the one farthest from all current points, and draws it with a growing radius, creating a uniform, orderly scatter over the 960×500 canvas.

Mmbostock

86% match

Loading thumbnail…

Mitchell’s Best-Candidate II

The animation demonstrates Mitchell’s best-candidate algorithm, a method for distributing sample points with blue-noise spectral characteristics to minimize aliasing. Each new point is chosen from ten gray candidate points, with the red best candidate selected as the one farthest from all existing black points. The visualization shows the search radius from each candidate to its closest existing point as a circle and line. It uses d3.v3 with SVG transitions and a d3.geom.quadtree for efficient nearest-neighbor queries.

Mmbostock

85% match

Loading thumbnail…

Mitchell’s Best-Candidate

This interactive animation demonstrates Mitchell’s best-candidate algorithm for distributing points evenly across a canvas while building a Voronoi diagram. It begins with 10 points per frame and gradually reduces that rate as the algorithm continues, ultimately adding 2,500 points total. The code uses `d3.voronoi` to compute and draw Voronoi cells, rendered incrementally on Canvas, while `d3.quadtree` accelerates the search for each new point’s farthest empty region from existing points. Each new point is selected from 20 random candidates, choosing the one with the greatest distance to any existing point. The animation runs until all points are placed.

Mmbostock

83% match

Loading thumbnail…

Mitchell’s Best-Candidate

Delaunay triangulation reveals the structure of points generated by Mitchell’s best-candidate algorithm, adding 2,500 points gradually over time. The animation shows the Voronoi-linked edges connecting each point to its nearest neighbors, redrawing the complete triangulation each frame as new points appear. The code uses `d3.geom.voronoi()` to compute links, a quadtree via `d3.geom.quadtree()` for efficient distance checks, and a Canvas 2D context for stroking the resulting line network. The point generation progressively slows as the density increases.

Mmbostock

80% match

Loading thumbnail…

Mitchell’s Best-Candidate V

A Voronoi diagram partitions a 960×500 SVG canvas into colored cells, each filled according to the area of its corresponding polygon using a cubehelix color scale from d3.scale.cubehelix. The cell sites are generated by a best-candidate sampler that uses d3.geom.quadtree to efficiently find the farthest point from existing samples. The animation-free rendering fills paths via d3.geom.voronoi and d3.geom.polygon, demonstrating a blue-to-purple gradient across irregularly sized regions.

Mmbostock

77% match

Loading thumbnail…

Mitchell’s Best-Candidate IV

This example reconstructs a low-fidelity version of Van Gogh’s *The Starry Night* on a Canvas element. The page loads the original image, samples 10,000 points using a best-candidate algorithm that maximizes spacing between random points, and then draws a Voronoi diagram where each cell is filled with the color of the source pixel nearest the cell’s seed. The implementation uses d3.v3’s `d3.geom.quadtree` for fast nearest-neighbor searches during sampling and `d3.geom.voronoi` to compute the clipped cells. Colors are read directly from the loaded image via Canvas `getImageData` and applied with `fillStyle`. The result is a stylized, mosaic-like approximation of the painting.

Mmbostock

73% match

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

66% match