Stacked-to-Grouped d3 v4

100%

Stacked-to-Grouped d3 v4

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

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.

AI-generated description

responsive
tooltip
ajax to fetch data

modified from http://blockbuilder.org/mbostock/3943967

forked from <a href='http://bl.ocks.org/Mbrownshoes/'>Mbrownshoes</a>'s block: <a href='http://bl.ocks.org/Mbrownshoes/efde5651cceccd8e67a7f19326d0b0a4'>Stacked-to-Grouped d3 v4</a>

mit Licensed

Similar vizzes

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

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

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, 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

87% match

Loading thumbnail…

D3.js: Animating Stacked-to-Grouped Bars

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.

TTheShetland

86% match

Loading thumbnail…

Stacked-to-Grouped | JSON Data, Horizontal Bars

This example shows a horizontal bar chart that toggles between stacked and grouped layouts using sequenced transitions, preserving object constancy so viewers can track data across views. It loads JSON data with an inline numeric key per entry, then uses d3.stack and d3.scaleBand to position bars. Radio buttons trigger transitionGrouped and transitionStacked, which animate bar positions and sizes via chained transition calls. The chart uses static data and SVG rendering, with a green color scale from d3.schemeCategory20c.

TThanaporn-sk

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

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

85% match