Mitchell’s Best-Candidate

100%

Mitchell’s Best-Candidate

✓ Published0🌍 Public

Last edited Nov 28, 2019

Created on Aug 13, 2013

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.

AI-generated description

A white-on-black variation of the Mitchell’s best-candidate explanation.

gpl-3.0 Licensed

Similar vizzes

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

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

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

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

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

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

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

74% match

Loading thumbnail…

Untitled

This visualization generates a dense packing of animated circles that grow from the center of an SVG canvas. Using a quadtree data structure to optimize collision detection, the algorithm iteratively places new circles in the largest available gaps, gradually increasing the number of candidate positions per circle. The code uses `d3.quadtree()` for spatial indexing and SVG `circle` elements with `transition()` animations to scale each circle's radius from zero. The process continues for 25,000 circles, with fill opacity randomly varied between 50% and 100%, creating an organically growing, space-filling composition.

Ppoppy

71% match