Resonance

<zyna-resonance>

Radial deviation from the mean. The centre ring is the mean; each item is a spoke whose length encodes its distance from it — solid and filled above, dashed and hollow below. A faint dashed ring marks ±1σ, so at a glance you see what is signal and what is noise. Perfect conformity collapses to the centre.

Demo

Regional price index vs national mean

HTML 
<zyna-resonance
  unit="percent"
  data='[
    {"label":"North","value":112}, {"label":"East","value":98},
    {"label":"South","value":134}, {"label":"West","value":76},
    {"label":"Central","value":103},{"label":"Coast","value":121}
  ]'
></zyna-resonance>
Attribute Type Default Description
dataJSON—Array of {label, value}. Each item becomes one spoke.
meannumbercomputedExplicit centre value. Defaults to the mean of the data.
unitpercent | absolutepercentDeviation label units on the extreme spokes: percent of the mean, or the raw difference.
colorstringvar(--zyna)Accent for above-mean spokes. Below-mean spokes use the danger token.
themedark | lightdarkControls text and ring colour scheme.
heightnumberautoExplicit height in px. Auto-derived from width when omitted.
label-formatstring—D3-style number format for absolute deviation labels (e.g. ,.0f).

Usage Tips

  • Set an explicit mean to compare against a target or benchmark rather than the dataset average.
  • Use unit="percent" for relative spread and unit="absolute" when the raw units matter.
  • The ±1σ ring is the reference: spokes inside it are ordinary variation, spokes well past it are the outliers to explain.
  • Best for 6–14 items. With fewer, a lollipop reads more directly.
  • Because direction is encoded by fill and dash — not just colour — the above/below split survives monochrome genres.