Skip to main content
SimilarExport ZIP
100%

d3js clickable stacked bar chart

✓ Published0🌍 Public
KKatiRG
Last edited Jan 26, 2016
Created on Jan 25, 2016

This stacked bar chart displays the age distribution of each U.S. state’s population, with segments colored by age group. A clickable legend toggles individual categories on and off, and hovering over a bar segment highlights it and shows a tooltip with the exact value. Built with D3.js v3, it uses ordinal and linear scales with SVG axes, and animates bar transitions via legend-driven class selections. Data comes from the included `state_data.csv` file.

AI-generated description

Clickable legend added to Mike Bostock's stacked bar chart to select display of an individual category. With help from yuuniverse4444’s block #8325617.

Similar vizzes

Loading thumbnail…

d3js clickable, sortable stacked bar chart

This interactive stacked bar chart displays the age distribution of U.S. state populations, with a clickable legend to isolate a single age category and a checkbox to sort bars by value. Built with d3.v3 and SVG, it uses `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.axis` to render axes and bars, while animation and a tooltip enhance interactivity. The code reads `state_data.csv` and corrects a pixel-level height calculation error from Mike Bostock’s original example.

KKatiRG
96% 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
87% 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
87% 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
86% match
Loading thumbnail…

Untitled

This visualization displays a stacked bar chart of U.S. state populations segmented by age groups, sorted by total population. The React-based example uses D3.js v3 to generate SVG bars with an ordinal x-axis, linear y-axis, and a color scale. Interactive features include hover tooltips showing segment values and a legend that filters bars on click. Data is loaded from an external CSV file, and animations are triggered through legend selections.

AAziz Jaffrey
85% match
Loading thumbnail…

Radial Stacked Bar II

This radial stacked bar chart displays the population distribution of U.S. states across seven age brackets, with each state occupying a wedge and stacked segments representing age groups. The chart uses D3 v4 with a custom `d3-scale-radial` plugin, combining `d3.scaleBand`, `d3.scaleRadial`, and `d3.stack` to generate SVG arcs via `d3.arc`. State labels rotate around the outer edge, while circular grid lines and a legend clarify the age categories. Data comes from a CSV file, and the rendering is entirely SVG-based.

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

Radial Stacked Bar

This radial stacked bar chart displays the age distribution of each U.S. state’s population as concentric arcs. The visualization uses a d3.radial scale to map population totals from the inner to outer radius, while d3.stack and d3.arc render the stacked segments between angular bands. State labels rotate around the circle, and circular gridlines mark population tick values. The data comes from a CSV file, rendered as SVG using D3 v4.

Mmbostock
85% match