Mitchell’s Best-Candidate

100%

Mitchell’s Best-Candidate

✓ Published0🌍 Public

Last edited Jun 28, 2016

Created on Aug 13, 2013

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.

AI-generated description

A Voronoi variation of the Mitchell’s best-candidate explanation.

Note: this would be much more efficient if the Voronoi were computed incrementally for just the additional points added each frame.

gpl-3.0 Licensed

Similar vizzes

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

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

87% match

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

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

85% match

Loading thumbnail…

Mitchell’s Best-Candidate

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.

Mmbostock

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

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

70% match