Skip to main content
100%

Draggable Voronoi Circles - SVG

✓ Published0🌍 Public
Aalexmacy
Last edited Jun 23, 2017
Created on Jun 23, 2017

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.

AI-generated description

A riff on <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/d1d81455dc21e10f742f'>Voronoi Circles</a>. I updated it to d3 v4, ported it to SVG, and added the ability to drag the polygons.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Draggable Voronoi Circles - canvas

A canvas-based visualization shows 100 particles moving with random velocities, their positions defining a Voronoi diagram whose cells are computed in real time. Each cell contains its largest possible inscribed circle, drawn with a light gray fill, while the cell boundaries and particle centers are also rendered. Users can click and drag any particle, causing its Voronoi cell to follow the pointer and the inscribed circle to update; the active cell is highlighted in red. The animation runs via d3.timer, with particles bouncing off the canvas edges and exhibiting slight random jitter.

Aalexmacy
85% match
Loading thumbnail…

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
84% match
Loading thumbnail…

Voronoi

This example shows an interactive Voronoi diagram built with D3 v4, displaying 100 randomly generated points and their corresponding cells. Initially, the cells are hidden, but users can enable a hover effect that highlights the cell containing the mouse cursor, turning the hovered point red. A toggle also reveals all Voronoi polygons as thin gray outlines. The visualization uses `d3.voronoi()` to compute polygon boundaries from the points, and renders the result as SVG paths and circles within a menu-driven interface.

AAjayyy
81% match
Loading thumbnail…

Voronoi Tessellation

This interactive Voronoi diagram shows how a set of one hundred random points partitions a 960-by-500 SVG canvas into polygonal cells. Moving the mouse repositions the first site, causing the diagram to recompute dynamically with the red polygon, black links, and white site markers updating in real time. Built with D3 v4 and the d3-voronoi library, the example renders polygons as SVG paths, links as lines, and sites as circles, with all geometry recalculated on each mouse move.

Mmbostock
81% match
Loading thumbnail…

Circle Dragging IV

This example demonstrates an improved method for dragging SVG circles, where the circle nearest to the pointer is selected for interaction rather than the topmost one. A Voronoi overlay, computed with `d3.voronoi`, is used for hit-testing, with its cells rendered as light-gray paths. Each circle is clipped to its corresponding Voronoi cell using a `clipPath`. During a drag, the `dragged` function updates the circle’s position and recalculates the Voronoi polygons. The code uses `d3.drag` for the interaction and `d3.scaleOrdinal` with `d3.schemeCategory20` for automatic circle colors.

Mmbostock
80% match
Loading thumbnail…

Fork of Draggable Circles with Voronoi Overlay

This example demonstrates a draggable scatter plot where each point’s interactive region is defined by a Voronoi diagram. Users can click and drag any circle, and its position updates live while the Voronoi overlay recalculates to reflect the new point layout. The visualization uses `select`, `drag`, and `Delaunay` from the `d3` library, with the Voronoi tessellation generated via `delaunay.voronoi([0, 0, width, height])` and rendered as stroked paths. The underlying data is a static set of six colored circles, re-rendered on each drag event.

Aaferdita.e85@gmail.com
79% match
Loading thumbnail…

Voronoi 101

Voronoi 101 visualizes a Voronoi diagram of ten randomly generated points on a 960×500 SVG canvas. It shows how the plane partitions into colored cells, each containing one point, with white stroke boundaries. The code uses D3 v5’s `d3.voronoi()` with an extent covering the full canvas, computes `voronoi.polygons(vertices)`, and renders each polygon as an SVG `path` via the custom `polygon` function. Fill colors come from `d3.schemePaired`, and the original points appear as small circles.

Aaaizemberg
79% match
Loading thumbnail…

Drag circles

Five colored circles are positioned in a row on an 800×480 SVG canvas, each with a radius of 60 pixels. The example demonstrates a basic drag-and-drop interaction using D3.js v4, where users can move any circle freely by clicking and dragging it. The circles change cursor to a move icon on hover and gain a black outline while being dragged. The code uses `d3.drag()` with `dragstarted`, `dragged`, and `dragended` handlers, along with `d3.scaleOrdinal` and `d3.schemeCategory20` for coloring, and `d3.select(this).raise()` to bring the active circle to the front.

EEfratVil
78% match