Voroni & Chromatic Scale

100%

Voroni & Chromatic Scale

✓ Published0🌍 Public

Last edited Sep 30, 2018

Created on Sep 30, 2018

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.

AI-generated description

Creates a d3-voronoi diagram for a couple of random coordinates. The color of the polygons is defined by a continuous color scheme based on ColorBrewer using d3-scale-chromatic.

Example in D3 v4.0

forked from <a href='http://bl.ocks.org/allardw/'>allardw</a>'s block: <a href='http://bl.ocks.org/allardw/9cb188f5bb09824492084cc46e0faafd'>Voroni & Chromatic Scale</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Voronoi Labels

This visualization demonstrates a heuristic for labeling scatterplots using Voronoi tessellation. A set of 200 normally distributed points is rendered as small circles, with each point's Voronoi cell drawn as a gray polygon. A orange line connects each point to its cell’s centroid. The code only labels points whose cell area exceeds a threshold (2000), placing the index number at the point’s position. The label’s orientation—top, right, bottom, or left—is determined by the angle between the point and its cell’s centroid, computed using `Math.atan2`. Implemented with D3 v3, it uses `d3.geom.voronoi` with `clipExtent` and `d3.geom.polygon` to generate and analyze cells.

FFrissAnalytics

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

81% match

Loading thumbnail…

Voronoi Tesselation

This example visualizes a Voronoi tessellation of 100 random points within an SVG canvas, with each cell filled by a random HSL color and vertices marked as small circles. Moving the mouse repositions the first vertex, dynamically recomputing the tessellation and updating only the paths whose geometry changed. The code uses the D3 library’s `voronoi` function from the `jit/voronoi.min.js` module, along with SVG path elements and `d3.svg.mouse` for mouse coordinates. The rendering is immediate, without animations or transitions.

Mmbostock

79% match

Loading thumbnail…

Voronoi Test (N=2)

The example shows a Voronoi diagram computed from two fixed points, with each cell and its corresponding point circle filled using the same color from `d3.scale.category10()`. Using d3.v3 and SVG, the code applies `d3.geom.voronoi` to generate the cell polygons, then renders them as `path` elements with a hover effect that increases fill opacity. The circles are positioned via `transform` translations, and both layers receive black strokes from the shared CSS rule.

Mmbostock

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

78% match

Loading thumbnail…

Voronoi colorized spanning tree

A Voronoi diagram of 1000 random sites is colored by a spanning tree that connects each site to its nearest neighbor closer to a moving root point. As the mouse moves, the root updates, the tree edges redraw, and every cell's fill derives from the tree's branch angles and depth. The example uses d3.v4 with `d3.voronoi` to compute cells and custom `diagram.find` and `diagram.next` methods for tree construction, then renders SVG polygons and lines with HSL colors.

PPhilippe Rivière

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

78% match

Loading thumbnail…

Voronoi-based point picker (revisited)

This example demonstrates a Voronoi diagram where each point’s interactive zone is limited by a maximum radius, adjusted via a slider. It shows how hovering over a polygon highlights the corresponding data point. The visualization uses the `d3.distanceLimitedVoronoi` plugin to compute these clipped regions, replacing the need for clip paths. The code generates 100 random vertices, renders the polygons and circles using D3.js v4, and redraws the diagram in response to slider input.

KKcnarf

77% match