Shiboronoi

100%

✓ Published0🌍 Public

Last edited Mar 19, 2019

Created on Nov 2, 2013

Dozens of irregular polygonal cells tessellate a canvas, each showing a cropped slice of a single dog photograph. The image fragments align to form the complete picture, while the cells shift in response to mouse movement. The code uses D3 v3’s `d3.geom.voronoi` to compute the tessellation from tab-separated coordinate data, clips the drawing via Canvas `context.save` and `clip`, and renders each cell with `drawImage`.

AI-generated description

  wow
         such voronoi
                 html5
     many cells
                       very convexity
   so tessellation

gpl-3.0 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

72% match

Loading thumbnail…

Canvas Voronoi

One hundred randomly placed sites form a Voronoi diagram, rendered to a Canvas element. The cell containing the mouse position is filled red, while all cell boundaries and links between neighboring sites are stroked, and each site is drawn as a small circle. The first site follows the pointer via `d3.mouse` on touchmove or mousemove. The example uses `d3.voronoi` to compute cells, links, and polygons, with Canvas 2D context methods like `arc`, `moveTo`, and `lineTo` for drawing.

Mmbostock

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

70% match

Loading thumbnail…

Voronoi Circles

Voronoi Circles uses D3’s Voronoi tessellation to partition a canvas into regions around moving points, with each region filled by a colored circle that pulses and shifts in size. The animation, rendered with the Canvas API, computes the Voronoi diagram via `d3.voronoi` and updates the drawing each frame. The example demonstrates how Delaunay-based spatial subdivision can drive a simple, rhythmic visual effect.

Mmbostock

70% match

Loading thumbnail…

Colorcomb II

A Voronoi diagram of hundreds of colored cells animates on a black canvas, with each cell’s color shifting over time toward a shared palette. The visualization is rendered using the `d3-voronoi` library, which computes the tessellation, while a Canvas drawing loop continuously updates the cell fills. The animation derives from per-cell color interpolation, creating a slowly morphing mosaic of polygons. The code is a single self-contained HTML file using JavaScript and the Canvas API, with no external data source beyond the procedurally generated initial cell positions and colors.

Mmbostock

70% match

Loading thumbnail…

Voroblobinoids

A field of one hundred particle points performs a random walk with velocity damping and elastic collisions against the canvas edges. Each frame, the D3 Voronoi tessellation of these points is computed using `d3_voronoi.voronoi`, and the resulting convex cells are drawn with rounded corners via a custom `drawRoundedPolygon` function. Canvas rendering strokes the cell boundaries in white and light gray, while the particles themselves appear as small black dots. The animation loop uses `d3_timer.timer` to drive the real-time updates.

Mmbostock

69% match

Loading thumbnail…

d3 Voronoi Worker

A thousand randomly moving points drive a live Voronoi tessellation, visualized as colored cells on a Canvas. A separate SVG circle tracks the mouse, while the page displays the frame rates of the data updates, the tessellation computation, and the overall rendering. The heavy Voronoi calculation runs in a Web Worker using `d3.voronoi()`, keeping the mouse tracking responsive even when the tessellation lags behind.

PPhilippe Rivière

69% match

Loading thumbnail…

Canvas Voronoi

This example visualizes a Voronoi diagram of 100 randomly generated points, with the cell containing the mouse position highlighted in red. As the cursor moves, that site and its cell update in real time. The diagram is rendered entirely to a Canvas 2D context using the d3-voronoi API, computing both cell polygons and Delaunay links. The code draws all cells with black strokes, site markers as small circles, and semi-transparent link lines, demonstrating how d3-voronoi outputs geometric data suitable for immediate canvas drawing.

FFrissAnalytics

69% match