Normalized Stacked Bar Chart

100%

Normalized Stacked Bar Chart

✓ Published0🌍 Public

Last edited Oct 9, 2018

Created on Oct 9, 2018

This example demonstrates a normalized stacked bar chart built with D3 v4, jQuery, and Underscore.js, rendering to SVG. The chart reads a CSV file containing any number of groups and up to eight categories, then calculates each category's percentage of the row total in JavaScript before drawing. The x-axis uses a linear scale from 0 to 100 percent, and each horizontal bar is subdivided into colored segments representing categories, with labels for values above 5%. A total row is computed dynamically and appended to the bottom of the chart, and a legend displays the category colors. The visualization is implemented without D3's stack layout, manually positioning the rectangles.

AI-generated description

Create a normalized stacked bar chart in d3 (without the stack layout).

The CSV file can contain any number of groups and up to 8 categories. It must not have a total row at the bottom; that row is calculated with Javascript.

Libraries: d3.js, underscore.js, jQuery

forked from <a href='http://bl.ocks.org/HarryStevens/'>HarryStevens</a>'s block: <a href='http://bl.ocks.org/HarryStevens/dea8fdcdae7401ab486bfc7fcc9f6882'>Normalized Stacked Bar Chart</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Normalized Stacked Bar Chart

This normalized stacked bar chart displays each category’s composition as percentages of a whole, using horizontal segments that always fill the full bar height. The code loads a JSON array of time values, computes the satisfied portion by subtracting left hours from total hours, and sorts categories by total descending. Using d3.stack with the stackOffsetExpand offset, it converts raw counts into proportional shares, then renders SVG rectangles via d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. The legend lines and text are positioned at each segment’s midpoint, while the y-axis labels show percentage ticks.

LLauraCortes

86% match

Loading thumbnail…

Normalized Stacked Bar Chart

This example shows survey responses across different frequencies of playing, with each bar normalized to represent the proportion of respondents in each occupational category. The chart uses a stacked bar layout where the total height of each bar equals 100%, making it easy to compare category distributions across the frequency groups. The visualization is built with D3 v4, using `d3.stack()` with `d3.stackOffsetExpand` to normalize the data, and renders the bars as SVG rectangles. The data comes from a CSV file, and the chart includes a legend positioned along the rightmost bar to identify each occupational group.

JJdlv00

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

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

81% match

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

80% match

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

80% match

Loading thumbnail…

Stacked Bar Chart w/ CSV- V4- Fully Commented

A stacked bar chart displays the distribution of eight age groups (0-10 through 71+) across five ethnic categories from a CSV dataset. The chart uses a single stacked bar per ethnicity, with each segment colored via `d3.scaleOrdinal` and `d3.schemeCategory20`. The x-axis uses `d3.scaleBand` for categorical spacing, while the y-axis uses `d3.scaleLinear` with a `d3.stack` layout to compute segment heights. Data is loaded and parsed with `d3.csv`, and the bars are rendered as SVG rectangles, with margins applied via a transform. The visualization is fully commented, explaining each D3 v4 API call.

663anp3ca

79% match

Loading thumbnail…

stacked bar

A stacked bar chart displays records published by month in 2015, broken into four categories: Geographic, Dataset, Application, and WebService. The chart uses D3.js (v3.5.5) to load the CSV data from `views.csv`, compute cumulative y-values for each segment, and render colored rectangles per category. An ordinal x-scale maps months, a linear y-scale encodes total counts, and a legend identifies the color-coded categories. The SVG rendering includes axes formatted with the `.2s` tick format and uses `d3.svg.axis` for the bottom and left axes.

MMbrownshoes

79% match