Skip to main content
100%

United States of Voronoi Tweening

✓ Published0🌍 Public
Aalexmacy
Last edited Aug 24, 2016
Created on Aug 24, 2016

This visualization animates a tween between the geographic outlines of US states and their Voronoi cell boundaries, generated from state capitals via d3.voronoi. The map uses a Mercator projection and toggles between each state's projected border and its Voronoi polygon every two seconds, with a custom shape interpolation function that redistributes points equally along each side of the destination shape to avoid rounded or skipped corners. A clip path confines the animation to the state boundaries, and capital cities are marked with small circles. The transition is built with d3.v4 SVG elements and includes a reusable shapeTween.js module with two tweening approaches, one based on side-length distribution and another on proportional path length.

AI-generated description

This is another version of the shape tweening from <a href='http://bl.ocks.org/alexmacy/06cf037853999219cd82bc79edc4aee6'>this block.</a> Inspired by Jason Davies' <a href="https://www.jasondavies.com/maps/voronoi/us-capitals/">United States of Voronoi.</a>

The transition I had previously used for shape tweening plots the points along the new shape proportionally to where they were along the original shape. This potentially results in rounded or skipped corners, so I had to figure out a new way to do it.

The new transition used here draws the destination shapes by plotting the points form the old shape equally along each side of the new shape. The result isn't always as clean of a transition, but it's still pretty smooth and the resulting shape is free from any rounded or skipped corners.

I also put both transition functions in the standalone file 'shapeTween.js' to be able to easily reuse it later.

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

United States of Voronoi Tweening w/ borders

This animated visualization transitions U.S. state boundaries between their geographic shapes and Voronoi cells computed from state capitals. Using d3.v4 and SVG, each state polygon tweens between its projected geographic outline and its Voronoi cell, with a second border layer appearing in red during transitions to highlight the differences. Colors, strokes, and capital points shift as the shapes morph, with a custom shape-tweening function that distributes points along each side of the destination shape to avoid rounded or skipped corners. A known rendering-order bug causes some borders, like where "New Wyoming" overlaps old Nebraska, to be hidden during the transition.

Aalexmacy
93% match
Loading thumbnail…

United States of Voronoi Area Ranking

This example animates a transition between U.S. state shapes and a Voronoi diagram generated from state capitals, while ranking states by area. A hidden SVG renders state polygons, which are then captured via html2canvas and analyzed with Canvas `getImageData` to compute each state’s pixel area before and after the transition. The visible map uses d3.voronoi and d3.geoAlbersUsa, with d3 transitions morphing polygon points and updating a sorted list of area differences. Color scale reflects proportional area changes.

Aalexmacy
85% match
Loading thumbnail…

Triangulation morphing #2

This animation morphs between U.S. state polygons using triangulation, cycling through all 48 contiguous states in a continuous sequence. It starts by showing a single state, then gradually subdivides it into many smaller polygons before merging them into the next state. The process uses the earcut library to triangulate polygons and TopoJSON for topology operations, while d3’s `transition.attrTween` and `interpolateString` handle the smooth path interpolation. Each state’s fill color shifts through a cool color palette during the transition.

FFrissAnalytics
77% match
Loading thumbnail…

Country map + voronoi.find

This visualization uses a Voronoi diagram to divide a world map into regions, each centered on a country's centroid, with the polygons dynamically re-calculated to highlight the spatial relationships between countries. The map is rendered as an SVG using D3 v4, and the Voronoi overlay is generated from the centroids of the countries. The original country shapes are filled in white with black strokes, while the Voronoi cells are drawn as semi-transparent overlays, and the graticule adds a subtle geographic grid. The animation likely involves transitioning between the original country boundaries and the Voronoi cells, or animating the centroids themselves.

PPhilippe Rivière
76% match
Loading thumbnail…

Voronoï playground: animating the addition/removing of data on a Voronoï map

This example animates transitions between two Voronoï maps, handling both data that persists and data that appears or disappears. Blue cells morph smoothly, while red cells shrink away and green cells grow in. The d3-voronoi-map-tween plugin interpolates site positions and weights, then recomputes each intermediate tessellation with d3-weighted-voronoi. Controls adjust the interpolation slider, toggle overall size or shape changes (using flubber), and display internal site radii.

KKcnarf
75% match
Loading thumbnail…

Untitled

This interactive map of the United States uses a D3.js geographic projection to display state boundaries, rendered as SVG paths from TopoJSON data. Clicking a state zooms in via a smooth `transition` that adjusts the group’s scale and translate attributes, while the clicked state is highlighted in orange. A click on the background resets the view, returning the map to its original scale and stroke width. The example relies on `d3.geo.albersUsa`, `d3.geo.path`, and TopoJSON’s `feature` and `mesh` methods.

CChase Hall
75% match
Loading thumbnail…

Projet_DV

A choropleth map of the United States displays state boundaries and allows users to click any state to zoom and center the projection on it. The visualization is built with D3.js version 3, using `d3.geo.albersUsa` for the map projection and `d3.geo.path` to render the geographic features from a TopoJSON dataset. Clicking a state triggers a smooth animated transition via `g.transition()` with a 750ms duration, scaling and translating the entire group of paths to focus on the selected state, while clicking the background resets the view. The interaction uses D3's selection and classing methods to highlight the active state in orange.

SSebDelSab
75% match
Loading thumbnail…

US State Map

This interactive map of the United States uses D3 v3 to render state boundaries as SVG paths from the included `uStates.js` data file. Each state is colored according to randomly generated sample statistics—low, average, and high values—using an interpolated color scale from light yellow to dark red. Hovering over a state triggers a CSS-based tooltip that displays the state's name and its low, average, and high values in a styled HTML table. The map animates state fills on hover with a subtle opacity change, while the tooltip follows the cursor, providing a clean and informative way to explore the data.

CCoola85
74% match