Skip to main content
100%

Custom Shape Tweening

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

This example demonstrates smooth transitions between custom polygons in D3 v4, addressing limitations in Mike Bostock’s original shape tweening approach. The visualization morphs between a California-shaped polygon and other custom polygons by aligning starting points, matching point counts, and ensuring consistent orientation. Using `d3.polygonArea()` to verify winding direction and a hidden SVG path to proportionally resample points, it produces clean, predictable shape transformations. The animation is rendered in SVG, with each shape transitioning seamlessly to the next in an animated loop.

AI-generated description

This is an attempt at finding a way to make cleaner transitions between polygons. <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3081153'>Shape Tweening</a> works excellently for morphing a shape into a circle, but not for morphing into smoething like a polygon. I was looking for a way to do something much like his other block: <a href='http://bl.ocks.org/mbostock/1020902'>Superformula Tweening</a>, but with the ability to pass coordinates for the new shape instead of control points for the superformula to make sense of.

The three biggest challenges were:

  • The first points along the path need to be in the same general area - like if all the shapes started with their point closest to the upper left.
  • Both the incomming shape and the outgoing shape must have the same number of points or else you get unexpected results and it doesn't transition smoothly.
  • Both shapes need to have the same orientation (clockwise/negative vs. counterclockwise/positive), otherwise they seem to flip when transitioning.

Finding the starting points for each path was simply done by looping through the incomming shape's points to find the closest point to the start of the outgoing shape's path. Then it's just a matter of changing the order of the incomming shape's points.

For matching the number of points, I created a linear scale using the length of the outgoing shape and plotted the necessary points along the incomming shape's path proportionally to where they were along the outgoing shape's path. This required using a hidden path element '#hiddenShape' in order to be able to compare the two before rendering the new shape. Most of this is done within the converPath() function.

And matching the orientation of the shape's points was done by using d3.polygonArea(). This tells you the orientation by being either positive or negative, so some logic at the end of convertPath() decides if it should return the array as-is, or reversed.

gpl-3.0 Licensed

Similar vizzes

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
82% 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
80% 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
76% match
Loading thumbnail…

Rotating Shape Transitions

A polygon rotates continuously on a turntable-style backdrop, cycling through a sequence of geometric shapes while colored dots and connecting lines trace the path of each vertex between shapes. A vertical slider controls the rotation speed, displayed as revolutions per minute, with the shape pausing when the slider is set to zero. The animation relies on the custom d3-shape-tween library to interpolate between polygons of different vertex counts, adding points along edges as needed, and draws blue "wire" lines from old vertices to new ones to clarify the transition.

Aalexmacy
76% 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…

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

My Custom Shapes

This example demonstrates how to render custom geometric shapes—squares and triangles—in an SVG scene using D3.js v4. It defines a `shapeDefs` object with functions that construct SVG path strings via the `d3.path` API, and then uses a data join to draw the shapes. The code showcases the enter, update, and exit pattern by first rendering a dataset of three nodes, then re-rendering with a second dataset, which removes the red square. Each shape’s position and color are stored as data properties and applied through `transform` and `fill` attributes.

RRobertDelgado
74% match
Loading thumbnail…

D3 Transitions - Custom Tweens

The example showcases circular transitions of data-driven points using D3.js, contrasting a default linear interpolation with a custom tween that animates along the shortest angular path. Two SVG canvases display circles that jump between random angles on a fixed radius. The left pane uses standard `transition().attr` calls, while the right pane employs a custom `transition().tween()` with D3's `interpolate` to handle angle wrapping and ensure smooth, direct movement across the circumference. The code updates the data on button click, demonstrating the API's flexibility for controlling animation behavior.

SSubhendu Karmakar
71% match