Figures & graphs / Read a distribution
Histogram
Show how observations fall into numeric bins, including empty intervals and sample size.
Equal-width bins with observed zeros
Are statements spread evenly across callers?
<figure class="plate plate-wide">
<p><strong>Are statements spread evenly across callers?</strong></p>
<div class="draw-wrap" role="region" aria-label="Statements per caller distribution" tabindex="0">
<svg class="draw" style="--dd-draw-width:768px" viewBox="0 0 768 320" role="img" aria-label="Six callers grouped by statements per caller. 1–2 statements: five callers; 3–4: zero; 5–6: zero; 7–8: one. All bins have width two statements.">
<text class="draw-note" x="64" y="24">Callers per bin · 6 callers observed</text>
<path class="plot-grid" d="M64 64H704 M64 136H704"/>
<path class="plot-axis" d="M64 48V244H704"/>
<text class="draw-note" x="48" y="249" text-anchor="end">0</text>
<text class="draw-note" x="48" y="141" text-anchor="end">3</text>
<text class="draw-note" x="48" y="69" text-anchor="end">5</text>
<rect class="plot-bin" x="64" y="64" width="160" height="180"/>
<text class="draw-value" x="144" y="50" text-anchor="middle">5 callers</text>
<text class="draw-note" x="144" y="272" text-anchor="middle">1–2</text>
<path class="plot-zero" d="M224 244h160"/>
<text class="draw-value" x="304" y="230" text-anchor="middle">0 callers</text>
<text class="draw-note" x="304" y="272" text-anchor="middle">3–4</text>
<path class="plot-zero" d="M384 244h160"/>
<text class="draw-value" x="464" y="230" text-anchor="middle">0 callers</text>
<text class="draw-note" x="464" y="272" text-anchor="middle">5–6</text>
<rect class="plot-bin" x="544" y="208" width="160" height="36"/>
<text class="draw-value" x="624" y="194" text-anchor="middle">1 caller</text>
<text class="draw-note" x="624" y="272" text-anchor="middle">7–8</text>
<text class="draw-note" x="384" y="304" text-anchor="middle">Statements per caller · inclusive integer bins</text>
</svg>
</div>
<figcaption>Five callers contain one statement each; one contains eight. Empty bins are observed zeros, not missing measurements.
<span class="plate-source">WordPress SQL catalog snapshot · cache_data · SimplePie/Cache/MySQL.php. All 6 callers, 13 statements; bin width: 2 statements. This small sample describes one table only.</span>
</figcaption>
</figure>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.draw-wrap / .draw | A fixed-size SVG. Narrow containers scroll without reducing label sizes. |
.plot-bin | An interval’s rectangle. Use adjacent equal-width bins on a count axis and start heights at zero. |
.plot-zero | An observed empty bin remains on the axis with an explicit zero label. |
.plot-axis / .plot-grid / .draw-value | Axis, guides and exact bin counts. Label both axes and the bin boundary convention. |
.plate / .plate-source | Caption, sample size, selection criteria and data source. |
Usage notes
Use a histogram for numeric distribution and Bar chart for named categories. Keep all bins in numeric order, including zeros. Equal-width bins allow counts; unequal widths require frequency density so area represents frequency. State inclusive or half-open boundaries and the observed sample size. Missing observations are excluded with an explicit count, never inserted as zeros; when none were measured, use Empty. This six-caller example describes one table, not the entire project.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.