Color Mesh II

100%

✓ Published0🌍 Public

Last edited Oct 31, 2015

Created on Jul 3, 2015

This example displays a colorful abstract image made of triangular cells formed by a Delaunay triangulation of a Poisson-disc sample of points. The visualization is rendered as SVG paths in a browser using the D3 v3 library, specifically calling `d3.geom.voronoi` to compute the triangulation. Each triangle is filled and stroked with a color determined by the `d3.lab` color space, which maps the centroid’s distance from the center to a luminance and hue gradient, creating smooth color transitions across the canvas. The underlying point distribution is generated via a custom Poisson-disc sampler, ensuring evenly spaced vertices.

AI-generated description

This version uses a Delaunay triangluation; compare to a Voronoi diagram.

Similar vizzes

Loading thumbnail…

Color Mesh

A Voronoi diagram partitions a 960 by 500 canvas into cells, each filled with a color derived from its sample point's distance from the center using the CIELAB color space. The samples are generated via a Poisson-disc sampling algorithm to ensure even spacing. The visualization renders as an SVG using `d3.geom.voronoi` with clipped extents, and each cell's fill and stroke are set by the `d3.lab` color function. The code builds upon a provided `poissonDiscSampler` implementation.

Mmbostock

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

76% match

Loading thumbnail…

Delaunay Circles II

A field of points connected by Delaunay triangles animates in a loop, with each triangle’s interior filled by a circle whose radius grows until it touches the triangle’s edges. The canvas redraws every frame, shifting point positions via a time-based function to continually recompute the triangular mesh and its inscribed circles. The visualization uses the `d3-voronoi` library for the Delaunay triangulation and draws directly to a 2D Canvas via JavaScript, with animation driven by a simple time step and no external data source.

Mmbostock

75% match

Loading thumbnail…

Delaunay Force Mesh III

This visualization shows a force-directed mesh of points initially distributed via Poisson-disc sampling, with a Delaunay triangulation overlaid as connected gray lines. A fixed root node is pulled by mouse movement, while all nodes gravitate toward their original sample positions. The code uses `d3.layout.force` for the physics simulation, `d3.geom.voronoi` to compute the mesh links, and renders the result on a Canvas via the `getContext("2d")` API. Each tick redraws the links and nodes, with points styled as white-stroked black dots.

Mmbostock

74% match

Loading thumbnail…

Delaunay Circles

A field of randomly walking points forms a continuously updating Delaunay triangulation. Each triangle in the mesh contains an inscribed circle, with the circles rendered in a dark color against a light background. The animation runs on an HTML canvas, with the Voronoi and Delaunay calculations handled by the d3-voronoi library, while the points themselves are displaced using a simple random-walk algorithm. The code demonstrates the geometric relationship between the triangular mesh and the inscribed circles, which change as the points drift across the viewport.

Mmbostock

74% match

Loading thumbnail…

Poisson-Disc IV

This example generates a set of points using a Poisson-disc sampling algorithm and renders them as a clipped Voronoi diagram. The SVG paths are filled with a color mapped from each polygon’s area using a cubehelix color scale, creating a smooth gradient across the canvas. The code uses d3.geom.voronoi for the diagram, d3.scale.cubehelix for coloring, and d3.svg for rendering. The Poisson-disc sampler is based on Jason Davies’ implementation, with a fixed radius of 5.68 pixels.

Mmbostock

74% match

Loading thumbnail…

Delaunay Triangulation

This interactive demonstration shows a Delaunay triangulation of 100 randomly generated points, with triangles and links redrawn in real time as the user moves the mouse. The first point follows the cursor, highlighting all triangles and links connected to it in red and white. Built with d3.v4 and the d3-voronoi API, it uses SVG paths, lines, and circles to render the triangulation, updating the visualization dynamically on mousemove and touchmove events.

Mmbostock

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

72% match