Skip to main content
100%

Sorting grouped bars

✓ Published0🌍 Public
EEE2dev
Last edited May 11, 2015
Created on Feb 24, 2015

This example shows how to sort grouped bar charts in two distinct ways: either the bars within each group can be sorted by value, or the groups themselves can be sorted alphabetically. The visualization uses D3.js version 3 to render an SVG with an ordinal x-scale for states and an inner ordinal scale for age categories, with a linear y-scale for population counts. The code loads data from a CSV file containing state population figures across age brackets, and it adjusts the domain of the x0 scale to sort states alphabetically, while the A1–A3 comments enable sorting individual bars within each state by their values.

AI-generated description

This shows how to adjust Mike Bostock's example of grouped bars such that you can separately sort the bars within groups or the groups themselves.

To separately sort the bars within groups see the comments A1 - A3. To sort the groups themselves see comment B1.

Similar vizzes