Flow Density

<zyna-density>

Each time period is drawn as a vertical density silhouette (a violin), so reading left-to-right shows the whole distribution shifting, splitting, or tightening — everything a line-of-averages hides. Medians are connected by a flowing spine. Densities are estimated with an Epanechnikov kernel.

Demo

Response-time distribution · monthly

HTML 
<zyna-density
  y-label="Response time (ms)"
  data='[
    {"label":"Jan","values":[104,110,113,116,118,119, ...]},
    {"label":"Feb","values":[118,125,129,132,134,136, ...]},
    {"label":"Mar","values":[137,147,152,156,159,162, ...]},
    {"label":"Apr","values":[155,167,174,179,183,187, ...]}
  ]'
></zyna-density>
Attribute Type Default Description
dataJSON—Array of {label, values}. values is the raw sample array for that period; the KDE silhouette is estimated from it.
bandwidthnumberautoKDE smoothing. Defaults to Silverman's rule, computed per period.
y-minnumberautoy-axis lower bound. Defaults to the data extent.
y-maxnumberautoy-axis upper bound. Defaults to the data extent.
y-labelstring—Axis title drawn rotated on the left edge (e.g. Response time (ms)) so the shared value scale is labelled.
label-formatstring—D3-style number format for the y-axis tick labels (e.g. ,.0f).
colorstringvar(--zyna)Accent for the silhouettes and median spine.
themedark | lightdarkControls label colour scheme.
heightnumberautoExplicit height in px. Auto-derived from width when omitted.

Usage Tips

  • Pass raw samples, not summaries — the chart's job is to show the shape a mean would hide.
  • Lock y-min/y-max across charts so the silhouettes are directly comparable.
  • A larger bandwidth smooths the shape; a smaller one exposes bumps and bimodality.
  • Watch the median spine drift left-to-right — where it moves against a widening silhouette is the interesting bit.