Mitchell’s Best-Candidate III

100%

Mitchell’s Best-Candidate III

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 5, 2014

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.

AI-generated description

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

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

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

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

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

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

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

77% match

Loading thumbnail…

Uniform Random

A grid of 3,000 circles appears one by one at random positions across a 960×500 SVG canvas. Each circle starts with a radius of zero and animates outward to a radius of two pixels via D3's `transition.attr`. The animation uses `d3.timer` to append ten new circles per frame, driven by a custom `uniformRandomSampler` function that returns `[Math.random() * width, Math.random() * height]` coordinates. This demonstrates a simple, lightweight approach to generating and animating random scatter points with D3 v3.

Mmbostock

70% match