Skip to content
Demographic breakdowns

Demographic breakdowns

Three chart shapes (line, bar, dot) for showing one outcome across five demographic axes — Age, Education, Income, Race, Gender — from a single dataset shape. Includes the multi-panel composite for showing the same outcome on all five axes side-by-side with consistent scales.

5 variants
Theme

Tabbed line charts across the five demographic axes. One component renders all tabs from a single dataset.

Installshow
viz add recharts/generic/demographic-line-v1

No live preview — install to render

recharts/generic/demographic-bar-v1

Bar (with error bars)

Tabbed bar charts with error bars. Same Age/Education/Income/Race/Gender tab pattern as Line, in bar form.

Installshow
viz add recharts/generic/demographic-bar-v1

No live preview — install to render

recharts/generic/demographic-dot-v1

Dot (with error bars)

Tabbed dot plots with error bars. Cleaner than bars when categories are many or when the error bars are the main signal.

Installshow
viz add recharts/generic/demographic-dot-v1
Theme

Breakdown layout

Alternate layout of the same demographic-breakdown data — same five axes, different visual treatment.

Installshow
viz add recharts/generic/demographic-breakdown-v1
Theme

Multi-panel composite (Plot)

Observable Plot multi-panel breakdown — small charts arranged in a grid, each showing the same outcome on a different axis with consistent scales for cross-panel comparison.

Installshow
viz add plot/stats/demographic-panel-v1
Usageshow
TypeScript
import { DemographicLineChart } from '@/viz/components/recharts/generic/demographic-line-v1';

Metadata

  • FrameworkRecharts
  • CategoryDemographic breakdowns
  • Subcategorygeneric
  • Sourcerecharts/generic/demographic-line-v1
demographics tabbed line-chart bar-chart dot-plot error-bars

Dependencies

recharts