図とグラフ / 二つの観測を比較する
Comparison plot
両端の値と分母を見せながら、変更前後の差を同じ軸で比較します。
分母が変わる比較
ソースカバレッジはどれだけ変化したか？
HTML
<figure class="plate plate-wide">
<p><strong>ソースカバレッジはどれだけ変化したか？</strong></p>
<div class="draw-wrap" role="region" aria-label="ソースカバレッジの比較" tabindex="0">
<svg class="draw" style="--dd-draw-width:768px" viewBox="0 0 768 220" role="img" aria-label="ソースカバレッジ：変更前20/29単位、68.97%。変更後29/30単位、96.67%。27.70ポイント増加。分母も変わっています。">
<text class="draw-note" x="48" y="24">ソースカバレッジ（%）· 0〜100</text>
<path class="plot-grid" d="M48 56V160 M216 56V160 M384 56V160 M552 56V160 M720 56V160"/>
<path class="plot-axis" d="M48 160H720"/>
<path class="plot-span" d="M511.45 116H697.6"/>
<circle class="plot-before" cx="511.45" cy="116" r="6"/>
<circle class="plot-point" cx="697.6" cy="116" r="6"/>
<text class="draw-value" x="503" y="74" text-anchor="end">変更前 · 68.97%</text>
<text class="draw-note" x="503" y="94" text-anchor="end">20 / 29単位</text>
<text class="draw-value" x="720" y="44" text-anchor="end">変更後 · 96.67%</text>
<text class="draw-note" x="720" y="64" text-anchor="end">29 / 30単位</text>
<text class="draw-note" x="48" y="184" text-anchor="middle">0</text>
<text class="draw-note" x="216" y="184" text-anchor="middle">25</text>
<text class="draw-note" x="384" y="184" text-anchor="middle">50</text>
<text class="draw-note" x="552" y="184" text-anchor="middle">75</text>
<text class="draw-note" x="720" y="184" text-anchor="middle">100</text>
</svg>
</div>
<figcaption>ソースカバレッジは27.70ポイント上昇。白抜きは変更前、塗りは変更後です。<span class="plate-source">bison-parser 3.8.2の作業レポート · 2026-02-11。変更前20/29、変更後29/30単位。分母が1増え、1単位は未カバーです。</span>
</figcaption>
</figure>クラスと属性
| クラス / 属性 | 用途 |
|---|---|
.draw-wrap / .draw | スクロールするラッパーと等倍固定のSVG。--dd-draw-widthにviewBoxの幅をpxで指定し、その寸法で作図します。 |
.plot-axis / .plot-grid | 軸と補助線。draw-noteの文字で範囲と単位を示します。 |
.plot-span | 同じ指標の二つの観測値を結ぶ線。差を表し、実測の軌跡は表しません。 |
.plot-before / .plot-point | 変更前は白抜き、変更後は塗りの印。両方に直接ラベルと正確な値を添えます。 |
.draw-value / .draw-note / .plate-source | 数値ラベル、補足の文字、スナップショットや測定条件。 |
使い方の注意
対応する二観測値をダンベル図で比較します。x = 左端 + (値 − 最小値) / (最大値 − 最小値) × 作図幅で、全行を同じ範囲に置きます。カバレッジの軸にはゼロを含めます。分母の変化を明示し、割合の差はパーセントポイントで示します。減少は問題を意味するとき以外は中立の色にし、赤は警告と不在のために残します。
作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。