Voronoï playground : undulating radial wave

100%

Voronoï playground : undulating radial wave

✓ Published0🌍 Public

Last edited Dec 3, 2018

Created on Oct 14, 2016

This example shows a Voronoï tessellation morphing around an undulating radial wave. A white circular path continuously deforms, driven by simplex noise, while semi-transparent Voronoï cells fill the surrounding space and shift with the wave’s movement. The cell borders reveal smooth, emergent patterns from the tessellation. The code uses D3 v4’s `d3.voronoi` layout, `d3.interval` for animation, `d3.scaleLinear` for opacity, and the simplex-noise.js library to generate the wave’s noisy radius. A saturate filter highlights the area near the wave path.

AI-generated description

No path is visible, only cells !

This block is a continuation of a previous one. The idea comes when I look at Voronoï tesselation where (sometimes) pathes emerge, due to the smooth chaining of cells's borders. This is put to its extreme in these blocks.

Acknowledgments to:

<a href='https://d3js.org/'>D3.js</a> (v.4)
<a href='http://blockbuilder.org'>blockbuilder.org</a>
<a href='https://github.com/jwagner/simplex-noise.js'>simplex-noise.js</a>
<a href='http://bl.ocks.org/Kcnarf/89a53e5cbdc9e7f9b24153f6d06e2f33'>Simplex Wave + Explanations</a> explains how to compute the dancing radial wave

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Voronoï playground : parquet deformation

This interactive visualization demonstrates parquet deformation, where a quasi-rectangular grid progressively morphs into a quasi-hexagonal pattern. Users move the mouse to adjust the number of Voronoï cells, and click to toggle the visibility of seed points. The code uses d3.v4’s `d3.voronoi` layout, positioning seeds on concentric rings with alternating counts to create the shape transition. A Gaussian blur filter softens the cell edges, and the rendering is SVG-based.

KKcnarf

81% match

Loading thumbnail…

Voronoï playground : Do you see the path ?

The example reveals emergent path-like structures within a Voronoï tesselation by generating cells whose borders align along a user-drawn route. Viewers click and drag to create a continuous white stroke, and the visualization dynamically seeds limited-distance Voronoi cells around that path, coloring and styling each cell border to suggest a coherent corridor. Built with D3 v4, it uses `d3.drag`, `d3.line`, and a custom `d3.distanceLimitedVoronoi` plugin to recompute cells in real time, with an SVG filter applied for visual saturation.

KKcnarf

80% match

Loading thumbnail…

Voronoï playground : parquet deformation

This interactive Voronoi playground simulates parquet deformation, progressively morphing a quasi-rectangular shape at the bottom into a heart-shaped form at the top. Built with D3.js v4, it uses a Voronoi layout with seeds arranged on three concentric rings, where only the middle ring’s cells are visible. As the user moves the mouse over the canvas, the ring distance adjusts, transforming the Voronoi cells; clicking toggles the display of the grey seed points. The SVG rendering includes a transparent hover-area circle that captures mouse events, and the cellular structure is updated via `d3.interval` and a custom `d3.voronoi` helper.

KKcnarf

80% match

Loading thumbnail…

Voronoï playground : Do you see the path ? (II)

This interactive Voronoi playground reveals hidden paths that emerge from the smooth chaining of cell borders. Users can draw their own path by clicking and dragging, or select from predefined paths, which are then used as constraints to generate Voronoi seeds scattered near the path’s trajectory. The resulting cells are rendered as cyan outlines, with a white, blurred stroke tracing the original path and highlighting the emergent route. Built with D3 v4, it uses `d3.voronoi`, `d3.line`, and `d3.drag` to update the tessellation in real time as the path changes.

KKcnarf

79% match

Loading thumbnail…

Voronoï playground: Voronoï transitioning thanks to weighted Voronoï

This example demonstrates smooth transitions between two Voronoï tessellations of blue and green sites, where a slider adjusts the relative weights of each group, causing one set of sites to dominate the diagram and the other to fade out. It uses weighted Voronoï diagrams via the d3-weighted-voronoi plugin, with cells computed by a custom power diagram integrated with a convex hull algorithm and clipped to a circular SVG boundary. The animation updates cell polygons and site visibility in D3 v4, rendering SVG paths with a slider that recalibrates site weights to shift the tessellation.

KKcnarf

78% match

Loading thumbnail…

Voronoï playground: animating the addition/removing of data on a Voronoï map

This example animates transitions between two Voronoï maps, handling both data that persists and data that appears or disappears. Blue cells morph smoothly, while red cells shrink away and green cells grow in. The d3-voronoi-map-tween plugin interpolates site positions and weights, then recomputes each intermediate tessellation with d3-weighted-voronoi. Controls adjust the interpolation slider, toggle overall size or shape changes (using flubber), and display internal site radii.

KKcnarf

78% match

Loading thumbnail…

Voronoï playground: animating the addition/removing of data on a Voronoï map

This visualization animates the transition between two Voronoï maps, showing how cell areas shift when data points are added, removed, or updated. Red cells mark exiting data, green cells mark entering data, and blue cells represent updated values whose areas change accordingly. A slider interpolates between the starting and ending tessellations, while a toggle reveals the underlying sites whose radii encode the data values. The implementation combines D3 v6 with the d3-voronoi-map and d3-weighted-voronoi plugins, computing interpolated site positions and weights via linear interpolation before rebuilding each intermediate map.

KKcnarf

77% match

Loading thumbnail…

Voronoi Spirals

Randomly placed points generate Voronoi cells that gradually spiral inward, cycling through a Cubehelix color scale over a five-second animation. The d3-voronoi layout computes the initial polygons, then each frame the code shifts a vertex and interpolates a new point along each cell’s first edge, closing the path and filling it with a color based on elapsed time. Rendered on a Canvas via the d3.timer API, this creates a continuous, organic morphing effect.

Mmbostock

77% match