#HAW: Svelte + D3: Voronoi

100%

#HAW: Svelte + D3: Voronoi

✓ Published1🌍 Public

Last edited Nov 28, 2025

Created on Nov 28, 2025

A Voronoi diagram partitions a 2D space into regions around 100 randomly generated points. As the mouse moves over the full-screen SVG, the first point (highlighted in yellow) updates its position to follow the cursor, dynamically redrawing the surrounding voronoi cells and circles in green. The code uses d3.Delaunay and `voronoi.renderCell` to compute and render the cells, with scales from `d3.scaleLinear` mapping the data domain to pixel coordinates.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

93% match

Loading thumbnail…

Fork of #HAW: Svelte + D3: Voronoi

This interactive Voronoi diagram visualizes the spatial partitioning of 100 randomly generated points, with a highlighted cell tracking the mouse position. The visualization updates the Voronoi tessellation in real time as the cursor moves, using `Delaunay.from()` and the resulting `voronoi()` method to compute cells. The Svelte app binds client dimensions to size the SVG, while `scaleLinear` maps data coordinates to screen space. Yellow fill and green stroke emphasize the active cell, while a larger green circle marks the cursor’s data point.

Uudjeffrey.jay@gmail.com

91% match

Loading thumbnail…

Fork of Fork of Fork of #HAW: Svelte + D3: Voronoi

A Voronoi diagram partitions a square canvas into 100 cells, each centered on a random data point. A violet path traces through the cells, following a fixed, complex curve. Interactive mouse movement replaces the first data point's position, dynamically recalculating the diagram. The code uses D3's `scaleLinear` and `Delaunay` API to compute the Voronoi cells from the mouse-adjusted points.

NNita

89% match

Loading thumbnail…

Fork of Fork of #HAW: Svelte + D3: Voronoi

A Voronoi diagram partitions a 100-point random dataset into cells around each point, with the entire diagram dynamically updating as the mouse moves across the canvas. The interactive visualization, built with Svelte and rendered as SVG, uses D3's `scaleLinear` for coordinate mapping and `Delaunay.from` to compute the Voronoi tessellation from the points. The mouse position replaces the first data point in real-time, causing the diagram to continuously recalculate and redraw.

NNita

88% match

Loading thumbnail…

Fork of Fork of Fork of #HAW: Svelte + D3: Voronoi

This example builds an interactive Voronoi diagram from 100 randomly generated points, with colorful, semi-transparent cells rendered as SVG paths. It uses `d3.Delaunay` from D3 v7 to compute the Voronoi tessellation and `Delaunay.voronoi().renderCell()` to generate each cell path. Moving the mouse over the visualization updates the first data point to follow the cursor, recalculating the tessellation in real time. Each point is also marked with a small violet glyph and a circle, layered over a dark gradient background.

NNita

88% match

Loading thumbnail…

Fork of Fork of Fork of #HAW: Svelte + D3: Voronoi

A Voronoi diagram partitions a canvas into cells, each anchored by a randomly generated point and filled with a distinct image from Picsum. The code builds the diagram with the d3 Delaunay and voronoi APIs, rendering SVG clip paths for each cell. A green-highlighted first cell tracks the cursor as it moves, demonstrating the dynamic re-computation of the Voronoi tessellation as the center point shifts.

NNita

87% match

Loading thumbnail…

Fork of Fork of Fork of Fork of #HAW: Svelte + D3: Voronoi

A hundred randomly placed points form a colorful Voronoi diagram that updates live as the mouse moves across the screen. The first point follows the cursor, recomputing the cell boundaries via the Delaunay triangulation from `d3.Delaunay`. Each cell contains a small violet glyph, a circle, and a semi-transparent fill from a rotating palette. The visualization uses Svelte’s reactive declarations to scale data coordinates and rerender the SVG on every mousemove event.

NNita

87% match

Loading thumbnail…

Fork of Fork of Fork of Fork of #HAW: Svelte + D3: Voronoi

This example shows a Voronoi diagram generated from 100 random points, where each cell displays a different random image from picsum.photos. Moving the mouse over the visualization repurposes the first data point as the cursor, creating an interactive trail effect with a highlighted green cell. The code uses Svelte's reactive bindings to recompute the `Delaunay.from()` and `voronoi()` results from d3, employing SVG clip paths to mask images to their respective cell boundaries.

NNita

85% match