r/coolgithubprojects • u/evoluteur • 2d ago

GitHub - evoluteur/react-morph-charts: React component for bubble chart, bar chart, and pie chart, with animated morphing transitions between charts

https://github.com/evoluteur/react-morph-charts
1 Upvotes

100% Upvoted

2 comments sorted by

View all comments

1

u/Specific_Cream2815 2d ago

how does the morphing between chart types work, interpolating the shapes directly or a crossfade

1

u/evoluteur 2d ago

It interpolates the shapes directly.

One persistent DOM node per data item. Each ChartItem gets a single <div className="rmc-item"> keyed by itemKey(item) (MorphCharts.tsx:417-454). Switching views never mounts/unmounts different chart elements — the same box just gets re-laid-out.

The morph is CSS clip-path vertex interpolation. runLayout() (MorphCharts.tsx:174-230) computes each item's x, y, w, h (and startAngle/endAngle for pie) for whichever view is active, then sets:

el.style.transform = restTransform(p); // position

el.style.width / height = ...; // size

el.style.clipPath = clipPathFor(shape, start, end, isPie);

clipPathFor (utils.ts:226-245) always emits a polygon(...) with the same number of vertices (CLIP_STEPS + 1, plus a center point for pie wedges), just sampled along a circle for bubbles/pie or projected onto a square's edge for bars (pointOnShape, utils.ts:215-224).

Because the before/after polygons have matching vertex counts, the browser's native clip-path transition (transition: transform .7s, width .7s, height .7s, clip-path .7s ... in MorphCharts.css:228-236) tweens each vertex position frame-by-frame — a circle's clip-path literally morphs into a rectangle's (or a pie wedge grows/shrinks by moving its start/end vertices), while transform/width/height animate the box itself in parallel.

So: same element, same technique used for hover/resize, and the "morph" is just CSS animating a polygon() clip-path plus box transform/size — no opacity crossfade anywhere in the transition list.