Skip to main content
SimilarExport ZIP
100%

Grouped Bar Chart Toggle Series, update for d3v5

✓ Published0🌍 Public
663anp3ca
Last edited Oct 9, 2018
Created on Oct 9, 2018

This example presents a grouped bar chart of U.S. state populations by age bracket, using data from a CSV file. It uses d3.v5’s `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` to render SVG rectangles. Clicking a legend item toggles that series on or off, filtering the displayed bars and updating the x and y scales with a 500-millisecond transition on the axis.

AI-generated description

forked from <a href='http://bl.ocks.org/flacoman91/'>flacoman91</a>'s block: <a href='http://bl.ocks.org/flacoman91/050cb74d729c97ae75139673222269f7'>Grouped Bar Chart Toggle Series, update for d3v5</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays the populations of six U.S. states across seven age groups, loaded from a CSV file via d3.csv. The visualization uses d3.scaleBand for the state and age-group positions, d3.scaleLinear for the population axis, and d3.scaleOrdinal with a categorical color range to distinguish age categories. Bars are rendered as SVG rectangles, with axes generated by d3.axisBottom and d3.axisLeft, while d3.format applies SI prefixes (e.g., “10M”) to tick labels. A legend maps colors to age groups.

Mmbostock
85% match
Loading thumbnail…

d3fc grouped bar chart

This grouped bar chart displays the population distribution across seven age brackets for six U.S. states, with each state’s bars encoded by a categorical color scale. The visualization is rendered as SVG using d3fc’s `seriesSvgGrouped` and `chartCartesian` APIs, with `d3.scalePoint` for the x-axis and `d3.scaleLinear` for the y-axis. Data is loaded from a CSV via `d3.csv`, and the legend is generated using `d3.legendColor`. The y-axis uses `d3.format(".2s")` to abbreviate large population values.

CColinEberhardt
84% match
Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays the population distribution across seven age groups for six U.S. states, using a distinct color for each age bracket. The chart is rendered as SVG, with bars grouped per state along the x-axis and population counts on the y-axis, formatted with SI prefixes like "10M." Built with D3 v4, the visualization loads data from a CSV file via `d3.csv`, uses `d3.scaleBand` for the x-positions and `d3.scaleLinear` for the y-axis, and applies an ordinal color scale. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and a legend is manually constructed with SVG rectangles and text.

JJboulery
83% match
Loading thumbnail…

Untitled

A grouped bar chart displays population estimates for six U.S. states across seven age brackets, colored by age group via a categorical color scale. Using D3 v4, the visualization loads CSV data with `d3.csv`, employs `d3.scaleBand` and `d3.scaleLinear` for axes, and renders SVG rectangles for bars. A legend maps age ranges to colors, while axis labels and a title clarify the data. The chart is built with a `svg` element and D3’s selection, scale, and axis APIs.

Mmavercikalvin
83% 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
82% 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
82% match
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
81% 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
81% match