Cushion Voronoi

100%

Cushion Voronoi

✓ Published0🌍 Public

Last edited Sep 30, 2018

Created on Sep 30, 2018

This visualization shows a Voronoi diagram of 20 randomly placed sites, with each cell shaded by a radial gradient centered on its site. Darker regions indicate higher cost to reach the nearest site. The example uses the `d3.voronoi()` API to compute cell polygons from random points, then renders them as SVG paths filled with `radialGradient` definitions in user space. Each site is marked with a gray circle, and the gradient extends 300 units from the center, creating a cushioned, 3D-like depth effect.

AI-generated description

A Voronoi diagram colored with a radial gradient centered on each cell's site. The luminance of each point is proportional to the cost of reaching the nearest site (the darker the color, the higher the cost).

forked from <a href='http://bl.ocks.org/nitaku/'>nitaku</a>'s block: <a href='http://bl.ocks.org/nitaku/dd611c0e4dae1d38eab67aedae7ac44f'>Cushion Voronoi</a>

forked from <a href='http://bl.ocks.org/FrissAnalytics/'>FrissAnalytics</a>'s block: <a href='http://bl.ocks.org/FrissAnalytics/5b94922783274e99e6cffe76cd3ba268'>Cushion Voronoi</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Cushion Voronoi

A Voronoi diagram partitions the screen into cells, each anchored by a randomly placed site. This example renders the cells as cushioned shapes by filling each polygon with a radial gradient that transitions from white at the site’s coordinates to black at the edges, visually encoding distance from the nearest site. The gradient is defined in SVG `defs` and applied via the `fill` attribute on each `path` element. The code uses `d3.voronoi` from D3 v4 to compute the polygons and positions 20 circular site markers, with the `d3-selection-multi` plugin for setting multiple attributes at once.

FFrissAnalytics

93% match

Loading thumbnail…

Voronoi binning

4000 random points are colored by the nearest of 400 weighted sites, selected as the top 10% by a random weight and arranged as a Voronoi diagram using d3.voronoi. A custom `find` method on the diagram, which walks neighboring cells via halfedges and optimizes from the last result, assigns each point the site color of its containing cell. Circles are rendered in SVG, with radius proportional to the square of each point’s weight.

PPhilippe Rivière

76% match

Loading thumbnail…

Voronoi Tessellation

This interactive Voronoi diagram shows how a set of one hundred random points partitions a 960-by-500 SVG canvas into polygonal cells. Moving the mouse repositions the first site, causing the diagram to recompute dynamically with the red polygon, black links, and white site markers updating in real time. Built with D3 v4 and the d3-voronoi library, the example renders polygons as SVG paths, links as lines, and sites as circles, with all geometry recalculated on each mouse move.

Mmbostock

75% match

Loading thumbnail…

Bounded Voronoi Tessellation

This interactive visualization demonstrates a bounded Voronoi tessellation, where 100 randomly placed sites partition the SVG canvas into colored polygonal cells. The mouse controls the first site, dynamically updating the diagram as it moves. The code uses d3.voronoi to compute the tessellation and d3.polygonHull to create a convex hull around the sites, which is then expanded outward to bound the diagram. Artificial points are added along this expanded hull to ensure the Voronoi cells are fully enclosed, with the generator sites rendered as circles and the convex hull traced as a pink line.

PPhilippe Rivière

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

74% match

Loading thumbnail…

Voronoï playground : interactive weighted Voronoï study III (multiple sites)

An interactive study of weighted Voronoi diagrams, this d3.v4 visualization shows four draggable sites (two blue, two green) and their influence areas, or cells, within a rectangular clipping polygon. Sliders control the weight of each color group, and unit circles around sites indicate their relative weights. The diagram is computed via a parabolic power diagram algorithm, with convex hulls and 3D-to-2D dual-point mapping, then clipped using the Sutherland–Hodgman method via `d3.polygonClip`. Cell polygons render in SVG with transitions, while `d3.select` manages user interactions.

KKcnarf

74% match

Loading thumbnail…

Cylindrical Voronoi

The example displays a Voronoi diagram of 300 random sites mapped onto a cylindrical surface, with the left and right edges seamlessly connected. Two vertical lines mark the cylinder’s seam. The code constructs the effect by duplicating each site, shifting copies by the cylinder’s width, and filtering links that connect only shadow copies. It uses the d3-voronoi library with d3.v4 and renders cells, links, and sites on a Canvas 2D context. The first site follows the mouse, which wraps around the cylinder’s edges.

PPhilippe Rivière

74% match

Loading thumbnail…

Voronoi binning (animated)

Four thousand random points are colored by size, with the largest ten percent becoming Voronoi sites. The animation cycles through stages: it sorts points by size, uses the top ten percent as sites for d3.voronoi, then assigns every point the color of its site’s cell via the customized `diagram.find()` method. Points and cells fade, recolor, and reset every nine seconds using d3.interval and transitions.

PPhilippe Rivière

73% match