Skip to main content
SimilarExport ZIP
100%

D3 v4 Stacked Bar Chart with Negative Values - CFNAI Data

✓ Published0🌍 Public
TThanaporn-sk
Last edited Jul 2, 2019
Created on Jul 2, 2019

This stacked bar chart visualizes the Chicago Fed National Activity Index (CFNAI), breaking down monthly economic data into four component categories that can be either positive or negative. The bars are stacked to show the contribution of production, employment, consumption, and sales components to the overall index. A black line overlays the chart to display the three-month moving average of the total CFNAI values. Built with D3 v4, the visualization uses SVG rendering with `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to position bars and draw the trend line, with data loaded from a JSON file.

AI-generated description

##D3 v4 Stacked Bar Chart with Negative Values

A #d3js stacked bar chart that supports a mix of positive and negative values.

Data is from the Chicago Fed National Activity Index

The line represents the 3 month moving average of the compiled CFNAI components.

forked from <a href='http://bl.ocks.org/WillTurman/'>WillTurman</a>'s block: <a href='http://bl.ocks.org/WillTurman/9c4142944f6132855fd318350f552b7b'>D3 v4 Stacked Bar Chart with Negative Values - CFNAI Data</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 v4 Stacked Bar Chart with Negative Values - CFNAI Data

This stacked bar chart displays the Chicago Fed National Activity Index (CFNAI) from 1967 onward, breaking the index into four economic components that can be positive or negative. A black line overlays the bars to show the three-month moving average of the total index. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the moving average, and custom logic to stack positive and negative values separately. Data comes from a local `cfnai.json` file, with an SVG-rendered legend and axis.

TThanaporn-sk
98% 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
74% 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
74% 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
73% 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
71% 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
71% 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
69% 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
69% match