Mosaic II

100%

✓ Published0🌍 Public

Last edited Jul 1, 2018

Created on Jun 14, 2018

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.

AI-generated description

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

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/76342abc327062128604'>Color Mesh II</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

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

83% match

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

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

77% match

Loading thumbnail…

Gist 00170d49e926de0c3a9a

A grid of small circles and hexagon-like arrangements of rounded orange rectangles animates in a staggered transition. The visualization generates a field of triangular tile motifs, where each tile contains three small circles and three rounded rectangles positioned at their edges. Initially, the rectangles and circles sit at the tile centers; after a delay, they rotate outward to the triangle’s midpoints. Using D3.js with SVG transitions, the code applies `translate` and `rotate` transforms to reposition elements, driven by trigonometric calculations for hexagon geometry. The rendering uses D3 selections and transitions, with data-bound groups and nested arrays to handle multiple coordinates.

11wheel

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

71% match

Loading thumbnail…

Gist 6430664ff001d9202e5ef55df4ade43c

A collection of small, square tiles arranged in two separate fields—one flat, one garden-like—forms a mosaic of colorful cells. The visualization uses Vue to render the layout while leveraging Canvas pixel manipulation for fine-grained control over the tile colors and patterns. The code references force simulation for distribution and image data extraction from a provided source, suggesting a data-driven generation of the organic, layered structure.

SStephen

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

69% match