Fork of #HAW: Svelte + D3: Voronoi

100%

Fork of #HAW: Svelte + D3: Voronoi

✓ Published1🌍 Public

Last edited Nov 28, 2025

Created on Nov 28, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

94% 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

93% 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

93% 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

93% match

Loading thumbnail…

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

This interactive Voronoi diagram visualizes 100 randomly generated data points, overlaid on a Buddha silhouette defined by an SVG path. As the user moves the mouse over the visualization, the first data point is repositioned to follow the cursor, causing the Voronoi cells to update dynamically. The visualization uses D3’s `scaleLinear` for coordinate scaling and `Delaunay` for Voronoi computation, rendering the cells as SVG polygons with a cyclical color palette. The interaction demonstrates real-time updates of a Voronoi tessellation based on a moving point, creating an engaging and responsive visual effect.

NNita

92% 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

91% 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

91% match

Loading thumbnail…

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

This visualization presents a Voronoi diagram over one hundred randomly generated data points, rendered as colored SVG cells. A mouse movement updates the first data point, causing its Voronoi cell and position to shift in real time. The code uses `d3.Delaunay` to compute the Voronoi tessellation and `scaleLinear` to map the data domain to the viewport. Each cell contains a scaled Buddha path, and hovered points are emphasized with a black stroke.

NNita

91% match