Stack-to-split-Stack Transition

Stacked-to-Grouped Bars

This example demonstrates an interactive transition between stacked and grouped bar charts, using sequenced animations to preserve object constancy as the data morphs between the two views. A radio button form toggles the mode, while D3 v4 APIs like `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack` handle the layout and stacking. The transitions use `rect.transition()` with staggered delays and duration to smoothly animate each rectangle’s x-position, width, y-position, and height. The visualization renders with SVG, inspired by Heer and Robertson’s animated transition techniques.

MMorganhaoyu

88% match

Stacked-to-Grouped Bars

This example demonstrates an animated transition between stacked and grouped bar charts, with synchronized changes in position and size that preserve the identity of each bar segment. The visualization uses four series of fifty-eight pseudo-random values generated by a custom `bumps` function. The stacked layout defaults to view, and a radio button or an automatic timer switches to the grouped layout. The code leverages D3 v4 APIs including `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and sequenced transitions via `transition()` calls, rendering as SVG.

Mmbostock

transition grouped <-> stacked

This example demonstrates the animated transition between stacked and grouped bar charts. Ten random samples are displayed as five series, with the chart type toggling on a click. The visualization uses D3 v4’s `scaleBand` for categorical axes and `scaleLinear` for the y-axis. During transitions, `transition()` with duration and delay functions animates the bars’ positions and heights, reshaping the layout smoothly while maintaining the same underlying data.

CCtuauden

transition grouped <-> stacked

CCtuauden

Stacked-to-Grouped Bars III

This interactive bar chart demonstrates a hybrid approach to visualizing stacked data, allowing users to switch between stacked, grouped, and percentage modes via radio buttons. In grouped mode, hovering over a layer highlights it and vertically re-aligns its bars so the baseline is zero, with the y-axis updating accordingly. The visualization uses D3 v4 with `d3.stack`, `d3.scaleBand`, and `d3.axisLeft`, rendering animated SVG rects with `transition` delays. It relies on synthetic data from a bump function and includes an automated initial transition cycling through the modes.

Stacked-to-Grouped | JSON Data, Horizontal Bars, String Series Names

This example demonstrates a transition between stacked and grouped horizontal bar charts using JSON data with string series names. Users switch views via custom radio buttons, with animations that preserve object constancy through sequenced transitions. The visualization uses D3 v4 with d3.stack, d3.scaleBand, and d3.scaleLinear to compute layouts, and applies chained transition.attr calls to animate bar positions and dimensions. Data loads from a local JSON file via d3-queue, and the styled radio buttons come from custom CSS.

Stacked-to-Grouped | JSON Data, Horizontal Bars, String Series Names

This example demonstrates a horizontal bar chart that toggles between stacked and grouped layouts using animated transitions. The visualization loads JSON data with string series names and renders bars with D3 v4, using SVG and custom radio buttons for user interaction. The animation preserves object constancy through sequenced transitions, first adjusting bar heights then widths, based on the design principles of Heer and Robertson. The code implements the D3 stack function, scaleBand, scaleLinear, and transition methods to smoothly morph between the two representations.

84% match

Stacked-to-Grouped | JSON Data, Vertical Bars

This example shows vertical bars that switch between stacked and grouped layouts. Visitors can toggle the view using custom radio buttons, with a sequenced transition animating the bars while preserving object constancy. The visualization loads JSON data via `d3.json` and renders SVG elements using d3.v4. It applies `d3.stack()` for the stacked view, `d3.scaleBand` and `d3.scaleLinear` for positioning, and `transition` methods with staggered delays to animate between states. The color scale uses `d3.schemeCategory20c`.