Normalized Stacked Bar Chart

100%

Normalized Stacked Bar Chart

✓ Published0🌍 Public

Last edited Sep 25, 2018

Created on Sep 25, 2018

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.

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

95% match

Loading thumbnail…

Radial Normalized Stacked Bar

This radial stacked bar chart displays the age distribution of each U.S. state, with each bar normalized to represent proportions that sum to 100%. The circular layout encodes states around the circumference and uses a radial scale to show percentage values, with concentric grid circles and percentage labels around the center. The chart uses d3.stack with stackOffsetExpand to normalize data, d3.arc for the radial segments, and a custom scaleRadial function that applies a square-root transformation to linear scales. The data comes from a CSV file containing state-by-age population counts.

Mmbostock

89% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the population of different states broken down by age groups, with each bar segmented into colored bands representing the age categories. The chart uses an ordinal x-scale for states, a linear y-scale for population counts, and a color ordinal scale for the age series. The visualization is rendered as SVG via D3 v3, loading data from a CSV file and using d3.csv, d3.scale.ordinal, d3.scale.linear, d3.format, d3.max, d3.keys, and d3.svg.axis. A legend identifies the age groups, while the bars are sorted by total population.

CCBasis

89% match

Loading thumbnail…

Radial Normalized Stacked Bar

This radial bar chart displays the age distribution of U.S. states as a normalized stacked donut, with each state occupying a segment and each age group represented by a colored arc whose radial extent shows its proportion. The chart uses d3.stack with the stackOffsetExpand transform, d3.arc for paths, and a custom d3-scale-radial plugin extending d3.scaleLinear. Data is loaded from a CSV file, with states sorted by the proportion of residents under five years old. The visualization includes circular gridlines with percentage labels and a legend for age categories.

GGerardoFurtado

88% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the population of U.S. states, broken down by seven age groups, with each state’s total population sorted in descending order. The visualization uses a horizontal axis for state abbreviations and a vertical axis for population counts, formatted with SI prefixes (e.g., “10M”). The chart is built with D3 v4, loading data from a CSV via `d3.csv`, computing stacked positions with `d3.stack`, and encoding the categorical age groups with a color scale (`d3.scaleOrdinal`). Axes are rendered using `d3.axisBottom` and `d3.axisLeft`, with a legend positioned inside the SVG.

DDinoJay

86% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the population of each U.S. state, broken down by seven age groups, with states sorted by total population. The visualization uses d3.csv to parse the data, d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal for color encoding. d3.stack computes the stacked positions, while d3.axisBottom and d3.axisLeft render the axes. The SVG rendering includes a legend and uses d3.format with SI prefixes (e.g., "10M") for population labels.

深深度碎片

86% match

Loading thumbnail…

Radial Normalized Stacked Bar

This radial chart displays the age distribution of each US state as a circular ring of normalized stacked bars, with each bar representing a state and its segments showing the proportion of seven age groups. The outer radius encodes the relative share of residents under five years old, which determines the state sorting order. Built with D3 v4, it uses `d3.scaleBand` for angular positions, `d3.scaleRadial` (a custom d3-scale plugin) for radii, and `d3.stack` with `stackOffsetExpand` to normalize the data from a CSV file. Labels rotate around the circle, and a legend identifies the age categories.

AAndresAnayaIsaza

86% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the population distribution across seven age groups for each U.S. state, sorted by total population. Data is loaded from a CSV file using d3-dsv. The chart uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis with SI-prefix formatting via d3-format, and d3.scaleOrdinal for color encoding. d3-shape’s d3.stack computes the stacked positions, while d3.axisBottom and d3.axisLeft render the axes.

Mmbostock

86% match