Skip to main content
SimilarExport ZIP
100%

stacked/grouped

✓ Published0🌍 Public
TThanaporn-sk
Last edited Jul 2, 2019
Created on Jul 2, 2019

This interactive visualization compares U.S. state population distributions across seven age groups, with radio buttons toggling between grouped and stacked bar chart layouts. Built with D3.js version 3.5, it uses ordinal and linear scales, categorical color encoding, and SVG transitions. The animation shifts bars between stacked and side-by-side arrangements over 500 milliseconds. Population data comes from a CSV file, and hover tooltips are implemented through SVG text elements.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/michalmatwie/'>michalmatwie</a>'s block: <a href='http://bl.ocks.org/michalmatwie/ea33988fea0b8b4bb337cd2d8fce7365'>stacked/grouped</a>

mit Licensed

Similar vizzes

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
86% 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
85% match
Loading thumbnail…

28. stacked bar (states on x-axis, age groups stacked)

This example visualizes the population distribution across all 50 U.S. states, broken down by seven age groups. Each state is represented on the x-axis, with the total population divided into stacked, color-coded segments for each age bracket. The data originates from a CSV file, and the visualization is built using the D3 v4 library. The code employs `d3.scaleBand`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.stack` to create the stacked bar chart, with rendering facilitated by SVG.

深深度碎片
84% 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
84% 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.

深深度碎片
84% match
Loading thumbnail…

Radial Stacked Bar

This example shows the population distribution of U.S. states across age groups using a radial stacked bar chart, where each state occupies a wedge and the stacked segments represent age categories. The chart uses d3.stack to compute the stacked series, d3.scaleBand for the angular axis, and a custom d3.scaleRadial for the radial extent. It renders SVG paths via d3.arc with padded angles, and includes circular grid lines, state labels rotated around the perimeter, and a legend for age groups. The data comes from a CSV file.

TThanaporn-sk
84% 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
83% match
Loading thumbnail…

Stacked Barchart with Transitions

This stacked bar chart displays the age distribution of US state populations, with each bar segmented by seven age groups and states sorted by total population. A red button triggers an update that randomly jitters the segment boundaries while preserving the overall totals, animating the transitions. Built with D3 v4, the visualization uses stacked rectangles, ordinal color mapping, and SVG transitions to morph the bars. The data is loaded from a CSV file, and the legend identifies each age category.

AAndresAnayaIsaza
83% match