Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Draggable Circles with Voronoi Overlay

Public visualization

Viewing a saved revision (read-only)

47f9ebfe0b6b40529cc4fdb02a0b5daf

Draggable Circles with Voronoi Overlay

0 stars1🌍 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.

Older 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.