Mosaic

100%

✓ Published0🌍 Public

Last edited Jun 14, 2018

Created on Jun 13, 2018

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.

AI-generated description

works with d3.v4

mit Licensed

Similar vizzes

Loading thumbnail…

Mosaic3

This example shows a mosaic-like visualization built from a Voronoi diagram. A Poisson disc sampler generates a set of evenly spaced sample points across a 960×500 SVG canvas, and `d3.voronoi()` computes the corresponding polygons. Each polygon’s fill and stroke color are derived from its data point’s position using a `d3.lab()` color space, producing a smooth radial gradient effect from the center. The code uses D3 v4, SVG paths, and the custom `poissonDiscSampler` function.

AAjayyy

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

92% match

Loading thumbnail…

Mosaic II

A mosaic of hundreds of triangular tiles fills the browser window, each colored by a CIE Lab color model based on its distance and angle from the center. The tiles are generated by computing a Delaunay triangulation over a set of points sampled with a Poisson disc process, ensuring even spacing. The visualization uses the d3.v4 library, leveraging `d3.voronoi().triangles()` for the triangulation and `d3.polygonCentroid()` to determine each triangle's fill and stroke color.

AAjayyy

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

81% match

Loading thumbnail…

Poisson-Disc III

The visualization renders Van Gogh’s *The Starry Night* as a mosaic of Voronoi cells, with each cell’s fill color sampled from the corresponding pixel of the source image. It uses a Poisson-disc sampling algorithm to place 10,000 points evenly across the canvas, then applies `d3.geom.voronoi` with a clip extent to construct the cells. The image is loaded via an `Image` object and drawn to a 960×500 canvas, where `getImageData` extracts the color for each sample. The code relies on D3 v3 and Canvas 2D API.

RRastignac

77% match

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

77% match

Loading thumbnail…

Poisson-Disc III

This visualization uses Poisson-disc sampling to place 10,000 points across Van Gogh’s *The Starry Night*, then renders each point as a Voronoi cell colored by the underlying image pixel. The code loads the painting into a Canvas, reads its pixel data via `getImageData`, and fills each cell with the sampled color. It relies on `d3.geom.voronoi` for the cell geometry and a custom `poissonDiscSampler` function to ensure even spacing between points. The output is a stippled, mosaic-like reinterpretation of the artwork, contrasting with uniform random sampling.

Mmbostock

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

76% match