Grouped Bar Chart with Crossfilter

100%

Grouped Bar Chart with Crossfilter

✓ Published0🌍 Public

Last edited Jan 19, 2018

Created on Jan 19, 2018

This grouped bar chart visualizes state populations by age range, with states on the x-axis and population on the y-axis using a linear scale with SI formatting. Each state is divided into age-group bars, colored distinctly, with a legend. The chart uses crossfilter to dimension, group, and aggregate the CSV data, computing nested structures via d3.nest to organize values by state and age range. Margins frame the SVG, axes are generated with d3.svg.axis, and the population encoding uses d3.scale.linear with d3.format for compact labels.

AI-generated description

This is a fork of mbostock's grouped bar chart example, to demonstrate how to use crossfilter to produce the same result.

This grouped bar chart is constructed from a CSV file storing the populations of different states by age group. The chart employs conventional margins and a number of D3 features:

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

forked from <a href='http://bl.ocks.org/danroberts/'>danroberts</a>'s block: <a href='http://bl.ocks.org/danroberts/cc6f3159f49fed6f6a8d'>Grouped Bar Chart with Crossfilter</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/edaed15ec54acfd254c22ea46abe0ee1'>Grouped Bar Chart with Crossfilter</a>

mit Licensed

Similar vizzes

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

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

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

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

82% match

Loading thumbnail…

Stacked Bar Chart

This stacked bar chart shows population totals for each state, broken down by seven age groups, with each bar sorted by overall population and segments colored by age category. It loads data from a remote CSV file using d3.csv, then builds the visualization with d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal for color encoding. The stacked positions are computed using d3.stack, while d3.axisBottom and d3.axisLeft render the axes. The chart includes a legend and uses an SVG rendering approach with conventional margins.

MMTClass

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

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

80% match

Loading thumbnail…

Grouped Radial Bar Chart

This grouped radial bar chart visualizes the population distribution across seven age brackets for six US states. Each state occupies a circular sector, divided into seven colored segments whose radial lengths represent population counts, with dashed circular gridlines and a legend for age categories. Built with D3 v3, it renders as SVG and animates each segment’s growth using `transition.attrTween` with an elastic easing. The code loads data from a JSON file, scales values with `d3.scale.linear`, and draws paths via `d3.svg.arc` and an axis using `d3.svg.axis`. State names appear as circular text along a path.

MMbrownshoes

80% match