Skip to main content
100%

Color Mesh

✓ Published0🌍 Public
Aajayjayayy
Last edited May 28, 2018
Created on May 28, 2018

A color mesh maps a field of sampled points to a palette of CIELAB colors, with each Voronoi cell filled and stroked by the color of its central sample. The samples are generated using a Poisson-disc sampler, and the Voronoi diagram is computed with d3.geom.voronoi, clipped to the SVG canvas. The color function derives lightness and chromaticity from each point’s distance and offset from the center, producing a smooth radial gradient across the mesh.

AI-generated description

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

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/99049112373e12709381'>Color Mesh</a>

gpl-3.0 Licensed

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
89% match
Loading thumbnail…

Color Mesh II

A Delaunay triangulation fills the viewport with a mosaic of color, where each triangle’s fill and stroke are derived from the LAB color space based on its centroid’s distance from the center. The point set is generated by a Poisson-disc sampler, ensuring even spacing, and then triangulated using `d3.geom.voronoi`’s `triangles` method. Each polygon is rendered as an SVG path with a computed `d` attribute, producing a smooth, radially symmetric gradient of hues and lightness across the 960×500 canvas.

Aajayjayayy
81% match
Loading thumbnail…

Color Mesh II

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.

Mmbostock
78% match
Loading thumbnail…

Voroni & Chromatic Scale

This visualization displays a Voronoi tessellation of 2,000 random points, with each polygon’s fill color mapped through a chromatic scale. The example uses D3 v4.0 with the `d3.voronoi` layout, `d3-scale-chromatic`’s `d3.interpolateRdYlBu` for continuous ColorBrewer coloring, and SVG paths for rendering. On mouseover, all polygon fills recolor based on the Euclidean distance from the hovered point’s coordinates, creating an interactive distance-based heatmap effect.

FFrissAnalytics
69% 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
68% match
Loading thumbnail…

Mosaic

This example generates a mosaic-like pattern of colored polygons using a Poisson disc sampling algorithm to distribute points evenly across a 960 by 500 canvas. The code then creates a Voronoi diagram from these points via `d3.voronoi`, and each resulting cell is filled and stroked with a color derived from the CIE Lab color space using `d3.lab`, based on the cell’s distance from the canvas center. The SVG paths are rendered with D3 v4, and the overall effect is a gradient of hues radiating outward from the middle.

AAjayyy
68% match
Loading thumbnail…

Colorcomb

Four hundred particles drift and bounce across a full-screen canvas, their paths perturbed by random forces and velocity damping. A Voronoi tessellation of their positions is drawn twice: first as a thick black stroke for contrast, then each cell is stroked with a color derived from its centroid’s screen coordinates, converted through `d3.lab` and `d3.hcl` with a hue that rotates over time. The animation uses `d3-timer`, `d3-voronoi`, and Canvas 2D rendering.

Mmbostock
67% match
Loading thumbnail…

Mosaic III

This visualization uses a Poisson-disc sampling algorithm to generate a set of points across a 1920×1080 canvas, which then feeds a D3.v4 Voronoi tessellation to create a mosaic of polygons. Each polygon is filled and stroked with a color derived from its centroid’s distance from the canvas center, computed in the CIE Lab color space via d3.lab. The result is a smooth radial gradient of hues across the irregularly shaped cells, rendered as SVG paths. The code relies on d3.voronoi and a custom poissonDiscSampler implementation based on Jason Davies’ algorithm.

AAjayyy
67% match