Simple Stack

100%

✓ Published0🌍 Public

Last edited Jun 16, 2012

Created on Jun 16, 2012

This stacked bar chart displays five categories with three series each, using a simple matrix as its data source. The code relies on d3.layout.stack() to transform the raw matrix into stacked values, then renders rectangles via d3.scale.ordinal for x-positions, d3.scale.linear for heights, and a color scale for series. Console logs expose the matrix-to-stack transformation process, while SVG groups and rects are positioned with negative y-coordinates to build the upward stack from a baseline.

AI-generated description

Starting from Mike's sample (https://gist.github.com/1134768) I stripped down the chart to the bare minimum to understand the physics. I use a matrix instead of a csv or json. With the console.log outputs you can look at the transformation of the matrix when fed into the stack layout.

Similar vizzes

Loading thumbnail…

Stacked bar chart v4

This stacked bar chart visualizes five series across ten samples, with each bar segment colored by series using an ordinal scale. The chart uses D3 v4 with an SVG rendering, positioning bars via a band scale for the x-axis and a linear scale for the y-axis. It builds the stacks with `d3.stack()` and draws rectangles for each segment, using randomly generated data from `d3.range` and `Math.random`.

Aalexandrospopov

83% match

Loading thumbnail…

Diverging StackedBar Chart

This example shows a diverging stacked bar chart built with D3 v3, displaying five labeled categories with numeric values. The chart renders as vertical bars with a color scale mapping each category to a distinct color from a predefined palette. It includes axes with a rotated y-axis label and a tooltip that appears on mouseover to show the category label and value. The code uses `d3.svg.axis`, `d3.scale.ordinal`, and `d3.scale.linear` to construct the visualization, with SVG rectangles for the bars and HTML divs for the tooltip. Data is hardcoded in the script, though commented-out code suggests it could also load from a CSV file.

Aabrown004

81% match

Loading thumbnail…

Stacked bars

Stacked bars shows four horizontal bars sorted in descending order, each with a cumulative value label at its right edge. The example uses d3.scale.linear for the x-axis range, d3.scale.ordinal with a custom color range for the bars, and d3.selectAll to bind the data array to SVG groups. The code draws rectangles with varying widths based on the data, while text elements display a running total that accumulates as the bars are processed. The data is hardcoded as an array, and the visualization is rendered in SVG with a gray background and black border.

AAlexDaGr8

80% match

Loading thumbnail…

D3 Layouts - Stacked bar chart

This example shows a stacked bar chart built with D3.js, using the `d3.stack` API to arrange three categories—apples, oranges, and grapes—into cumulative segments for five data groups. The visualization renders directly to an SVG element, with each stacked segment colored via `d3.scaleOrdinal` and the `d3.schemeCategory10` palette. A band scale positions the bars horizontally, while a linear scale maps the cumulative totals to the chart’s height, with the stacking order sorted descending. The input dataset is a hardcoded array of objects.

KKaustav Sen

80% match

Loading thumbnail…

Stacked bar chart v4

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.

MMathReynaud

80% match

Loading thumbnail…

D3: Stack layout stacked bar chart

This stacked bar chart uses D3’s `d3.stack` layout to divide five categories into layered segments for apples, oranges, and grapes. Each series is rendered as SVG `rect` elements within grouped `<g>` elements, with `d3.scaleBand` positioning bars along the x-axis and `d3.scaleLinear` mapping cumulative values to heights. Colors come from `d3.schemeCategory10`, and the chart reads the static dataset directly from the script.

DDebaliena

80% match

Loading thumbnail…

Stacked Bar Chart Example

This example shows a stacked bar chart comparing three value series across three categories, with each bar segment stacked vertically and colored blue, green, or orange. The chart renders as an SVG using React and D3 v6, drawing rectangles positioned via a band scale for categories and a linear scale for cumulative sums. The code calls `d3.stack()` with keys for value1, value2, and value3, and appends axes with `d3.axisBottom` and `d3.axisLeft`. The dataset is hardcoded in the script.

BBhavanaGIrni

79% match

Loading thumbnail…

barStack

The example shows three series of stacked bars, with each series split into positive and negative segments, and toggles between horizontal and vertical orientations. Using D3 v2, the `barStack` function computes cumulative offsets (`y0`) and absolute sizes for each bar, while ordinal and linear scales map data to screen positions. Animated transitions, triggered by a button click, reposition the bars and axes, and the SVG rendering updates smoothly via `transition().duration()`.

ZZJONSSON

79% match