Stacked Bar Chart with Tooltip by D3 v4

100%

Stacked Bar Chart with Tooltip by D3 v4

✓ Published0🌍 Public

Last edited May 20, 2017

Created on May 17, 2017

This example shows the age distribution of the U.S. population by gender, with males and females stacked as colored segments within each age group. The chart uses D3 v4's `d3.scaleBand` for the age categories, `d3.scaleLinear` for percentages, and `d3.scaleOrdinal` for color encoding. Hovering over a segment triggers a tooltip built with a separate SVG that displays the exact value. The data comes from data.gov, and the code draws from examples by Mike Bostock and Michael Stanaland.

AI-generated description

This is stacked bar chart done by D3.

Based on D3 Stacked Bar Chart by Mike Bostock https://bl.ocks.org/mbostock/3886208 Tooltip code based on D3 Stacked Bar Chart with Tooltips by Michael Stanaland http://bl.ocks.org/mstanaland/6100713

The data source comes from data.gov

mit Licensed

Similar vizzes

Loading thumbnail…

d3js clickable stacked bar chart

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.

KKatiRG

85% match

Loading thumbnail…

d3js clickable stacked bar chart

This interactive stacked bar chart displays U.S. state population distributions across seven age groups, using D3.js to render the visualization in SVG. The chart is an enhanced version of Mike Bostock's classic stacked bar example, with a clickable legend that lets users select and display individual categories. Hovering over a bar segment highlights it and shows a tooltip with the category name and value. The legend supports click-based filtering to isolate specific age groups, and the bars are animated when switching between views.

Aachalvs

84% match

Loading thumbnail…

d3js clickable stacked bar chart

This clickable stacked bar chart, forked from Mike Bostock's original and enhanced with an interactive legend, visualizes U.S. state population distributions across seven age groups. Rendered with D3.js as an SVG with animated transitions, the chart sorts states by total population and uses an ordinal x-axis and linear y-axis. Users can click legend items to isolate or toggle display of individual age categories, while hovering over any bar segment highlights it with a stroke and shows a tooltip with the category name and population value. The color scheme distinguishes age groups, and the legend supports selection to filter the stacked bars dynamically.

Aachalvs

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

83% match

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

83% match

Loading thumbnail…

Horizontal Stacked Bar Chart

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.

Aandrew-reid

82% match

Loading thumbnail…

d3js clickable stacked bar chart

This stacked bar chart, based on Mike Bostock's original, adds an interactive legend that lets viewers isolate individual categories. The visualization displays U.S. census population data by state and age group. Clicking a legend item filters the bars to show only that category, while hovering over bars reveals tooltips with exact values and highlights the segment. The chart is rendered with SVG and includes animated transitions, built with D3.js under an MIT license.

Aachalvs

82% match

Loading thumbnail…

Group bar chart with tooltip

A grouped bar chart displays population distributions across six U.S. states, with each state’s bars broken down by seven age brackets. The chart uses a vertical axis labeled “Population” and a horizontal axis listing state abbreviations, with a color-coded legend identifying each age group. Built with D3 v4 and the d3-tip plugin, it renders as SVG and shows exact values on mouseover via tooltips. The code employs `d3.scaleBand` for grouped positioning, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for colors.

AAlireza-Dezfoolian

82% match