Skip to main content
SimilarExport ZIP
100%

Draggable Circles with Voronoi Overlay

✓ Published0🌍 Public
CCurran Kelleher
Last edited Mar 1, 2024
Created on Feb 29, 2024

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.

AI-generated description

An example showing how to make a Voronoi Diagram overlay using d3-delaunay/voronoi.

Reference Examples

Challenge

  • Use a Voronoi Diagram as the interaction surface for one of your existing visualizations, such as a scatter plot or multi-line chart.
MIT Licensed

Similar vizzes

Loading thumbnail…

Draggable Circles with D3-Drag

This example demonstrates draggable circles on a light green background. Users can click and drag any of the six colored circles, and their positions update in real time. The visualization uses D3’s `drag` behavior to listen for drag events, updating the `x` and `y` properties of the corresponding data object. Circle positions are rendered with SVG `<circle>` elements, bound to the data via a data join and refreshed through state management. The code imports `select` and `drag` from the D3 library, with initial circle coordinates and radii defined in a hardcoded array.

CCurran Kelleher
83% 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
81% match
Loading thumbnail…

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

d3-voronoi.clipCircle

This example demonstrates a Voronoi tessellation clipped by a circular boundary that follows the mouse cursor. It shows how to programmatically clip Voronoi cells to a circle, rather than relying on browser-level clipping, with the clipping circle moving interactively as the user drags. The algorithm computes segment-circle intersections and constructs a path using lines and arcs, blending d3.line with curveCatmullRomClosed. Built with d3.v4, it uses d3.voronoi, d3.scaleOrdinal with d3.schemePastel1, and renders 100 randomly placed sites as SVG polygons and circles.

KKcnarf
77% 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
76% match
Loading thumbnail…

Hello VizHub

This example demonstrates interactive circles on an SVG canvas, where users can drag each circle to reposition it or click to trigger a temporary scale-and-color animation. The visualization highlights D3 v5’s drag behavior and transition system, using chained transitions to enlarge circles to black and then restore their original size and color. It generates 20 randomly positioned circles with a fixed radius, colored via the `d3.schemeCategory10` palette. The code relies on `d3.create`, `d3.range`, `d3.drag`, and `selectAll().join()` to manage dynamic elements and event handling.

Hhvindshoej
76% match
Loading thumbnail…

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

path for Distance-limited Voronoi cell

This example visualizes distance-limited Voronoi cells by intersecting each Voronoi region with a circle of adjustable radius. It shows how a cell's boundary changes as seeds or the radius are dragged, highlighting the clipped path where the cell meets the circular limit. The implementation uses D3 v3’s `d3.geom.voronoi` layout and `d3.svg.line` to compute and draw cell paths, with `d3.behavior.drag` enabling interactive updates to seed positions and the maximum cell distance. Rendering is SVG-based, with circles and paths styled via CSS classes.

KKcnarf
76% match