Draggable Voronoi Circles - canvas

Draggable Voronoi Circles - SVG

A Voronoi diagram partitions the screen into 100 cells, each containing a black point. Inside each cell, a grey circle is drawn using a brute-force algorithm that finds the largest circle fitting within the convex polygon. The points and circles drift and bounce around the SVG canvas, causing the Voronoi cells to continuously update. Dragging any polygon with the mouse moves its corresponding point and highlights the active cell in red.

Aalexmacy

85% match

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.

Canvas Voronoi

This example visualizes a Voronoi diagram of 100 randomly generated points, with the cell containing the mouse position highlighted in red. As the cursor moves, that site and its cell update in real time. The diagram is rendered entirely to a Canvas 2D context using the d3-voronoi API, computing both cell polygons and Delaunay links. The code draws all cells with black strokes, site markers as small circles, and semi-transparent link lines, demonstrating how d3-voronoi outputs geometric data suitable for immediate canvas drawing.

FFrissAnalytics

Canvas Voronoi

One hundred randomly placed sites form a Voronoi diagram, rendered to a Canvas element. The cell containing the mouse position is filled red, while all cell boundaries and links between neighboring sites are stroked, and each site is drawn as a small circle. The first site follows the pointer via `d3.mouse` on touchmove or mousemove. The example uses `d3.voronoi` to compute cells, links, and polygons, with Canvas 2D context methods like `arc`, `moveTo`, and `lineTo` for drawing.

Draggable Circles with Voronoi Overlay

This example demonstrates a Voronoi diagram overlay on a set of draggable, semi-transparent circles. The visualization uses d3-delaunay to compute the Voronoi tessellation from the circles’ current positions, rendering the cells as stroked paths. Each circle can be dragged via d3.drag, updating its coordinates in the state, which triggers a re-render of both the circles and the updated Voronoi cells. The data consists of six circles with varying radii and colors, and the overlay highlights spatial regions closest to each point.

CCurran Kelleher

Rotating Distance-limited Voronoi - d3v4 - canvas

The example shows a rotating set of distance-limited Voronoi cells rendered on a black canvas, where each cell’s maximum radius shrinks and expands over time. It updates the limit dynamically using a cosine function, redrawing the cells each frame via the `d3.distanceLimitedVoronoi` plugin and the Canvas 2D context. Points are generated from animated circles with varying radii and angular speeds, and the code uses `d3.timer` for the animation loop.

KKcnarf

80% match

Voronoi Topology

One hundred particles drift and bounce across a canvas, their movements guided by random acceleration and velocity decay. A Voronoi diagram of their positions is computed, then converted into a TopoJSON topology using d3-voronoi and custom logic, allowing adjacent cells to be merged or meshed via topojson.merge and topojson.mesh. The canvas animation renders the resulting cell boundaries in gray and highlights alternating merged cells as semi-transparent red polygons, with particle positions drawn as red or black dots.

80% match

Voroblobinoids

A field of one hundred particle points performs a random walk with velocity damping and elastic collisions against the canvas edges. Each frame, the D3 Voronoi tessellation of these points is computed using `d3_voronoi.voronoi`, and the resulting convex cells are drawn with rounded corners via a custom `drawRoundedPolygon` function. Canvas rendering strokes the cell boundaries in white and light gray, while the particles themselves appear as small black dots. The animation loop uses `d3_timer.timer` to drive the real-time updates.