Stacked-to-Grouped d3 v4

100%

Stacked-to-Grouped d3 v4

✓ Published0🌍 Public

Last edited Dec 10, 2016

Created on Dec 9, 2016

This interactive chart visualizes foreign investment data from the Government of British Columbia’s data catalogue, displaying the number of transactions across three categories over time. Users can toggle between stacked and grouped bar chart layouts via radio buttons, with each bar segment representing a different investment column. The visualization uses d3.v4’s scaleBand, scaleLinear, and stack functions for positioning and aggregation, while the data is fetched asynchronously via ajax from the catalogue’s API. SVG rectangles animate their height and y-position when switching modes, and a tooltip, built with d3.select, shows the precise value on mouseover.

AI-generated description

responsive
tooltip
ajax to fetch data

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

mit Licensed

Similar vizzes

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

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

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

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

74% match

Loading thumbnail…

Stacked-to-Multiples

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.

AAjayyy

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

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

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

73% match