Svelte + D3: Voronoi

100%

Svelte + D3: Voronoi

✓ Published0🌍 Public

Last edited Nov 26, 2025

Created on Feb 6, 2024

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.

AI-generated description

MIT Licensed

Similar vizzes

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…

Voronoi Tesselation

This example visualizes a Voronoi tessellation of 100 random points within an SVG canvas, with each cell filled by a random HSL color and vertices marked as small circles. Moving the mouse repositions the first vertex, dynamically recomputing the tessellation and updating only the paths whose geometry changed. The code uses the D3 library’s `voronoi` function from the `jit/voronoi.min.js` module, along with SVG path elements and `d3.svg.mouse` for mouse coordinates. The rendering is immediate, without animations or transitions.

Mmbostock

79% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This example shows a collection of six semi-transparent circles scattered across a warm orange-tinted background, each positioned by explicit x and y coordinates with varying radii and shades of blue. The circles are rendered as SVG elements within a 1000x500 viewport, using Svelte’s `{#each}` block to iterate over the static dataset defined in the component’s script. The visualization relies on Svelte’s reactive template syntax for declarative SVG attribute binding, while D3 is imported as a dependency but not actively used in this code. The circles are given a uniform opacity of 0.7, creating subtle overlaps that hint at layered relationships between the points.

SSafrin La Batu

78% match

Loading thumbnail…

Svelte + D3 Starter

Six semi-transparent circles are drawn on a warm orange-tinted background, showing a simple static data visualization example of formatted points. The project demonstrates a minimal Svelte setup that integrates the D3 library, using Svelte’s `{#each}` block to render SVG `<circle>` elements directly from hardcoded data arrays. The `App.svelte` component defines the data and styling, while `index.js` mounts it via Svelte’s `mount` function, and the `package.json` configures D3 as a global dependency for the VizHub environment.

MMatthias Stahl

77% match

Loading thumbnail…

Responsive Svelte Starter

This example demonstrates responsive SVG rendering with Svelte, showing six colored circles at varied positions and sizes that scale dynamically with the viewport. The visualization uses d3.scaleLinear to map data coordinates to pixel positions, while Svelte's bind:clientWidth and bind:clientHeight are used to track container dimensions. The circles are rendered with Svelte's each block, with opacity controlled via inline CSS calc. The dense dot pattern creates a colorful abstract composition that adapts to any screen size.

CCurran Kelleher

77% match

Loading thumbnail…

Bounded Voronoi Tessellation

This interactive visualization demonstrates a bounded Voronoi tessellation, where 100 randomly placed sites partition the SVG canvas into colored polygonal cells. The mouse controls the first site, dynamically updating the diagram as it moves. The code uses d3.voronoi to compute the tessellation and d3.polygonHull to create a convex hull around the sites, which is then expanded outward to bound the diagram. Artificial points are added along this expanded hull to ensure the Voronoi cells are fully enclosed, with the generator sites rendered as circles and the convex hull traced as a pink line.

PPhilippe Rivière

77% match

Loading thumbnail…

Fork of Svelte + D3 Starter

This example visualizes a small dataset of six circles, each positioned with explicit x and y coordinates and varying radii, to create a non-interactive scatterplot-like composition. The data is hardcoded in the Svelte component, and the circles are rendered as SVG elements via an `{#each}` block. The visualization uses a warm translucent orange background with semi-transparent circles, layering them to show overlaps and depth. It relies on Svelte’s built-in templating and styling, with no D3 API calls present, though the project is set up to import D3 as a dependency. The rendering approach is direct SVG manipulation through Svelte’s reactivity.

SSafrin La Batu

77% match

Loading thumbnail…

Fork of Svelte + D3 Starter

Six translucent circles of varying sizes and colors from a blue palette are overlaid on a warm orange-tinted SVG canvas. The circles’ positions, radii, and fills come from hardcoded JavaScript objects, rendered as SVG `<circle>` elements via Svelte’s `{#each}` block. The example demonstrates a minimal Svelte component using declarative markup, with styling applied through a scoped `<style>` tag, while D3 is loaded as a dependency but not used in the visible code.

Rrichard.adamson@hotmail.com

77% match