Skip to main content
SimilarExport ZIP
100%

Shape Tweening

✓ Published0🌍 Public
FFrissAnalytics
Last edited Sep 3, 2018
Created on Apr 25, 2017

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.

AI-generated description

See also the linear path tweening example.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3081153'>Shape Tweening</a>

gpl-3.0 Licensed

Similar vizzes

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

Path Tween

This example demonstrates smooth path interpolation between two SVG shapes defined by cubic Bézier curves. A black path morphs between two distinct configurations over a two-second animated loop, using SVG’s getPointAtLength and getTotalLength methods to uniformly sample points at four-pixel intervals. The transition replaces the original curve with a polyline for interpolation via d3.interpolate, then restores the Bézier path upon completion. The animation runs in d3 v4 with transition.attrTween, alternating between the two path definitions indefinitely.

Mmbostock
71% match
Loading thumbnail…

Untitled

This example animates the morphing of one SVG path into another using D3’s `transition.attrTween` and a custom path interpolation function. The path alternates between two cubic Bézier shapes in an infinite loop, with each transition lasting two seconds and using uniform distance sampling for smooth point-by-point interpolation. The code references `d3.select`, `d3.active`, and `getTotalLength`, while importing D3 v6 from a CDN. The included `province.csv` file contains COVID-19 statistics for Chinese provinces, though it is not loaded or visualized in the rendered output.

Vvivianaaai@qq.com
71% match
Loading thumbnail…

Path Tween

This example shows a smooth animated transition between two SVG path shapes, alternating back and forth indefinitely. The code samples both the source and target paths uniformly using the SVG `getPointAtLength` method, then interpolates the corresponding points to create a piecewise linear curve during the transition. After each cycle, the path is restored to its original cubic Bézier form. The animation uses D3 v4’s `transition.attrTween` and `d3.easeLinear` easing, with a precision of 4 pixels for sampling.

GGerardoFurtado
71% match
Loading thumbnail…

Fork of Circles

This example demonstrates mapping U.S. states from TopoJSON data, coloring California red and other states blue. It uses `d3.json` to fetch the data, `topojson.feature` to convert it to GeoJSON, and `d3.geoPath` to render the shapes as SVG paths. The code also includes ES6 module imports from local files and from D3, and appends SVG title elements with click handlers.

Cchris.shimotake@gmail.com
70% match
Loading thumbnail…

d3js workshop - circles

Three circles are rendered in an SVG, with a red fill and a staggered transition that delays each circle’s color change and radius increase by one second per circle. The example demonstrates D3’s data join, binding an array of numbers to circle positions, and uses `transition().delay()` and `transition().duration()` to animate style and attribute changes over two seconds. The code explicitly appends an SVG element, selects circles via `d3.select`, and applies transitions to fill, radius, and vertical position, showing basic animation and data-driven updates with D3 v3.

AAlbertFranco
69% match