Mitchell’s Best-Candidate IV

100%

Mitchell’s Best-Candidate IV

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 6, 2014

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.

AI-generated description

10,000 best-candidate samples of Van Gogh’s The Starry Night. Compare to poisson-disc samples.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Uniform Random II

This example uses 10,000 uniform random samples to reconstruct Van Gogh’s *The Starry Night* as a Voronoi diagram. Each sample point becomes a cell, filled with the color sampled from the original image at that location. The code employs `d3.geom.voronoi` to compute the cells, the Canvas 2D API’s `getImageData` to extract pixel colors, and `d3.rgb` to format fill styles. The source image is drawn to canvas before sampling, and the result offers a stochastic, mosaic-like reinterpretation of the painting.

Mmbostock

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

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

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

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

77% match

Loading thumbnail…

Poisson-Disc III

The visualization renders Van Gogh’s *The Starry Night* as a mosaic of Voronoi cells, with each cell’s fill color sampled from the corresponding pixel of the source image. It uses a Poisson-disc sampling algorithm to place 10,000 points evenly across the canvas, then applies `d3.geom.voronoi` with a clip extent to construct the cells. The image is loaded via an `Image` object and drawn to a 960×500 canvas, where `getImageData` extracts the color for each sample. The code relies on D3 v3 and Canvas 2D API.

RRastignac

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

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

74% match