system.cssthe engine GitHub

Charts

Charts — the shelf Fixture-fed specimens of every sanctioned form. Furniture whispers, data speaks at --fg 1, text rides the type scale (foreignObject), hues assign by fixed index. Hover any mark for its number.

Cases by category

column bars · one series, one ink — the title is the legend
05001.00kBeer: 1.24kBeerWine: 610WineSpirits: 480SpiritsNA: 150NA

Top brands by CE

dot plot · Tufte's ranking form — table-legible, minimum ink, sorted
HopworksHopworks: 940940CascadiaCascadia: 720720Old MillOld Mill: 515515RiverbendRiverbend: 390390TidewaterTidewater: 260260SolsticeSolstice: 180180

CE by month

line + area · the endpoint carries the asked-for number
0500Jan: 310Feb: 285Mar: 402Apr: 388May: 520Jun: 610Jul: 590Aug: 645645JanMarMayJul

Share of cases by supplier

part-to-whole · the donut answers "how much of the whole"; for "which is bigger" use the dots →
Categorical color — the hue-shift ladder Series color is NEVER hard-coded: each series rides --hue-shift (+30° apiece) on the page's inherited --hue, so every chart and its legend re-theme as one family. The second row proves it — the SAME six swatches under a green surface hue.
series 1series 2series 3series 4series 5series 6
series 1series 2series 3series 4series 5series 6
2px gapSummit Imports: 820 (43%)Blue Heron: 560 (29%)Kestrel & Co: 340 (18%)Nightjar: 190 (10%)1.91k
no gapSummit Imports: 820 (43%)Blue Heron: 560 (29%)Kestrel & Co: 340 (18%)Nightjar: 190 (10%)1.91k
● Summit Imports · 820● Blue Heron · 560● Kestrel & Co · 340● Nightjar · 190

Same data, ranked

the dot-plot answer to the donut's question — usually the better chart
Summit ImportsSummit Imports: 820820Blue HeronBlue Heron: 560560Kestrel & CoKestrel & Co: 340340NightjarNightjar: 190190

Spend by program

horizontal bars · labels lead, values land at the bar's end
Tastings: $12.4kTastings$12.4kFestivals: $9.1kFestivals$9.1kSponsorships: $5.8kSponsorships$5.8kActivations: $3.2kActivations$3.2k

Weekly activity

heatmap · the calendar grid from Metrics, engine .bg cells — intensity IS --bg

Weekly activity

the calendar-heat specimen — intensity IS --bg
Mon Wed Fri
Less
More

Concurrency

sparkline · a line small enough to sit inside a stat tile
27 ▲ 4