Skip to main content
SimilarExport ZIP
100%

Stacked bar chart v4

✓ Published0🌍 Public
MMathReynaud
Last edited Jan 26, 2018
Created on Jan 26, 2018

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/8aea86fddcf01380eb96a341509f394f'>Stacked bar chart v4</a>

mit Licensed

Similar vizzes

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
90% match
Loading thumbnail…

Grouped bar chart v4

This grouped bar chart visualizes ten samples across five series, with random data generated directly in the code using `d3.range` and `Math.random`. Rendered as an SVG, the chart uses `d3.scaleBand` for both the outer and inner axes, while a `d3.scaleOrdinal` maps a categorical color palette to the series. The animation is achieved through a chained `transition()` call with staggered `delay()` on the rectangles, which grow from the bottom to their final heights. The chart leverages the d3.v4 library and follows the classic grouped bar layout adapted from a bl.ocks example.

RRenonDis
88% 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
87% 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
87% 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
87% match
Loading thumbnail…

Grouped bar chart v4

This grouped bar chart displays five series of ten random samples each, using color to distinguish the series and vertical bars to represent values. Built with D3 v4, it renders as SVG and uses `d3.scaleBand` for the categorical axes, `d3.scaleLinear` for the value axis, and `d3.scaleOrdinal` for color mapping, with data generated in JavaScript via `Math.random`.

BBaptisteL54
86% 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
86% 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
85% match