D3.js: Animating Stacked-to-Grouped Bars

100%

D3.js: Animating Stacked-to-Grouped Bars

✓ Published0🌍 Public

Last edited Jul 13, 2018

Created on Jul 13, 2018

This example demonstrates the transition between stacked and grouped bar charts, allowing viewers to compare categorical data across multiple series. The visualization uses D3.js v3 and jQuery to animate the transformation, with radio button controls to toggle between the two modes, while a tooltip displays precise values for each bar segment on hover. The data is generated procedurally using a bump layer function, and the chart leverages D3's layout stack API to compute the stacked positions before animating the rect elements to their grouped coordinates.

AI-generated description

forked from <a href='http://bl.ocks.org/guilhermesimoes/'>guilhermesimoes</a>'s block: <a href='http://bl.ocks.org/guilhermesimoes/8913c15adf7dd2cab53a'>D3.js: Animating Stacked-to-Grouped Bars</a>

mit Licensed

Similar vizzes

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

93% match

Loading thumbnail…

D3.js: Animating Stacked-to-Grouped Bars

This example demonstrates interactive stacked bar charts that can transition into grouped bar charts, allowing users to switch between the two modes via radio buttons. The visualization uses D3.js v3 and Underscore.js templates to render SVG elements, with jQuery managing the tooltip display and control interactions. Each bar segment is clickable and animates between stacked and grouped arrangements using D3’s transition system, while the chart’s series (Yes, No, Maybe) are color-coded and can be toggled to highlight specific data layers.

TThanaporn-sk

93% 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 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.

TThanaporn-sk

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

88% match

Loading thumbnail…

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.

TThanaporn-sk

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

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

87% match