Voronoi Milestone Party

100%

Voronoi Milestone Party

✓ Published0🌍 Public

Last edited Feb 21, 2025

Created on Apr 29, 2024

A Voronoi diagram gradually constructs itself as 1,500 random points are added one by one, with each new cell fading in. The animation uses d3's `Delaunay` and `voronoi` to compute the diagram from the data, while Svelte's `fade` transition handles the cell appearance. The first 100 cells are filled with a curated red-to-pink color palette, and the rest are black. A hand-drawn path spelling "1500" sits atop the visualization, rendered as SVG.

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

80% match

Loading thumbnail…

Voronoi binning (animated)

Four thousand random points are colored by size, with the largest ten percent becoming Voronoi sites. The animation cycles through stages: it sorts points by size, uses the top ten percent as sites for d3.voronoi, then assigns every point the color of its site’s cell via the customized `diagram.find()` method. Points and cells fade, recolor, and reset every nine seconds using d3.interval and transitions.

PPhilippe Rivière

78% match

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

78% match

Loading thumbnail…

Voronoi binning (animated)

This animated visualization demonstrates Voronoi binning: 4,000 random points are generated, then sorted by size, with the top 10% selected as Voronoi sites. Initially, all dots appear white, but after a delay, the larger site points are colored, and then every other point is recolored according to the site of its Voronoi cell, found via the `diagram.find` method. The animation uses `d3.interval` to repeat the algorithm, `d3.voronoi` for the diagram, and D3 transitions to fade polygons and dots in and out, rendering in SVG.

AAjayyy

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

77% match

Loading thumbnail…

Voronoi Edges

This example animates the edges of a Voronoi diagram generated from 1,500 normally distributed random points. The visualization uses d3.Delaunay and d3.voronoi to compute the diagram, then renders its line segments incrementally on a Canvas using a JavaScript generator and requestAnimationFrame. Each frame draws approximately five new edges with random colors from d3.hsl, creating a dynamic, colorful buildup of the geometric structure.

CCurran Kelleher

77% match

Loading thumbnail…

Voronoi

This example shows an interactive Voronoi diagram built with D3 v4, displaying 100 randomly generated points and their corresponding cells. Initially, the cells are hidden, but users can enable a hover effect that highlights the cell containing the mouse cursor, turning the hovered point red. A toggle also reveals all Voronoi polygons as thin gray outlines. The visualization uses `d3.voronoi()` to compute polygon boundaries from the points, and renders the result as SVG paths and circles within a menu-driven interface.

AAjayyy

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

77% match