Skip to main content
100%

United States of Voronoi Tweening w/ borders

✓ Published0🌍 Public
Aalexmacy
Last edited Sep 12, 2016
Created on Aug 28, 2016

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.

AI-generated description

I've been wanting a way to show the original state borders after the transition, so I created another layer that appears when transitioning to the voronoi shapes. There's a bit of a bug with how some of these borders are not appearing - like where "New Wyoming" is above part of old Nebraska.

This seems to be related to the order that the states are rendered...

from <a href='http://bl.ocks.org/micahstubbs/'>micahstubbs</a>'s version of <a href='http://bl.ocks.org/micahstubbs/275b480d6e9c860c0d0f15a9accc57ca'>United States of Voronoi Tweening</a>:

a small iteration on @alexmacy's United States of Voronoi Tweening that transitions the colors of the pologons, polygon borders, and state-capitol points

playing with ways to highlight the differences between the geographic shape and the Voronoi shape of each US state

Original README.md

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

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.

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

Smoother polygon transitions

A state morphs into the next in an animated sequence, with the polygon smoothly transitioning between shapes while yellow and magenta dots mark corresponding vertices. The code uses D3.js and TopoJSON to load U.S. state boundaries, then adds evenly spaced points to equalize vertex counts and finds the optimal winding by minimizing squared distances between point pairs. SVG and D3 transitions animate both the path and circles as states cycle through a shuffled order.

FFrissAnalytics
76% match
Loading thumbnail…

Merging States II

A variation on merging polygons, this example displays a map of the United States where a selected set of states is highlighted in orange. The visualization uses a careful rendering technique rather than topological manipulation to draw the highlighted states, layering a boundary path over the state fill. It employs D3 v3's `d3.geo` and `d3.json` to load US state geometries, along with the TopoJSON library to compute state boundaries and meshes. The rendering is dynamic, with the selected states' boundaries outlined in black to clearly distinguish the merged region.

Mmbostock
74% match
Loading thumbnail…

Contigious States of US

This visualization uses an adjacency matrix to display the contiguity of the 48 contiguous US states (plus Washington, D.C.). Each cell in the matrix is colored to indicate whether two states share a border (dark) or are connected via a path of length two (lighter), with state ordering toggleable alphabetically or by neighbor count using D3's ordinal scale. Built with D3 v3, it renders as an SVG with mouseover highlighting of rows and columns, and includes interactive controls to reorder rows and columns and to toggle display of two-hop connections.

CChristosT
73% 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
73% 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
73% match