Stacked Negative Values

100%

Stacked Negative Values

✓ Published0🌍 Public

Last edited Aug 10, 2017

Created on Aug 10, 2017

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.

AI-generated description

A diverging stacked bar chart, with negative values descending below the x-axis.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/b5935342c6d21928111928401e2c8608'>Stacked Negative Values</a>

gpl-3.0 Licensed

Similar vizzes

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

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

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

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

82% match

Loading thumbnail…

StackBarChart

This stacked bar chart visualizes fruit quantities across four months, with each bar segment representing apples, bananas, cherries, or dates. The visualization uses React with SVG rendering and leverages D3’s `d3.stack()` with a default offset to compute the stacked series, alongside `d3.scaleBand` and `d3.scaleLinear` for positioning. Color encoding via `d3.scaleOrdinal` with `d3.schemeSet3` distinguishes categories, while the x-axis labels are formatted using the Moment.js library. Data is hardcoded in the script, and axes are generated through a custom `naiveAxes()` function.

Vvoid-LSTM

80% match

Loading thumbnail…

1114StackBarChart

This stacked bar chart displays four months of fruit production data, with apples, bananas, cherries, and dates layered from bottom to top. The visualization uses d3.stack() to transform the input dataset into stacked series, then renders each category as a colored SVG rectangle within a group using a data join. Axes are generated with d3.axisLeft and d3.axisBottom, with the x-axis formatted as month-day labels via d3.timeFormat. The chart uses a linear scale for the y-axis and a band scale for the x-axis, with a categorical color scale applying the d3.schemeSet3 palette to distinguish fruit types.

Vvivianaaai@qq.com

80% match

Loading thumbnail…

StackBarChart

A stacked bar chart displays four months of fruit production data, with each bar segmented into stacked categories (apples, bananas, cherries, dates) and colored using the d3.schemeSet3 ordinal color scheme. The chart uses d3.stack() to compute cumulative values for the stacked segments, then renders the bars as SVG rectangles via a data join with g and rect elements. The x-axis uses a time scale formatted with d3.timeFormat, while the y-axis uses a linear scale with .nice() rounding. Axes are drawn with d3.axisLeft and d3.axisBottom, and the chart is set within a 1600x800 SVG element.

Vvivianaaai@qq.com

80% match

Loading thumbnail…

D3 Shapes - Stacked Bar

This stacked bar chart visualizes five days of fruit quantities, with three series (apricots, blueberries, cherries) shown as horizontal segments per day. The chart uses D3 v7’s `d3.stack()` to compute the cumulative y-values for each series, then binds the stacked data to SVG `rect` elements. Series colors are applied via a static array, and day labels are rendered as SVG text. The visualization demonstrates stacking without axes, focusing on the proportional differences between fruit categories across the week.

SSubhendu Karmakar

79% match