Stacked-to-Multiples

100%

Stacked-to-Multiples

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Jan 31, 2013

Four quarterly data series toggle between small multiples and a stacked chart. The animation smoothly shifts the group labels and rectangular bars vertically via `d3.transition()`. The example loads a TSV file with `d3.tsv()`, nests rows by group with `d3.nest()`, and stacks values with `d3.layout.stack()`, while ordinal scales and `d3.svg.axis()` render the SVG output.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

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

82% 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

82% 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

80% match

Loading thumbnail…

TP3

This example shows a stacked bar chart of average monthly stock prices for four companies over eleven years, with a click interaction that toggles between stacked and grouped modes. The bars animate smoothly between the two layouts using chained `transition` calls. It uses D3 v4’s `d3.nest()` to aggregate the CSV data, `d3.stack()` for stacking, and `d3.scaleBand`/`d3.scaleLinear` for positioning. The SVG rectangles transition their `x`, `y`, `width`, and `height` attributes over time.

AAlxClt

80% match

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

79% match

Loading thumbnail…

transition grouped <-> stacked

CCtuauden

79% 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

78% match

Loading thumbnail…

Stacked bar chart v4 - TP3

This example shows a stacked bar chart with five series of ten random values each, rendered as vertically stacked color-coded bar segments. The chart uses D3 v4 APIs including `d3.scaleLinear`, `d3.scaleBand`, `d3.scaleOrdinal`, and `d3.stack` to map data to positions and heights, with SVG rectangles for each segment. The bars are colored via an ordinal palette, and the x-axis is a band scale with a small padding, while the y-axis domain is set to the sample count.

AAlxClt

78% match