Mosaic3

100%

✓ Published0🌍 Public

Last edited Jul 1, 2018

Created on Jul 1, 2018

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.

AI-generated description

works with d3.v4

forked from <a href='http://bl.ocks.org/Stroked/'>Stroked</a>'s block: <a href='http://bl.ocks.org/Stroked/507291e62056ff008c470a3b8e7e26b9'>Mosaic</a>

mit Licensed

Similar vizzes

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

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

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

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

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

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

79% 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…

Voronoi

This example shows an interactive Voronoi diagram built with D3 v4, displaying 100 randomly generated points and their corresponding cells. Initially, the cells are hidden, but users can enable a hover effect that highlights the cell containing the mouse cursor, turning the hovered point red. A toggle also reveals all Voronoi polygons as thin gray outlines. The visualization uses `d3.voronoi()` to compute polygon boundaries from the points, and renders the result as SVG paths and circles within a menu-driven interface.

AAjayyy

76% match