Gist a198389d0150b3f23ce2

100%

Gist a198389d0150b3f23ce2

✓ Published0🌍 Public

Last edited Sep 25, 2012

Created on Apr 1, 2015

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.

AI-generated description

See in action http://bl.ocks.org/3766585

This simple column chart shows how to handle negative values on the y axis. It handles ordinal values for the X axis only.

I started with this gist from Mike Bostock: https://gist.github.com/2368837 see it on blocks: http://bl.ocks.org/2368837

borrowed a bit from the histogram example in D3: https://github.com/mbostock/d3/tree/master/examples/histogram

and used the reusable chart convention from: http://bost.ocks.org/mike/chart/

Similar vizzes

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

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

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

82% match

Loading thumbnail…

bar negative table #2

This example presents a table of margin values for four locations, using horizontal bars to compare positive and negative results. Each row shows a location name beside a bar extending left or right from a central zero line, colored dark orange for negative values and steel blue for positive ones. A third column summarizes each entry with a label like “Humpty” or “Dumpty” and the absolute value. Built with D3 v3, it uses `d3.scale.linear`, `d3.tsv` for data loading, and SVG elements such as `rect` and `line` to draw the bars and gridlines.

PPatrick Wojda

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

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

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

76% match

Loading thumbnail…

vs1

This example shows a simple vertical bar chart of three labeled values using D3 v4. The code creates an SVG with scales for the x and y axes, then draws steelblue rectangles for each data point. It uses `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the numeric axis, with `d3.axisBottom` and `d3.axisLeft` to render the tick marks. The chart is embedded in a React project but works as a standalone HTML page with static data.

Yyesyesnono01@yahoo.com

75% match