ns-ui

Stem And Leaf Live

A live stem-and-leaf plot: every arriving value flies in from a staging slot and drops into its tens-stem row, existing leaves shoulder-nudging aside to insert it in sorted order, so the distribution is built entirely from the digits of the data and every leaf is still an individually focusable record.

Use when the distribution matters but so does every individual record, since each leaf is that value's own digit and stays a focusable table cell rather than dissolving into a bar; pick histogram-live-grain instead when the sample is large enough that individual records stop being readable and a settling heap is the better read, or chart-bar-halftone when the buckets are fixed categories rather than derived from the data's own digits.

Install

npx shadcn add https://design.helpmarq.com/r/stem-and-leaf-live.json
  • data-viz
  • stem-and-leaf
  • distribution
  • live
  • table
  • latency
  • raw-data
  • accessibility

ns-ui / stem-and-leaf-live

checkout · response time
checkout · response time stem-and-leaf plot. 42 values, median 132.5ms, range 79ms to 231ms. Each row is a stem of ten ms; each leaf digit is one value's ones digit.
7079 ms · 1 value
8089 ms · 2 values
9099 ms · 5 values
100109 ms · 2 values
110119 ms · 4 values
120129 ms · 5 values
130139 ms · 8 values
140149 ms · 1 value
150159 ms · 5 values
160169 ms · 0 values
170179 ms · 0 values
180189 ms · 0 values
190199 ms · 3 values
200209 ms · 1 value
210219 ms · 2 values
220229 ms · 2 values
230239 ms · 1 value
n 42median 132.5ms · range 79–231msstem = tens
rolling window · 60 samples

every arrival types its ones digit into the row for its tens — hover or focus any leaf for the record behind it

Props

PropTypeDefaultDescription
recordsStemSiftRecord[]rolling window of raw samples, oldest first
unit?stringunit suffix for readouts and stem labels, e.g. "ms"
label?string
className?string