Stratum

<zyna-stratum>

Geological core-sample grid. Each entity is a row; within a row, one butted segment per time period whose height encodes the value. Because the encoding is height and not colour, the strata profile stays readable in monochrome genres — and cross-entity patterns emerge as the columns line up across the grid.

Demo

Displacement by region · monthly

HTML 
<zyna-stratum
  x-labels='["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug"]'
  data='[
    {"label":"WEST",  "values":[12,18,24,31,28,22,19,15]},
    {"label":"SOUTH", "values":[8,9,11,14,20,27,33,29]},
    {"label":"EAST",  "values":[22,19,16,13,11,9,8,10], "color":"#4BBFA8"},
    {"label":"NORTH", "values":[5,6,8,10,9,7,6,5]}
  ]'
></zyna-stratum>
Attribute Type Default Description
dataJSON—Array of {label, values, color?}. values is one number per time period; each cell's height encodes its value.
x-labelsJSON—Array of period labels along the x-axis. An empty string "" suppresses that label (matching <zyna-line>).
scalerow | globalrowHeight normalisation. row gives each entity its own scale (compare the shape within a row); global makes heights comparable across rows.
colorstringvar(--zyna)Fallback accent for rows without their own color.
themedark | lightdarkControls text and seam colour scheme.
heightnumberautoExplicit height in px. Auto-derived from the row count when omitted.
label-formatstring—D3-style number format applied to values in the accessibility summary (e.g. ,.0f).

Usage Tips

  • Keep the values arrays the same length across rows so columns align — the vertical read is the whole point.
  • Use scale="row" to compare the shape of each entity's trend; switch to scale="global" when absolute magnitude across entities matters.
  • Because height carries the data, Stratum keeps working under monochrome genres like Phosphor — colour is decoration, not encoding.
  • Set "" on intermediate x-labels entries to thin out a crowded axis without dropping the columns.
  • Best for 3–8 entities over 6–16 periods. Beyond that, reach for a heatmap or small multiples.