A jupyter notebook for D3

Svelte + D3: Voronoi

A Voronoi diagram partitions random points into cells, with a highlighted pink cell and black dot that follow the mouse cursor across the screen. The example uses D3's `Delaunay` and `voronoi` APIs to compute the diagram from 100 randomly generated data points, then renders it as SVG paths and circles in a Svelte component with reactive declarations for scales and layout.

MMatthias Stahl

71% match

path for Distance-limited Voronoi cell - d3v4

This interactive D3.js v4 example visualizes a distance-limited Voronoi cell, showing the intersection between a standard Voronoi polygon and a circle centered on one of its seeds. Users can drag the seed points or the circle's radius handle to update the layout in real time. The code computes the Voronoi polygons via `d3.voronoi` and traces the clipped cell path with a custom line function, rendering the result as SVG paths with interactive drag behaviors.

KKcnarf

70% match

Rotating Voronoi in d3v4

A rotating Voronoi diagram animates dozens of moving points whose cells constantly morph, producing intricate curved patterns against a black background. The animation derives from points arranged on circular paths that rotate at varying speeds and radii, while the Voronoi tessellation updates each frame. The code uses d3.voronoi to compute the polygons and d3.line with the curveBasisClosed interpolator to render them. A custom resample function subdivides each polygon edge into three segments before drawing, creating the smooth, curved cell boundaries. The animation runs continuously via d3.timer, with points’ positions updated directly in response to elapsed time.

70% match

geoVoronoi mesh()

This example shows a dynamic Voronoi diagram on a globe, with a mesh of cell boundaries overlaid on a rotating orthographic projection. It generates 100 random geographic points, computes their spherical Voronoi tessellation using the `d3.geoVoronoi` plugin, and renders the resulting polygons and sites as SVG paths via `d3.geoPath`. The animation uses `d3.interval` to rotate the projection over time, continuously redrawing all paths. The code relies on D3 v4, the d3-delaunay library, and custom geo-Voronoi logic, with a light beige sphere and dark gray mesh for contrast.

70% match

Voronoi tests

A test suite of 33 mini Voronoi diagrams rendered as SVGs checks edge cases for the `d3.geom.voronoi` API, focusing on degenerate configurations of one to four points. Each square plot shows clipped Voronoi cells and source points, demonstrating how the algorithm handles collinear points, duplicate ordering, and single-point inputs. The examples are generated with `d3.geom.voronoi()` with a clipping extent, using `d3.select` and inline SVG paths and circles. The source data is hardcoded in the script, comprising point arrays laid out in a grid of small graphs.

Mmbostock

d3 Voronoi Worker

A thousand randomly moving points drive a live Voronoi tessellation, visualized as colored cells on a Canvas. A separate SVG circle tracks the mouse, while the page displays the frame rates of the data updates, the tessellation computation, and the overall rendering. The heavy Voronoi calculation runs in a Web Worker using `d3.voronoi()`, keeping the mouse tracking responsive even when the tessellation lags behind.

Voronoi Labels in d3v4

This example uses a Voronoi tessellation to place labels in a scatterplot, showing how cell area and centroid direction determine which points get labeled and where. The code generates 200 random points, computes their Voronoi polygons with d3.voronoi, and filters for cells larger than 2000 square pixels. For each qualifying point, it compares the centroid to the point itself, choosing a label orientation among top, right, bottom, or left based on the angle. The visualization renders SVG paths for cell borders and centroid lines, with labels positioned via text anchors and offsets.

Voronoi Circles

Voronoi Circles uses D3’s Voronoi tessellation to partition a canvas into regions around moving points, with each region filled by a colored circle that pulses and shifts in size. The animation, rendered with the Canvas API, computes the Voronoi diagram via `d3.voronoi` and updates the drawing each frame. The example demonstrates how Delaunay-based spatial subdivision can drive a simple, rhythmic visual effect.

Mmbostock