Skip to main content
100%

Grouped Bar Chart - Age

✓ Published0🌍 Public
Aajayk1931
Last edited Feb 10, 2017
Created on Feb 9, 2017

This grouped bar chart compares the number of people aged 25 and over who have attained various college degrees, broken down by age brackets from 25–34 through 65 and over, using data from the US Census Bureau’s Survey of Income and Program Participation. Five education levels—from associate’s to doctorate—are shown side by side for each age group, with population counts in thousands. The visualization uses d3.csv for data loading, d3.scaleBand for x-position and grouping, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeCategory10 for color encoding. Axes are rendered with d3.axisBottom and d3.axisLeft, and values are formatted using d3.format.

AI-generated description

This visualization shows the number of people who have attained a college degree grouped by population age 25 and over.

Data Source: Table 1A of What It's Worth: Field of Training and Economic Status, US Census Bureau, Survey of Income and Program Participation, 2008 Panel.

Visualization based on <a href='https://bl.ocks.org/mbostock/3887051'> Mike Bostock's </a> Grouped Bar chart example. Features include:

  • d3.csv - load and parse data
  • d3.scale.ordinal - x-position encoding and color encoding
  • d3.scale.linear - y-position encoding
  • d3.format - SI prefix formatting (e.g., “10M” for 10,000,000)
  • d3.max - compute domains
  • d3.keys - compute column names
  • d3.svg.axis - display axes

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Bar Chart

This bar chart visualizes educational attainment across seven age groups in the United States, with each education level represented by a cluster of colored bars. The data comes from a CSV file listing population figures in thousands. Built with D3 v4, the visualization uses `d3.scaleBand` for the categorical axes, `d3.scaleLinear` for the population axis, and `d3.schemeCategory10` for bar colors. SVG rendering handles the bars, axes, and legend, while the code loads the data asynchronously via `d3.csv`.

Aajayk1931
84% match
Loading thumbnail…

Grouped Bar Chart

This grouped bar chart displays state populations by age group, using color-coded bars for each age category across seven states. The visualization loads CSV data with d3.csv, encodes the x-position with d3.scaleBand and y-values with d3.scaleLinear, and assigns colors via d3.scaleOrdinal. It formats the y-axis tick labels with d3.format’s “s” SI prefix, computes domains with d3.max, and renders axes with d3.axisBottom and d3.axisLeft. A legend is appended manually, and the chart follows conventional margins with an SVG output.

Aadkinsc
79% 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
78% match
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
77% 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
77% match
Loading thumbnail…

Making a Bar Chart

This bar chart shows the population distribution across age groups (from 0-4 to 95+ years) for a given population. Using D3.js version 5, it employs `d3.scaleLinear` and `d3.scaleBand` to map population values and age categories to the x and y axes, respectively. The SVG includes axes via `d3.axisLeft` and `d3.axisBottom`, with bars rendered as `rect` elements filled in steel blue. The data is loaded from a CSV file containing country and population columns.

Ttkreglhn
77% match
Loading thumbnail…

Grouped Bar Chart

A grouped bar chart displays population percentages across four age groups for five San Francisco districts, with each district’s bars colored by age category and a legend identifying them. The visualization loads data from a CSV file using d3.csv, then applies d3.scale.ordinal for x-position and color encoding, d3.scale.linear for the y-axis, and d3.svg.axis to render axes with SI-prefix formatting via d3.format. Bars are drawn as SVG rectangles, with heights computed from the parsed numeric values.

LLjfernando
76% match
Loading thumbnail…

Grouped Bar Chart Toggle Series

A grouped bar chart displays population counts by age range for six U.S. states, with each state’s bars color-coded by age group. Clicking a legend item toggles that age series on or off, triggering animated transitions that collapse the hidden bars to zero width and re-space the remaining bars using updated d3.scaleBand domains. The visualization uses D3 v4 with SVG rendering, d3.csv for data loading, d3.axisLeft for the y-axis, and transition methods to animate bar resizing and axis updates.

Aandrew-reid
76% match