Skip to main content
100%

Horizontal Stacked Bar Chart

✓ Published0🌍 Public
Aandrew-reid
Last edited Mar 16, 2017
Created on Feb 2, 2017

This horizontal stacked bar chart visualizes U.S. population by state, broken down into seven age brackets. Built with D3 v4 and rendered as SVG, the chart sorts states by total population, with each bar segmented using a categorical color scale. The horizontal layout makes state labels easy to read, and the stacked segments show the age distribution for each state. The data is loaded from a CSV file and processed with d3.stack() to compute the segment boundaries, with a linear x-scale for population and a band y-scale for states.

AI-generated description

A demonstration of translating a vertical stacked bar chart, Mike Bostock's block here: https://bl.ocks.org/mbostock/3886208.

Commented sections show changes from Bostock's example.

Similar vizzes

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart displays the population of U.S. states broken down by seven age groups, with states sorted by total population and segments color-coded by age category. The visualization is rendered as an SVG using D3 v4, loading data from a CSV file via d3.csv. The code uses d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, d3.scaleOrdinal for colors, d3.stack to compute stacked positions, and d3.axisBottom and d3.axisLeft for the axes. A legend identifies each age group, and the y-axis labels use SI-prefix formatting via d3.format.

YYkelf
93% match
Loading thumbnail…

Stacked Bar Chart

This stacked bar chart visualizes the population of each U.S. state, broken down by seven age groups, with states sorted by total population. The data is loaded from a CSV using d3.csv. 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 with a categorical color palette. d3.stack computes the stacked series, which are rendered as SVG rectangles, with axes generated by d3.axisBottom and d3.axisLeft.

TThanaporn-sk
92% 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.

深深度碎片
92% 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
92% 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
91% 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
91% match
Loading thumbnail…

Stacked Bar Chart

This stacked bar chart shows population totals for each state, broken down by seven age groups, with each bar sorted by overall population and segments colored by age category. It loads data from a remote CSV file using d3.csv, then builds the visualization with d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal for color encoding. The stacked positions are computed using d3.stack, while d3.axisBottom and d3.axisLeft render the axes. The chart includes a legend and uses an SVG rendering approach with conventional margins.

MMTClass
90% match
Loading thumbnail…

Grouped Stacked Bar Chart

This grouped stacked bar chart visualizes population distributions across five U.S. states, broken down by age group and census year (1990, 2000, 2010). The chart uses d3.stack with stackOffsetExpand to show each age group’s proportional share within each state-year combination, with bars grouped by state and colored by age cohort. The SVG rendering relies on d3.csv for data parsing, d3.scaleBand for x-positioning, d3.scaleLinear for the y-axis, and d3.nest for restructuring the data. A custom legend labels each stacked segment directly beside its corresponding bar.

SSpaceActuary
89% match