Annulus Sampling I

100%

Annulus Sampling I

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jun 6, 2014

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.

AI-generated description

This animation demonstrates the perils of naïve annulus sampling. If the radius and angle are chosen with random uniformity, the sample density will be higher where the radius is smaller, and thus points will be concentrated around the inner edge of the annulus. See corrected sampling.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Annulus Sampling II

A static annulus is drawn on a Canvas, with points appearing over time to demonstrate uniform random sampling within the ring. The code uses the D3.js timer to animate the process, plotting 50 new points per frame. Each point’s radius is derived from the square root of a uniform random value scaled between the squared inner and outer radii, ensuring spatial uniformity. The implementation relies on Canvas API calls like `arc()` and `fill()`, with the sampling logic computed via JavaScript’s `Math.random()` and trigonometric functions.

Mmbostock

92% match

Loading thumbnail…

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.

Mmbostock

70% match

Loading thumbnail…

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

69% match

Loading thumbnail…

Circles

A field of 1,000 small circles drifts randomly across an SVG canvas, wrapping around the edges when they exit the viewport. A text label in the corner displays a live frames-per-second counter. The animation uses `d3.timer` to update each circle's `cx` and `cy` attributes every frame, with positions stored in a data array generated from `d3.range(1000)` and `Math.random`. The code runs on D3 v3 and renders purely with SVG elements.

Mmbostock

69% match

Loading thumbnail…

d3 selection exploration

Animated green circles move horizontally across an SVG canvas while their vertical position and radius fluctuate according to a sine wave. The visualization demonstrates D3’s `selectAll().data().join()` pattern, handling dynamic array sizes by entering and exiting circles as the count oscillates. Using `d3.range` to generate data points and a `setInterval` timer at 60 frames per second, it updates attributes like `cx`, `cy`, and `r` in place. The code renders with SVG and leverages D3 version 7.8.5, showing a smooth, continuous wave-like pattern.

NNeeraj Kumar

69% match

Loading thumbnail…

D3 Selection Exploration

Fifteen circles undulate in an animated sine-wave pattern, with positions and radii oscillating smoothly over time. The example demonstrates D3's selection and data-join mechanics by using `selectAll` and `join` to bind an array of generated data to SVG circle elements. Rendered in SVG, the animation updates every 100 milliseconds via `setInterval`, incrementing a phase variable to drive the motion. The code imports `select` and `range` from D3 v7, showing the modern `join` pattern as a concise replacement for the older `enter`/`merge` approach.

Aalexscott-untitled

69% match

Loading thumbnail…

D3 selection exploration

This example demonstrates how D3 selections manage dynamic data updates through animated circles. It uses `d3.select`, `d3.range`, and the selection’s `.data()`, `.join()`, and `.attr()` methods to bind changing arrays of position and radius values to SVG circle elements. A `setInterval` loop updates the data at 60fps, with positions and sizes driven by sine functions, causing circles to appear, disappear, and shift smoothly. The code highlights both loose coupling of data to visual attributes and the modern `.join()` API for enter/update/exit handling.

BBart van Pelt

69% match

Loading thumbnail…

D3 Selection Exploration

This example demonstrates how D3’s data join pattern animates a dynamic set of circles, whose count and vertical positions oscillate sinusoidally over time. Using `d3.select` and `d3.range`, it generates an array of points and binds them to SVG circle elements via `selection.data()` and `selection.join()`, updating `cx` and `cy` attributes each frame. The code runs a `setInterval` at 60fps, recalculating data with a time-based sine wave, while `d3` version 7.6.1 manages enter, update, and exit states automatically.

ММаксим Грязнов

68% match