Stacked-to-Multiples

100%

Stacked-to-Multiples

✓ Published0🌍 Public

Last edited Jun 14, 2018

Created on Jun 14, 2018

This example shows quarterly data for four groups, toggling between a small-multiples view and a stacked chart. A radio button switches the layout, animating the groups and rectangles with a 750ms transition. The visualization uses D3 v3 with `d3.layout.stack` for stacking, ordinal scales for positioning, and nested data from a TSV file. Each group’s label and rectangles reposition smoothly, highlighting how stacked totals compare to individual group trends.

AI-generated description

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4679202'>Stacked-to-Multiples</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Stacked-to-Multiples

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.

Mmbostock

90% match

Loading thumbnail…

Stacked-to-Multiples (improved)

This interactive visualization compares quarterly data across four groups, toggling between small-multiples and stacked layouts. Each group’s time series bars show raw values, with white text labels inside each bar indicating the group’s contribution per quarter, while the code accumulates these contributions into an array to reveal quarter totals. Using d3.v3, the example employs d3.layout.stack, ordinal and linear scales, d3.svg.axis, and transition.attrTween for smooth animated shifts between views. Data loads from a TSV file with date and value fields, rendered as SVG rectangles and text.

RRoxIv

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

83% match

Loading thumbnail…

Stacked-to-Grouped | JSON Data, Horizontal Bars

This example shows horizontal bars transitioning between stacked and grouped layouts using sequenced animations. The visualization reads static JSON data containing five series with three numeric values each, and users can toggle between the two view modes via custom radio buttons. Built with D3 v4, the code uses `d3.stack` to prepare the data, `d3.scaleLinear` and `d3.scaleBand` for positioning, and applies animated transitions via the `transition` API to preserve object constancy, allowing viewers to track individual bars across the layout change. The SVG rendering includes a left axis and color-coded series, with the interaction and animation design inspired by Heer and Robertson's work on animated transitions.

NNikhilkuyya

82% match

Loading thumbnail…

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`.

TThanaporn-sk

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

81% match

Loading thumbnail…

Stacked-to-Grouped d3 v4

This example presents a bar chart that can switch between stacked and grouped layouts using radio buttons. It visualizes foreign transaction data over time, with each bar segment representing a different value category. The chart is built with d3.v4, using `d3.stack` for the stacked series, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG elements for rendering. Animated transitions move bars between the two states. Data is loaded asynchronously via jQuery’s `$.ajax` from a BC government open-data API, with a custom tooltip showing segment values on hover.

TThanaporn-sk

81% match

Loading thumbnail…

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.

TThanaporn-sk

81% match