Skip to main content
100%

Stacked Negative Values

✓ Published0🌍 Public
Aabrown004
Last edited Sep 25, 2018
Created on May 29, 2018

A diverging stacked bar chart displays quarterly fruit sales, with positive values for apples and bananas rising above the x-axis and negative values for cherries and dates descending below it. The chart uses d3.stack with the stackOffsetDiverging method to separate positive and negative series, while d3.scaleBand and d3.scaleLinear position the bars. d3.schemeCategory20 colors each fruit category, and SVG rect elements render the stacked segments. The data is hardcoded in the script, covering four quarters from Q1-2016 to Q4-2016.

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>

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

gpl-3.0 Licensed

Similar vizzes

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
95% 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
94% 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
92% 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
84% 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
84% 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
84% 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…

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
82% match