Horizon Chart Recipe

Kenya life expectancy folded into blue and red Horizon bands around 55 years — Signed deviations folded into three compact area bands.

Minimal flow

Runnable: install ggaction and provide the named data array as plain row objects.

import { chart } from "ggaction";

const program = chart()
  .createCanvas()
  .createData({ values })
  .createAreaMark({ curve: "monotone" })
  .encodeHorizon({ x: "time", y: "value" })
  .createGuides();

You must decide

The ordered quantitative or temporal x field
The quantitative y field
A baseline when zero is not meaningful

The library infers

The current area target and source dataset when unambiguous
Three bands, shared automatic extent, and blue/red palettes
Immutable namespaced output data and ordinary closed path graphics
An x axis and x grid, without a misleading folded y axis or band legend

Use editHorizon({ bands, baseline, extent, palette }) to create a revised immutable result. Use resolve: "independent" only when group-local amplitude comparison is intentional.

Continue

Horizon tutorial · Encodings · Area marks