Annulus Sampling II

Annulus Sampling I

This animation shows the perils of naïve annulus sampling, where points cluster near the inner edge because the radius and angle are chosen uniformly at random. The result is a biased density that does not fill the annular region evenly. The code uses a Canvas context with `d3.select`, `d3.timer`, and explicit `context.arc` and `context.fill` calls to draw the samples over time, adding 50 points per frame until 1,000 total are placed. The static background ring uses an evenodd fill rule to show the sampling region.

92% match

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.

69% match

Poisson-Disc

The visualization shows a square canvas being progressively filled with small circles using Poisson-disc sampling, a method for generating evenly distributed random points. The algorithm, based on Bridson’s technique, ensures each new point is at least a specified distance from existing ones, creating a uniform, pseudo-random pattern. Built with d3.v3, the animation adds circles one at a time via `d3.timer`, with each circle’s radius animated using `transition()`. The code explicitly implements the sampling logic, including a grid-based spatial index for efficient distance checks, and renders the result as SVG circles.

JJaapSuter

Poisson-Disc II

This animation illustrates the Poisson-disc sampling algorithm, which generates a set of points with a minimum spacing. Red dots are active samples; one is selected randomly, and up to *k* candidate points (open black circles) are generated in an annulus around it. Candidates are rejected if too close to any existing sample, shown by a gray exclusion zone and black lines to the offending neighbor. Inactive samples turn black, and the process ends when none remain active. The code uses d3.svg.arc for the annulus and CSS transitions for animation.

A simple rectangle

This example shows a set of circles moving randomly within an SVG canvas, with their positions and radii changing every 500 milliseconds. The visualization uses D3.js version 3 to generate random data points and animate the circles through the `transition()` API, while CSS styles define the circles’ blue fill with partial opacity and red stroke. The animation runs continuously via `setInterval`, creating an ever-shifting pattern of overlapping translucent circles.

JJn1532

Canvas Scatterplot

Two thousand normally distributed points render as a steelblue canvas scatterplot. The code generates data with d3.randomNormal, binds it to custom elements with a d3 data join, and draws the points using Canvas 2D context arcs. A d3.timer repeatedly calls the draw function for 300 milliseconds, clearing and repainting the canvas to animate the visualization. The example uses d3.v4, with linear scales mapping the domain from 2 to 8 onto a 1400 by 750 pixel canvas.

JJverma

canvas circles

The visualization displays a grid of randomly colored circles that continuously appear and expand across the screen. It shows a generative animation where each frame introduces new circles at shuffled grid positions, growing from zero to full size before fading away. The code uses D3.js with SVG elements, leveraging transitions to animate circle radius and removal. Rendering depends on the d3-starterkit and d3-jetpack libraries for concise element creation and data binding. Colors are randomly generated RGB values applied to fill and stroke. The animation runs indefinitely via recursive setTimeout calls, creating an evolving, ever-changing mosaic of overlapping rings on a dark background.

11wheel

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.