Skip to main content
SimilarExport ZIP
100%

Stacked-bar-example

✓ Published3🌍 Public
GGabriel Ing
Last edited Jan 30, 2025
Created on Jan 29, 2025
Forked from HTML Starter

This stacked bar chart displays the distribution of three subgroups across multiple categorical groups, with each bar segment colored distinctly to show proportional composition. The visualization uses D3 v7 to load CSV data via `d3.csv` from a GitHub-hosted dataset, then applies `d3.stack()` and `d3.scaleBand()` to structure and position the bars. Colored segments are rendered as SVG rectangles using `d3.scaleOrdinal` for color mapping, with axes generated through `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

example copied from d3-graph-gallery

MIT Licensed

Similar vizzes

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the distribution of subgroups across categorical groups, with each bar segment colored by subgroup and stacked to show cumulative values. The visualization is built using D3 v4, loading CSV data from GitHub, and rendering SVG rectangles with a band scale for the x-axis and a linear scale for the y-axis. It uses `d3.stack()` to compute stacked values, `d3.scaleOrdinal` for colors, and includes an interactive tooltip element in the HTML structure.

JJames Huang
92% match
Loading thumbnail…

Fork of D3 Stacked Barchart Example

This example shows a stacked bar chart where each bar represents a group and is divided into colored segments for three subgroups. The chart loads data from a CSV file hosted on GitHub, then uses `d3.csv` to parse it. The visualization applies `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.stack().keys()` to stack the data by subgroup. Bars are rendered as SVG `rect` elements, with colors assigned via `d3.scaleOrdinal` using a three-color palette. The y-axis is fixed from 0 to 5, and axes are added with `d3.axisBottom` and `d3.axisLeft`.

NNiels Christian Groenlykke
91% match
Loading thumbnail…

Untitled

This example shows a stacked bar chart where each bar represents a group, and the bar is divided into colored segments corresponding to subgroups. The chart loads CSV data from a GitHub URL using `d3.csv`, and defines the subgroups from the data's column headers. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for the color palette. The bars are created by stacking the data with `d3.stack` and rendering each segment as an SVG `rect` within a `g` element.

Ttayyabanisar
87% match
Loading thumbnail…

Untitled

This example shows a stacked bar chart where each bar represents a group, and the bar is divided into colored segments corresponding to subgroups. The chart loads CSV data from a GitHub URL using `d3.csv`, and defines the subgroups from the data's column headers. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for the color palette. The bars are created by stacking the data with `d3.stack` and rendering each segment as an SVG `rect` within a `g` element.

Ttayyabanisar
87% match
Loading thumbnail…

D3 Stacked Barchart Example

This example shows a stacked bar chart of three soil-condition subgroups across multiple species groups, with a categorical color scale and labeled axes. D3 v7 loads CSV data from an external GitHub repository and renders the chart as SVG. The code uses `d3.stack()` to compute cumulative bar segments, then draws the rectangles with `d3.scaleBand` and `d3.scaleLinear` for positioning. A dropdown-like legend is absent, but the color mapping and axis ticks clearly communicate the subgroup breakdown per species.

PPeter Cordone
87% match
Loading thumbnail…

Stacked Bar Graph

This example shows a stacked bar graph where each bar represents a total value composed of three categorical segments, using data from an external CSV file. The visualization renders as an SVG chart with a light gray background, axes, a title, and a color-coded legend. It loads the dataset with `d3.csv`, transforms the columns into numeric values, and uses `d3.stack` to arrange the segments. The chart draws rectangles via SVG and scales the axes using `d3.scaleBand` and `d3.scaleLinear`, with colors assigned by `d3.scaleOrdinal` and `d3.schemeCategory10`.

NNukaShravanKumar
87% match
Loading thumbnail…

Untitled

This example shows a stacked bar chart comparing values across three groups, with each bar subdivided into three colored segments representing different subgroups. The chart reads data from a CSV file hosted on GitHub, parsing it with `d3.csv` and mapping groups to the x-axis and numeric values to the y-axis. It uses `d3.scaleBand` for both group and subgroup positioning, `d3.scaleOrdinal` for the categorical color palette, and `d3.axisBottom` and `d3.axisLeft` to render the axes. The SVG output is built via D3's selection and append methods, with each group translated into position and rectangles drawn per subgroup.

Vvveewwee
86% match
Loading thumbnail…

Untitled

This example demonstrates a stacked bar chart built with D3 v4, displaying categorical data grouped on the x-axis with subgroups stacked by color. It loads data from a remote CSV file using `d3.csv`, then uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to construct the axes. The chart applies `d3.stack` to compute cumulative bar segments, assigns colors via `d3.scaleOrdinal`, and renders the result as SVG rectangles with bar widths from `x.bandwidth()`.

BBaptisteJarry
85% match