Stacked Negative Values

100%

Stacked Negative Values

✓ Published0🌍 Public

Last edited Mar 12, 2020

Created on Mar 7, 2017

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)`.

AI-generated description

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

gpl-3.0 Licensed

Similar vizzes

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

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

87% match

Loading thumbnail…

Bar Chart with Negative Values

This bar chart displays both positive and negative values for eight named categories, using color to distinguish them: steel blue for positive bars and dark orange for negative bars. Built with D3 v3 and rendered as SVG, it loads data from a TSV file and applies a linear scale to position bars along the x-axis while an ordinal scale with rangeRoundBands handles the y-axis placement. The code calculates bar positions conditionally so negative values extend leftward from zero and positive values extend rightward. Axis components from d3.svg.axis add tick marks and labels.

Mmbostock

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

80% match

Loading thumbnail…

Bar Chart with Negative Values

This bar chart displays both positive and negative values for named items, with positive bars in steelblue and negative bars in brown. Using D3 v3 with SVG rendering, the visualization employs a linear scale for the x-axis to position bars and an ordinal scale with rangeRoundBands for the y-axis. Rects are positioned conditionally so that their x-coordinate and width correctly handle negative values, while a top-oriented axis and zero line clarify the scale. Data is loaded from a tab-separated file.

KKevinRourke

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

78% match

Loading thumbnail…

Gist a198389d0150b3f23ce2

This example demonstrates a simple column chart that handles negative values on the y-axis, using categorical data on the x-axis. It shows how bars extend above and below a zero baseline, with positive values in steelblue and negative values in brown. The chart is built with D3 v2, using an ordinal scale for the x-axis and a linear scale for the y-axis. It renders via SVG, with a reusable chart function that configures margins, axes, and bar dimensions based on the data.

IIconicImagery

77% match

Loading thumbnail…

Untitled

This example demonstrates a stacked bar chart with diverging offsets, visualizing categorical data across ordinal x-values. The chart uses D3.js v7 to create an SVG rendering, with a Tableau10 color scheme distinguishing categories. The implementation employs D3's `stack` API with `stackOffsetDiverging` and `stackOrderNone`, mapping data through `d3.map` and `d3.rollup` to structure series. The interface includes a y-axis with gridlines and a monospace font, while interaction shows tooltips displaying x-value, category, and formatted y-value.

JJoshua Higginbotham

77% match