Figures & graphs / Compare two observations
Comparison plot
Show a before-and-after difference on one axis, with both endpoints and denominators visible.
A change with a different denominator
How far did source coverage move?
HTML
<figure class="plate plate-wide">
<p><strong>How far did source coverage move?</strong></p>
<div class="draw-wrap" role="region" aria-label="Source coverage comparison" tabindex="0">
<svg class="draw" style="--dd-draw-width:768px" viewBox="0 0 768 220" role="img" aria-label="Source coverage: before 20 of 29 units, 68.97 percent; after 29 of 30 units, 96.67 percent. Increase of 27.70 percentage points. The denominator changed.">
<text class="draw-note" x="48" y="24">Source coverage (%) · 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">Before · 68.97%</text>
<text class="draw-note" x="503" y="94" text-anchor="end">20 / 29 source units</text>
<text class="draw-value" x="720" y="44" text-anchor="end">After · 96.67%</text>
<text class="draw-note" x="720" y="64" text-anchor="end">29 / 30 source units</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>Source coverage rose by 27.70 percentage points. Hollow = before; filled = after.
<span class="plate-source">bison-parser 3.8.2 task report · 2026-02-11. Before: 20/29; after: 29/30 source units. The denominator grew by one; one unit remains uncovered.</span>
</figcaption>
</figure>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.draw-wrap / .draw | A scrolling wrapper and fixed-size SVG. Set --dd-draw-width to the viewBox width in px; author coordinates at that size. |
.plot-axis / .plot-grid | The axis and supporting guides. State the domain and units with draw-note text. |
.plot-span | The connector between two observations of the same measure. It expresses a difference, not a measured trajectory. |
.plot-before / .plot-point | Hollow before marker and filled after marker. Both need direct labels and exact values. |
.draw-value / .draw-note / .plate-source | Numeric labels, supporting type, and the snapshot or measurement conditions. |
Usage notes
Use a dumbbell for paired observations. Map x = left + (value − minimum) / (maximum − minimum) × plot width, using the same domain for every row. Include zero for percentage coverage. Name changes in denominator and use percentage points for the difference between percentages. For signed changes, keep decreases neutral unless they represent a problem; red is reserved for warnings and absence.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.