Skip to content
Demographic breakdowns

Dumbbell

One row per category with a connector between two endpoint dots — the visual gap between two series (men vs women, then vs now), with value labels and an optional ratio note. Use it when the distance between two values is the finding.

Theme
Installshow
viz add d3/stats/dumbbell-v1

Props

PropTypeDescription
dataDumbbellData{ rows: {label, left, right, note?}[], leftName?, rightName?, leftGroup?, rightGroup?, xLabel?, xDomain?, unit?, title?, subtitle?, source? }.

See full TypeScript interface on GitHub for all props.

Usageshow
TypeScript
import Dumbbell from '@/viz/components/d3/stats/dumbbell-v1';

Metadata

  • FrameworkD3 / SVG
  • CategoryDemographic breakdowns
  • Sourced3/stats/dumbbell-v1
dumbbell slope gap comparison d3

Dependencies

d3-scale