Smoother polygon transitions

100%

Smoother polygon transitions

✓ Published0🌍 Public

Last edited Sep 25, 2018

Created on Sep 25, 2018

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.

AI-generated description

Smooth transitioning US tour in the same vein as this example. Steps:

Compares both shapes and adds evenly-spaced points to whichever polygon has fewer so that both have the same number of points
Picks the winding of the first polygon that minimizes the sum of the squared distances between point pairs

Some possible improvements:

Adding additional points to both shapes first such that every segment longer than a certain distance is bisected
Tweaking the placement of added points with simulated annealing
Using a cost function that factors in self-intersections at the halfway mark in addition to distance traveled
Try reversing the order of points too

States are preprojected to appropriate State Plane projections and don't include islands or multipart states (AK, HI, MI).

Similar vizzes

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

84% match

Loading thumbnail…

Shape Tweening

A D3.js shape-tweening animation morphs the outline of California into an equivalent circle and back again, repeatedly. The SVG path’s `d` attribute is updated through chained transitions, each lasting five seconds, using the projected polygon coordinates from the included GeoJSON file. The code computes a circle with matching perimeter length and area, placing the state’s border points along it via a custom `circle` function.

FFrissAnalytics

75% match

Loading thumbnail…

uncurl-state

US states sequentially uncurl into smooth, straight-line paths before re-forming as polygons. An animated SVG path traces each state's boundary, which is computed from TopoJSON data and projected with `d3.geoAlbersUsa`. The animation interpolates the angle changes between line segments toward zero, scaling and re-centering each uncurled outline to fit the viewport before transitioning to the next state.

11wheel

74% match

Loading thumbnail…

Shape Tweening

A loop animates the state of California morphing between its natural geographic shape and a circle. The tweening moves vertices along straight-line paths in a projected 2D plane, with the circle generated by redistributing points based on the polygon's perimeter distances. The code uses the d3.geo Albers projection, d3.geom.polygon for area and centroid calculations, and SVG path transitions with a 5000ms duration. The state boundary comes from the included california.json GeoJSON file.

Mmbostock

74% match

Loading thumbnail…

transition exploration -- first trials with transitions

A sequence of chained SVG transitions animates rectangles, lines, ellipses, and polygons through shifting colors, stroke widths, positions, and shapes, including skewing, translation, and corner rounding. Built with D3 v6 in a React-accessible setup, the code uses `selection.transition().duration()` to chain staggered state changes on each element. The visual explores how interpolated attributes like `fill`, `stroke`, `transform`, and `points` evolve over time, producing a choreographed, abstract composition on a blank canvas.

MModalMBS

72% match

Loading thumbnail…

Ring Extraction

This example animates the extraction of individual polygon rings from the U.S. states topology. It begins with a play button that, when clicked, hides the control and sequentially extracts each ring, drawing it in red and fading it out. The animation uses D3’s `transition`, `duration`, and `remove` methods alongside TopoJSON’s `topology` and `feature` APIs. The base map is rendered as a static SVG mesh via `d3.geo.path`, while the extracted rings are appended as separate SVG paths. The underlying data is a simplified `us.json` TopoJSON file of U.S. states.

Mmbostock

71% match

Loading thumbnail…

Ring Cutting

Clicking the play button hides the control and animates the cutting of every US state polygon into its constituent rings. The animation shows red boundary segments being separated from the remaining blue paths, with cuts processed one by one and fading out over time. The visualization uses TopoJSON state data, D3’s geo path for rendering, and SVG transitions to animate the cuts.

Mmbostock

70% match

Loading thumbnail…

click-to-zoom w. shadow & transition

Clicking a US state zooms the map to that state with a smooth transform transition, dims all other states, and applies a drop-shadow filter to highlight the selected state. Clicking the background resets the view and restores full opacity. The example renders SVG paths from TopoJSON state boundaries using `d3.geo.path` and an Albers USA projection, animating the zoom with `transition.attr`. A custom `moveToFront` selection method brings the active state to the top of the SVG stack.

PPatrick Wojda

70% match