TanStack
Examples

Distributions

Distribution charts answer where observations lie, how widely they vary, and whether groups differ in shape or rank. The right encoding depends on whether the reader needs familiar bins, compact summaries, cumulative probability, or the detailed shape of each group.

Choose the comparison

Reader questionStart with
How often do values fall within fixed ranges?Histogram
How do center, spread, and outliers compare across groups?Boxplot
What proportion of observations is at or below each value?Empirical cumulative distribution
How do several smoothed distribution shapes compare?Violin
Must every observation remain visible?A beeswarm or strip layout

Binning, quantiles, density estimation, and collision layout are data preparation. TanStack Charts renders their explicit output through ordinary marks.

Inspect frequency with a histogram

A histogram groups quantitative observations into intervals. Keep thresholds stable when comparing revisions or groups; otherwise a changed binning decision can look like a changed distribution.

The prepared rows should carry each bin's lower bound, upper bound, and count or proportion. Render those intervals with Bar and Rect Marks. The Scales and D3 concept explains how the application chooses thresholds and reductions.

Compare compact summaries

A boxplot summarizes quartiles, a median, whiskers, and optional outliers. It is compact and comparable, but it does not reveal modes, gaps, or sample size on its own.

Prepare one summary row per group and a separate outlier dataset. Compose rectangles, rules, ticks, and dots instead of expecting one opaque boxplot primitive. Marks and Layering covers this composition model.

Preserve every rank with an ECDF

An empirical cumulative distribution shows the proportion of observations at or below each observed value. It avoids bin-width decisions and supports direct percentile comparisons.

Use a step curve because the empirical proportion changes at observations, not continuously between them. State whether ties share a rank and format the vertical axis as a proportion.

Compare detailed group shapes

A violin mirrors a prepared density around each category. It reveals modes and shape that a boxplot can hide, but its appearance depends on density bandwidth and sampling.

Render the mirrored interval with an area mark and add the median as an independent link and dot. Document the density method in the surrounding product when its parameters affect interpretation.

Production checks

  • Use counts when sample size matters and proportions when comparing groups of different sizes.
  • Keep thresholds and density parameters consistent across comparable views.
  • Show sample size or raw observations when a summary could hide sparse data.
  • Supply exact values through tooltips, tables, or textual summaries; see Tooltips and Focus and Accessibility.
  • Use facets when each group needs its own complete distribution view. See Faceting and Composition.

Area channel details are in Line and Area Marks.