barStack

100%

✓ Published0🌍 Public

Last edited Apr 9, 2013

Created on Jun 22, 2012

This example shows a stacked bar chart with both positive and negative values. The chart uses the D3.js library (version 2) to render SVG rectangles for each bar segment. The `barStack` function calculates the cumulative offset for each value, separating positive and negative stacks. The code uses `d3.scale.ordinal` for the x-axis, `d3.scale.linear` for the y-axis, and `d3.svg.axis` to draw the axes. The data is a hard-coded array of three series, each containing three values.

AI-generated description

Similar vizzes

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

91% match

Loading thumbnail…

Stacked Negative Values

This example shows a diverging stacked bar chart for quarterly data, with positive and negative values extending above and below a central zero axis. The chart uses four categories (apples, bananas, cherries, dates) across four quarters, with negative values for cherries and dates. It is built with D3 v4, using `d3.stack()` with the `d3.stackOffsetDiverging` offset to align positive and negative series. Bars are rendered as SVG rectangles, scaled with `d3.scaleBand` and `d3.scaleLinear`, and colored via `d3.scaleOrdinal(d3.schemeCategory10)`.

Mmbostock

85% match

Loading thumbnail…

Stacked bar chart with negative values

A stacked bar chart displays positive and negative monthly values across three series (a1, a2, a3) from a CSV file. Positive and negative stacks are computed separately with `d3.stack()`, then rendered as SVG rects using `scaleLinear` and `scaleBand`. The zero axis is drawn via `tickSizeInner(xScale(0))`, and colors come from `d3.schemeTableau10`. Bars are filtered to omit zero-sized segments, with negative values extending leftward and positive values rightward.

OOvidiu Gheorghies

85% match

Loading thumbnail…

Stacked bar chart with negative values

This stacked bar chart visualizes positive and negative values across six months from a CSV file, with each bar divided by category and color. The chart uses a diverging layout where positive segments extend rightward from a zero baseline and negative segments extend leftward, anchored by the axis. Built with D3 v5, it employs `scaleLinear`, `scaleBand`, `d3.stack`, and `axisLeft`/`axisBottom` to compute and render the SVG. The data is split into positive and negative stacked series, with zero-baseline positioning calculated from value ranges.

LLittledevil7

84% match

Loading thumbnail…

Stacked Negative Values

This example shows a diverging stacked bar chart for quarterly fruit sales, with positive values (apples and bananas) rising above the x-axis and negative values (cherries and dates) descending below it. The visualization uses d3.stack with the d3.stackOffsetDiverging offset to align the stacked segments around a zero baseline. The code renders SVG rectangles via d3.v4, using d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.schemeCategory10 for color encoding. Data is hardcoded in the script, and axes are generated with d3.axisBottom and d3.axisLeft.

TThanaporn-sk

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

Stacked Negative Values

This diverging stacked bar chart displays quarterly fruit sales (apples, bananas, cherries, dates) with positive values rising above the x-axis and negative values descending below it, using the `stackOffsetDiverging` offset to separate the two groups. Built with D3 v4, the SVG visualization uses `d3.stack` with a custom offset function, `scaleBand` for the categorical month axis, and `scaleLinear` for the numeric y-axis. Each series is colored via `d3.scaleOrdinal` with the `schemeCategory10` palette, while axes are rendered with `d3.axisBottom` and `d3.axisLeft`.

TThanaporn-sk

80% match

Loading thumbnail…

Bar Chart with Negative Values II

This example shows a horizontal bar chart where negative values extend to the left and positive values to the right, with each bar color-coded by sign. The visualization uses `d3.scale.linear` for the x-axis and `d3.scale.ordinal` with `rangeRoundBands` for the categorical y-axis. The code builds the chart in SVG using `d3.svg.axis`, and a custom axis adjustment flips the tick orientation for negative bars by repositioning their tick lines and labels. Data is loaded from a TSV file via `d3.tsv`, and the bars are drawn as `rect` elements with widths computed from the absolute difference between the zero point and each value.

Mmbostock

79% match