Skip to main content
SimilarExport ZIP
100%

Triangulation morphing #2

✓ Published0🌍 Public
FFrissAnalytics
Last edited Oct 1, 2018
Created on May 22, 2017

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.

AI-generated description

Tweening between one and many polygons with an approach that's faster and more robust than this Voronoi jigsaw attempt.

This approach uses earcut and some artisanal TopoJSON to triangulate the polygon and successively merge the triangles into the desired number of pieces, and then adds/rewinds points for smoother transitions (see this demo for a better look at what's happening behind the scenes).

See also: Triangulation morphing, Jigsaw morphing, Smoother polygon transitions

forked from <a href='http://bl.ocks.org/veltman/'>veltman</a>'s block: <a href='http://bl.ocks.org/veltman/14b65b88156d4f5772c285ee7d78403b'>Triangulation morphing #2</a>

mit Licensed

Similar vizzes

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
84% 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
77% 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
76% 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
74% match
Loading thumbnail…

Merging Counties

This example demonstrates merging county boundaries into state boundaries using the TopoJSON 1.6 merge functionality. It visualizes the United States by first displaying a static land mass, then animating the sequential drawing of each state’s borders derived from its constituent counties. The animation uses SVG paths with stroke-dasharray transitions, progressively revealing each state’s outline before fading it out. The code employs `d3.geo.path`, `d3.geo.albersUsa`, `topojson.merge`, and `topojson.mesh` to compute and render the geographic features.

Mmbostock
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
72% 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
72% match
Loading thumbnail…

Hex Map

This animated visualization presents a hexagon-based map of the contiguous United States, with each state rendered as a cluster of individual hexagons. The TopoJSON data (Hex1000Topo.json) contains a grid of 1,000 hexagons, and D3.js v3 projects and renders these as SVG polygons. On load, the hexagons assemble into place with an animation, building the map from a central point outward. Each hexagon is color-coded to represent the state it belongs to, creating a mosaic-like representation of U.S. state boundaries. The hover interaction could be used to reveal additional information, though the core visualization emphasizes the hexagonal tiling of geographic regions through smooth, animated transitions.

BBrideau
72% match