Skip to content
Time series

Time trends

Line charts for showing how a quantity changes over time. Six variants from generic to survey-flavored: a simple (year, value) series with optional confidence intervals, the GSS demographic-split chart with presidential-term reference areas, an indexed mode that rebases every series to 100 at a baseline year, a metadata-panel layout, a small-multiples grid, and an Observable Plot rendering.

6 variants
Theme

Generic Recharts single-series

A single-series, demographic-unaware Recharts time line. Use when you have one numeric series over time and no GSS-flavored extras.

Installshow
viz add recharts/generic/timeseries-line-v1
Theme

GSS time-trend

Survey-data flavor: demographic splits, 95% CI band toggle, presidential-term reference areas, end-of-line labels, identity-coded colors (Democrat blue, Republican red, Liberal blue, Conservative red). Used by every book chapter that shows a time-trend.

Installshow
viz add recharts/gss/timeseries-line-v1
Theme

Indexed (rebased to baseline=100)

Indexed time-series — every series rebased to 100 at a chosen baseline year so relative change is the visual signal, not absolute levels. Used for the book's §4.1 figure showing all seven GSS abortion scenarios indexed to 1977.

Installshow
viz add recharts/gss/timeseries-index-v1
Theme

With metadata panel

Line chart with error bars and a side metadata panel — variable name, units, source, n. Surfaces methodology alongside the chart rather than in a separate caption.

Installshow
viz add recharts/generic/timeseries-metadata-v1
Theme

Small-multiples (4 demographic axes)

Four-panel grid that shows the same outcome variable across four demographic axes on a shared y-axis. Composes the canonical chart's `compact={true}` mode inside the SmallMultiples grid wrapper. Used in the book to view one trend from four angles at once.

Installshow
viz add composite/gss/timeseries-small-multiples-v1
Theme

Observable Plot equivalent

An Observable Plot rendering of the same chart shape with demographic splits. Use when you prefer Plot's declarative model or want the SVG-first output for static export.

Installshow
viz add plot/gss/timetrend-demo-v1
Usageshow
TypeScript
import TimeseriesLineV1 from '@/viz/components/recharts/gss/timeseries-line-v1';

Metadata

  • FrameworkRecharts
  • CategoryTime series
  • Sourcerecharts/gss/timeseries-line-v1
time-series trend line-chart

Dependencies

rechartslucide-react

Used in data stories

Live ctzn.pub articles built with this chart shape.