Histogram

A histogram bins a single measure and counts what falls in each bin. It answers a question averages hide: what does the distribution actually look like?

Latency, file size and score data all have long tails that a mean will happily conceal.


#When this is the right chart

  • Latency and performance data, which is never normally distributed.

  • File sizes, scores and any measure with outliers.

  • Before choosing an average, to check whether one is meaningful.


#What the data needs to look like

Field

Type

Value

Quantitative: the measure to bin

Bin

Set on the encoding, not in the data


#A worked example

Request latency, binned:

Histogram

The source, which you can paste into a new diagram and edit:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Request latency distribution",
  "width": 380,
  "height": 220,
  "data": {"values": [
    {"ms": 42}, {"ms": 55}, {"ms": 61}, {"ms": 63}, {"ms": 70}, {"ms": 71},
    {"ms": 74}, {"ms": 78}, {"ms": 80}, {"ms": 84}, {"ms": 88}, {"ms": 91},
    {"ms": 96}, {"ms": 99}, {"ms": 104}, {"ms": 112}, {"ms": 118}, {"ms": 130},
    {"ms": 145}, {"ms": 160}, {"ms": 190}, {"ms": 240}, {"ms": 310}, {"ms": 480},
    {"ms": 620}, {"ms": 910}
  ]},
  "mark": "bar",
  "encoding": {
    "x": {"field": "ms", "type": "quantitative", "bin": {"maxbins": 20}, "title": "Latency (ms)"},
    "y": {"aggregate": "count", "title": "Requests"}
  }
}

#A few things that catch people out

  • Bin width changes the story. Try two or three before settling on one.

  • Histogram bars touch; bar chart bars do not. The gap means categories.

  • A long tail is usually the finding. Do not truncate the axis to hide it.



Pick the chart for the question, not for the look.