Skip to main content
100%

Diverging StackedBar Chart

✓ Published0🌍 Public
Aabrown004
Last edited May 31, 2018
Created on May 30, 2018

This example shows a diverging stacked bar chart built with D3 v3, displaying five labeled categories with numeric values. The chart renders as vertical bars with a color scale mapping each category to a distinct color from a predefined palette. It includes axes with a rotated y-axis label and a tooltip that appears on mouseover to show the category label and value. The code uses `d3.svg.axis`, `d3.scale.ordinal`, and `d3.scale.linear` to construct the visualization, with SVG rectangles for the bars and HTML divs for the tooltip. Data is hardcoded in the script, though commented-out code suggests it could also load from a CSV file.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3 Layouts - Stacked bar chart

This example shows a stacked bar chart built with D3.js, using the `d3.stack` API to arrange three categories—apples, oranges, and grapes—into cumulative segments for five data groups. The visualization renders directly to an SVG element, with each stacked segment colored via `d3.scaleOrdinal` and the `d3.schemeCategory10` palette. A band scale positions the bars horizontally, while a linear scale maps the cumulative totals to the chart’s height, with the stacking order sorted descending. The input dataset is a hardcoded array of objects.

KKaustav Sen
84% match
Loading thumbnail…

Stacked Bar Chart Example

This example shows a stacked bar chart comparing three value series across three categories, with each bar segment stacked vertically and colored blue, green, or orange. The chart renders as an SVG using React and D3 v6, drawing rectangles positioned via a band scale for categories and a linear scale for cumulative sums. The code calls `d3.stack()` with keys for value1, value2, and value3, and appends axes with `d3.axisBottom` and `d3.axisLeft`. The dataset is hardcoded in the script.

BBhavanaGIrni
84% match
Loading thumbnail…

Fork of Stacked Bar Chart Example

This stacked bar chart example shows how three numeric values (value1, value2, value3) accumulate across three categories, with each bar segment colored steelblue, green, and orange. The visualization uses d3.stack() to compute the stacked series and d3.scaleBand with d3.scaleLinear to position rectangles in an SVG. The code renders axes via d3.axisBottom and d3.axisLeft, with dimensions fixed at 400 by 300 pixels. The sample dataset is hardcoded in script.js, and the chart updates purely through D3’s data join, without animation or interactivity.

BBhavanaGIrni
83% match
Loading thumbnail…

Stacked bar chart v4

This stacked bar chart visualizes five series across ten samples, with each bar segment colored by series using an ordinal scale. The chart uses D3 v4 with an SVG rendering, positioning bars via a band scale for the x-axis and a linear scale for the y-axis. It builds the stacks with `d3.stack()` and draws rectangles for each segment, using randomly generated data from `d3.range` and `Math.random`.

Aalexandrospopov
83% match
Loading thumbnail…

Stacked bar chart v4

This stacked bar chart shows ten samples across five series, with each series rendered as a color-coded segment. The visualization begins as a standard stacked bar layout, then animates the rectangles into a grouped arrangement, shifting the bars horizontally and adjusting their heights. Built with D3 v4, the code uses `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack` to compute the stacked values and transitions. The SVG output is animated using the `d3-transition` library, with random data generated on the fly. The chart highlights how the same data can be represented in both stacked and grouped forms.

MMathReynaud
83% match
Loading thumbnail…

D3.js Bar Chart Example

This D3.js example shows a straightforward bar chart of categorical data with axes and labels, visualizing values for five categories (A through E). The visualization renders as an SVG, using D3 v6's modular imports including `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to map the dataset to bar positions and heights. The chart reads its data from a CSV file via `d3.csv`, converting the population column to numeric values, while the styling uses steelblue fills for the bars.

BBhavanaGIrni
82% 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
82% match
Loading thumbnail…

Stacked Bar Chart with d3.js

This example creates a stacked bar chart from sample data using D3.js v6, displaying three quantitative values (valueA, valueB, valueC) across three categories. The chart renders as an SVG, with bars stacked using the D3 `d3.stack()` generator and colored via `d3.schemeCategory10`. Axes and labels are added using `d3.axisBottom` and `d3.axisLeft`, with scaling handled by `d3.scaleBand` and `d3.scaleLinear`. The code demonstrates importing D3 via a CDN and using local ES6 modules.

Aakshayvenishetty1437
82% match