図とグラフ / 分布を読む
Histogram
空の区間や標本数も含め、数値区間ごとの観測値の分布を示します。
等幅区間と観測されたゼロ
SQL文は呼び出し元に均等に分布しているか？
HTML
<figure class="plate plate-wide">
<p><strong>SQL文は呼び出し元に均等に分布しているか？</strong></p>
<div class="draw-wrap" role="region" aria-label="呼び出し元ごとのSQL文数の分布" tabindex="0">
<svg class="draw" style="--dd-draw-width:768px" viewBox="0 0 768 320" role="img" aria-label="6件の呼び出し元をSQL文数で分類。1〜2文は5件、3〜4文は0件、5〜6文は0件、7〜8文は1件。区間幅はすべて2文です。">
<text class="draw-note" x="64" y="24">区間内の呼び出し元 · 観測数6件</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件</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件</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件</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件</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">呼び出し元ごとのSQL文 · 両端を含む整数区間</text>
</svg>
</div>
<figcaption>5件の呼び出し元に各1文、1件に8文があります。空の区間は欠測ではなく、観測されたゼロです。<span class="plate-source">WordPress SQLカタログのスナップショット · cache_data · SimplePie/Cache/MySQL.php。全6呼び出し元、13文。区間幅は2文。この小さな標本は一つのテーブルだけを表します。</span>
</figcaption>
</figure>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.draw-wrap / .draw | 等倍固定のSVG。狭いコンテナではラベルを縮めずスクロールします。 |
.plot-bin | 区間を示す長方形。等幅の区間を隣接させ、件数軸のゼロから高さを取ります。 |
.plot-zero | 観測された空の区間は、ゼロのラベルとともに軸上に残します。 |
.plot-axis / .plot-grid / .draw-value | 軸・補助線・正確な区間内件数。両軸と区間境界の扱いを示します。 |
.plate / .plate-source | キャプション、標本数、選択条件、データの出典。 |
使い方の注意
数値の分布にはHistogram、名前付きカテゴリにはBar chartを使います。ゼロも含め全区間を数値順に並べます。等幅なら件数で表せますが、不等幅では面積が頻度を表すよう度数密度が必要です。境界が両端を含むか半開区間か、標本数はいくつかを明示します。欠測は件数を示して除外し、ゼロにしません。測定がなければEmptyを使います。この6件の例は一つのテーブルであり、プロジェクト全体ではありません。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。