Skip to main content
SimilarExport ZIP
100%

transition grouped <-> stacked

✓ Published0🌍 Public
CCtuauden
Last edited Feb 1, 2018
Created on Feb 1, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

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

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

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

Stacked bar chart v4

This stacked bar chart shows ten samples across five series, with each series rendered as a color-coded segment. The visualization begins as a standard stacked bar layout, then animates the rectangles into a grouped arrangement, shifting the bars horizontally and adjusting their heights. Built with D3 v4, the code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack` to compute the stacked values and transitions. The SVG output is animated using the `d3-transition` library, with random data generated on the fly. The chart highlights how the same data can be represented in both stacked and grouped forms.

MMathReynaud
87% match
Loading thumbnail…

Grouped bar chart with transition

This grouped bar chart displays five series of ten random values each, with bars colored by series and positioned along a shared categorical axis. The chart animates its initial appearance as each bar’s height transitions smoothly from zero to its data value, staggered by index. Built with D3 v4, it uses `d3.scaleBand` for both group and inner-bar positioning, `d3.scaleLinear` for the y-axis, and an SVG `transition` on the `height` attribute to drive the animation. The data are generated procedurally via `Math.random` and rendered as SVG rectangles.

RRenonDis
86% match
Loading thumbnail…

Grouped to stacked bar chart (random function)

The chart shows five series of ten random values that transition between grouped and stacked bar layouts. Users toggle the view using radio buttons, and the animation triggers automatically after two seconds. D3 v4’s `d3.stack` computes cumulative values for the stacked state, while `d3.scaleBand` and `d3.scaleLinear` position bars. The `transition` API animates bar positions, heights, and widths smoothly. Random, smoothly-varying data is generated by a custom `bumps` function, and the chart renders as SVG with an ordinal color scale.

MMariamArabi
85% match
Loading thumbnail…

Transition Stacked Bar - Grouped Bar

This example shows a transition between a stacked bar chart and a grouped bar chart for monthly stock price data from Microsoft, Amazon, and IBM. Clicking the visualization triggers an animated morphing of the bars, where the stacked representation reorganizes into side-by-side groups per time period. The code employs D3 v4 APIs including `d3.transition`, `d3.scaleBand`, and `d3.scaleLinear`, with SVG rects animated via the `transition` method. It uses the `d3.nest` and `d3.mean` functions to aggregate the data from a CSV file.

AArnaudBru
84% match
Loading thumbnail…

D3.js: Animating Stacked-to-Grouped Bars

This example demonstrates an interactive bar chart that smoothly transitions between stacked and grouped layouts, with a single click on the chart toggling between the two modes. It uses D3.js v3 to render the chart as an SVG, animating the bars' positions and sizes via `transition` and custom attribute tweens. The data is generated in-browser with a `bumpLayer` function, and hovering a bar shows a tooltip listing the three series values using Underscore.js templates and jQuery for DOM manipulation. A legend with clickable series boxes lets viewers enable or disable individual series, updating the chart and the number of enabled series accordingly.

EEfratVil
84% match