Normalized Stacked Bar Chart

100%

Normalized Stacked Bar Chart

✓ Published0🌍 Public

Last edited Oct 29, 2016

Created on Oct 20, 2016

This example visualizes the results of a referendum by showing the percentage of “No” and “Yes” votes across multiple municipalities, with each bar normalized to 100%. The chart uses a stacked bar layout where each segment’s height reflects its share of the total, making comparisons of proportions easy across categories. Built with D3 v4, the code employs `d3.stack` with `stackOffsetExpand` to compute normalized values, `d3.scaleBand` for the categorical x-axis, and `d3.scaleOrdinal` for segment colors. Data is loaded from a CSV file containing raw vote counts, which are converted to percentages for display.

AI-generated description

This variation of a stacked bar chart shows percentages rather than absolute numbers.

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

gpl-3.0 Licensed

Similar vizzes

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

78% match

Loading thumbnail…

Normalized Stacked Bar Chart

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.

663anp3ca

77% match

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

76% match

Loading thumbnail…

Normalized Stacked Bar Chart

A normalized stacked bar chart displays age-group distributions as proportional segments across U.S. states, with each bar totaling 100% to facilitate cross-state comparison. The visualization uses D3 v4’s `d3.stack` with the `stackOffsetExpand` offset, scales via `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles. Data comes from a CSV of state population figures, sorted by the share of residents under 5 years old. A legend and axis with percentage ticks are included, all styled with D3’s default categorical color scheme.

FFrissAnalytics

75% match

Loading thumbnail…

Diverging Stacked Bar Chart with D3.js

This visualization displays survey responses as a diverging stacked bar chart, with each row representing a question and colored segments showing the percentage of respondents who strongly disagree, disagree, are neutral, agree, or strongly agree. The chart uses D3.js v3 to load CSV data, compute percentage distributions, and render SVG rects and text labels via ordinal and linear scales. Alternating row backgrounds and a centered zero line aid readability, while a legend identifies the five response categories.

Jjhcliu19

74% match

Loading thumbnail…

Stacked Normalized Horizontal Bar Chart

This stacked normalized horizontal bar chart visualizes the distribution of male and female members across multiple political party groups, with each bar normalized to represent proportions rather than raw counts. The data is sourced from a CSV file containing party names and gender counts. The chart uses D3 v6’s `d3.stack()` with `d3.stackOffsetExpand` for normalization, rendered as SVG rectangles with a color scale distinguishing genders. Interactive tooltips display exact values, while labels show raw counts, and the chart includes a color legend for age categories.

CCasado7

73% match

Loading thumbnail…

Normalized Stacked Bar Chart

This normalized stacked bar chart displays the percentage distribution of age groups across U.S. states, sorting states by the proportion of their youngest residents. Using D3 v4, it applies `d3.stack` with `stackOffsetExpand` to scale each bar to full height, then renders SVG rectangles with an ordinal color scale for age categories. Axis labels are formatted as percentages, and a custom legend anchored to each bar’s final segment identifies each series. The chart loads population data from `data.csv` and sorts states in descending order of the "Under 5 Years" share.

Mmbostock

73% match

Loading thumbnail…

Activity6_Questn2

This stacked bar chart displays the distribution of public ratings across ten political topics, with each topic’s bar normalized to 100%. The visualization uses D3.js v7’s `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` APIs, rendering as SVG. Data is loaded from a CSV file, and each segment’s percentage is revealed via a tooltip on hover. The legend and color-coded segments clarify the five rating categories, from “very low” to “very high.” The chart employs ordinal color scales and axis labels to present the categorical proportions clearly.

PPreethamreddyannavaram@my.unt.edu

73% match