Voroni & Chromatic Scale

100%

Voroni & Chromatic Scale

✓ Published0🌍 Public

Last edited Jun 28, 2016

Created on Jun 28, 2016

A Voronoi diagram partitions the view into 2,000 irregular polygons generated from random coordinates, with each cell filled using the `d3.interpolateRdYlBu` continuous color scale from `d3-scale-chromatic`. Hovering over a cell recalculates all fills based on the distance from the hovered point to every other polygon’s data point, reusing the same color interpolator. The visualization relies on `d3.voronoi` for the tessellation and renders paths as SVG, with the hover interaction driven by `mouseover` events.

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

Similar vizzes

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

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

83% match

Loading thumbnail…

Voronoi 101

Voronoi 101 visualizes a Voronoi diagram of ten randomly generated points on a 960×500 SVG canvas. It shows how the plane partitions into colored cells, each containing one point, with white stroke boundaries. The code uses D3 v5’s `d3.voronoi()` with an extent covering the full canvas, computes `voronoi.polygons(vertices)`, and renders each polygon as an SVG `path` via the custom `polygon` function. Fill colors come from `d3.schemePaired`, and the original points appear as small circles.

Aaaizemberg

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

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

80% match

Loading thumbnail…

Voronoi Sorting

A Voronoi diagram of 500 randomly placed points continuously sorts its cells by area. Each polygon’s fill color encodes its area on a logarithmic scale, and cells slide horizontally into size order before the diagram recalculates from their new positions. The process repeats indefinitely, redrawing shapes and colors as areas change. Built with D3 v4, it uses `d3.voronoi` for tessellation, `d3.scaleLog` and `d3.scaleSequential` for mapping, and SVG `path` transitions with `d3.timeout` to loop the animation.

Aalexmacy

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

79% match

Loading thumbnail…

Voronoi binning (animated)

This animated visualization demonstrates Voronoi binning: 4,000 random points are generated, then sorted by size, with the top 10% selected as Voronoi sites. Initially, all dots appear white, but after a delay, the larger site points are colored, and then every other point is recolored according to the site of its Voronoi cell, found via the `diagram.find` method. The animation uses `d3.interval` to repeat the algorithm, `d3.voronoi` for the diagram, and D3 transitions to fade polygons and dots in and out, rendering in SVG.

AAjayyy

79% match