Animation & Motion Trails

D3plus animates changes for you. When a chart’s data or configuration updates — including when a timeline advances — shapes tween smoothly between states rather than snapping. This page covers the animation controls and motion trails.

Transition duration

Every visualization eases between renders over a configurable duration (milliseconds). Set it to 0 to disable animation:

<BarChart config={{data, groupBy: "region", x: "quarter", y: "revenue", duration: 600}} />

Text animates too: a label whose font-size changes between renders grows or shrinks into place instead of jumping.

Entering marks

New marks grow into place rather than popping in: bars rise from their baseline, circles grow from their center, areas spread out of a flat line, and Pie wedges sweep open. Some charts give their marks an entrance of their own:

• Stacked bars (a stacked BarChart, stacked Histogram series, Pyramid sub-groups, Marimekko) grow one segment at a time on the first draw: the bottom segments of every stack grow together, then the next level up, and so on, within the one duration. Diverging stacks count outward from zero on each side.
• Bullet measures and forecasts grow along the track from the bullet’s baseline.
• Violin and Ridgeline shapes grow out of the line they’re drawn from: a violin’s center line, or a ridge’s baseline.
• Icicle rectangles grow out of their parent’s edge, one level at a time from the root outward.

Stacked bars stagger only on the first draw: later updates, such as new data or a timeline step, animate them over the whole transition. When building on @d3plus/render directly, a scene node’s enterWindow ({start, end}, shares of the transition from 0 to 1) delays its entrance to that slice of the transition, which is how these staggered entrances are timed.

Motion trails

When a mark moves between timeline frames (press play, or step the timeline), it sweeps a motion trail — a tapering cone from its previous position to the current one, colored with the mark’s own color and fading to transparent at the tail. Trails make the direction and speed of movement legible, Hans Rosling-style.

Trails are on by default for scatter/bubble points and Geomap coordinate points, and they work identically on the SVG and Canvas backends.

<Plot config={{
  data,                    // rows with a group id, a time field, and x/y
  groupBy: "id",
  time: "year",
  x: "x", y: "y",
  size: "value"
  // shapeConfig.Circle.trail is true by default
}} />

• Circle and Rect marks both trail. A square’s cone is sized to its silhouette perpendicular to travel, so a diagonal move reaches corner-to-corner rather than edge-to-edge.
• Opt out per chart with shapeConfig.Circle.trail: false (or Rect.trail).

See the Timeline Motion Trails, Square Motion Trails, and Persistent Motion Trails examples on the Plot page, and the point-trail example on the Geomap page.

Persistent trails

By default a trail shows only the current move and fades on arrival. shapeConfig.Circle.trailPersist keeps past moves visible too:

<Plot config={{
  data, groupBy: "id", time: "year", x: "x", y: "y",
  shapeConfig: {Circle: {trailPersist: true}}
}} />

• A number keeps that many step-segments; true keeps a long, slowly fading snail-trail.
• Trails follow the timeline’s direction — they grow forward and rewind (newest segment first) when you step back — and a multi-period jump traces through the skipped periods rather than cutting a straight line.
• The whole trail draws as a single shape, so overlapping turns don’t darken.

Setting trailPersist is all you need: it automatically switches the chart to a single-period timeline (brushing: false) and fixed axes (axisPersist: true) — the two conditions a persistent trail needs to stay coherent.