Skip to main content
100%

Radial Stacked Bar

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

This radial variant of a stacked bar chart arranges age-group segments around a circular axis, with bar length encoding population counts. It uses d3.scaleBand for the angular axis and a custom radial scale for the radius, rendering the 51 U.S. states’ age distributions as concentric, ring-like bars. The code notes that while visually striking, radial bars are harder to compare than standard linear stacked bars, and recommends this form only when the ordinal axis is cyclical. The data here is not cyclical, making the radial encoding somewhat gratuitous. The visualization uses D3 v4 with SVG, and includes a custom d3-scale-radial module for radial scaling. The chart is interactive-free and rendered at 960x960, with a legend implied by the CSV columns.

AI-generated description

This is a radial variant of my earlier example stacked bar chart. While pretty, you probably don’t want to use this version because it’s easier to compare the bars when they share an aligned (linear) axis. You might consider this form if your ordinal axis is cyclical, such as weeks of the year, and you want to show a cyclical pattern. This example’s data is not cyclical, so the use of a radial form here is rather gratuitous!

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/6fead6d1378d6df5ae77bb6a719afcb2'>Radial Stacked Bar</a>

gpl-3.0 Licensed

Similar vizzes