Figures & graphs / Follow an ordered measure
Line plot
Trace a measure across time or position while keeping gaps and observation boundaries explicit.
Discrete accumulation as a step plot
Where do statements accumulate in the file?
HTML
<figure class="plate plate-wide">
<p><strong>Where do statements accumulate in the file?</strong></p>
<div class="draw-wrap" role="region" aria-label="Cumulative statement plot" tabindex="0">
<svg class="draw" style="--dd-draw-width:768px" viewBox="0 0 768 320" role="img" aria-label="Cumulative statements referencing cache_data by source line: line 0, zero; line 100, one; line 200, six; line 300, eleven; line 400, thirteen. Steps occur at the 13 observed call sites.">
<text class="draw-note" x="64" y="24">Cumulative statements</text>
<path class="plot-grid" d="M64 62H720 M64 174H720"/>
<path class="plot-axis" d="M64 48V244H720"/>
<text class="draw-note" x="48" y="249" text-anchor="end">0</text>
<text class="draw-note" x="48" y="179" text-anchor="end">5</text>
<text class="draw-note" x="48" y="67" text-anchor="end">13</text>
<path class="plot-line" d="M64 244 H211.60V230 H260.80V216 H285.40V202 H296.88V188 H303.44V174 H319.84V160 H398.56V146 H405.12V132 H418.24V118 H457.60V104 H551.08V90 H583.88V76 H613.40V62 H720"/>
<circle class="plot-point" cx="64" cy="244" r="4"/>
<text class="draw-value" x="64" y="230" text-anchor="middle">0</text>
<text class="draw-note" x="64" y="270" text-anchor="middle">0</text>
<circle class="plot-point" cx="228" cy="230" r="4"/>
<text class="draw-value" x="228" y="216" text-anchor="middle">1</text>
<text class="draw-note" x="228" y="270" text-anchor="middle">100</text>
<circle class="plot-point" cx="392" cy="160" r="4"/>
<text class="draw-value" x="392" y="146" text-anchor="middle">6</text>
<text class="draw-note" x="392" y="270" text-anchor="middle">200</text>
<circle class="plot-point" cx="556" cy="90" r="4"/>
<text class="draw-value" x="556" y="76" text-anchor="middle">11</text>
<text class="draw-note" x="556" y="270" text-anchor="middle">300</text>
<circle class="plot-point" cx="720" cy="62" r="4"/>
<text class="draw-value" x="720" y="48" text-anchor="middle">13</text>
<text class="draw-note" x="720" y="270" text-anchor="middle">400</text>
<text class="draw-note" x="392" y="304" text-anchor="middle">Source line · MySQL.php</text>
</svg>
</div>
<figcaption>The steps show observed call sites, not runtime activity or a time series.
<span class="plate-source">WordPress SQL catalog snapshot · cache_data · SimplePie/Cache/MySQL.php. 13 statements at lines 90, 120, 135, 142, 146, 156, 204, 208, 216, 240, 297, 317, 335.</span>
</figcaption>
</figure>An unrecorded interval stays open
Two snapshots do not establish the path between them.
HTML
<figure class="plate plate-wide">
<p><strong>Two snapshots do not establish the path between them.</strong></p>
<div class="draw-wrap" role="region" aria-label="Coverage with an unrecorded interval" tabindex="0">
<svg class="draw" style="--dd-draw-width:768px" viewBox="0 0 768 296" role="img" aria-label="Coverage before: 68.97 percent. During the change: not recorded. After: 96.67 percent. No line connects the two snapshots.">
<text class="draw-note" x="64" y="24">Source coverage (%)</text>
<path class="plot-grid" d="M64 56H704 M64 140H704"/>
<path class="plot-axis" d="M64 48V224H704"/>
<text class="draw-note" x="48" y="61" text-anchor="end">100</text>
<text class="draw-note" x="48" y="145" text-anchor="end">50</text>
<text class="draw-note" x="48" y="229" text-anchor="end">0</text>
<rect class="plot-missing" x="288" y="56" width="192" height="168"/>
<text class="plot-missing-label" x="384" y="132" text-anchor="middle">Not recorded</text>
<text class="draw-note" x="384" y="154" text-anchor="middle">No interpolation</text>
<circle class="plot-before" cx="160" cy="108.14" r="6"/>
<text class="draw-value" x="160" y="88" text-anchor="middle">68.97%</text>
<circle class="plot-point" cx="608" cy="61.6" r="6"/>
<text class="draw-value" x="608" y="42" text-anchor="middle">96.67%</text>
<text class="draw-label" x="160" y="252" text-anchor="middle">Before</text>
<text class="draw-label" x="384" y="252" text-anchor="middle">During change</text>
<text class="draw-label" x="608" y="252" text-anchor="middle">After</text>
</svg>
</div>
<figcaption>Leave the interval open when no measurements exist. The horizontal positions identify phases, not elapsed time.
<span class="plate-source">bison-parser 3.8.2 task report · 2026-02-11. Only before (20/29) and after (29/30) coverage are reported.</span>
</figcaption>
</figure>Classes & attributes
| Class / attribute | Purpose |
|---|---|
.draw-wrap / .draw | Fixed-size SVG in a scrolling region. Add tabindex="0", role="region", and an accessible name when it scrolls. |
.plot-line / .plot-point | An authored path and its observations. Straight segments interpolate; horizontal and vertical segments form a step plot. |
.plot-line-alt / .plot-point-alt | A dashed line and hollow points for a secondary series. Pair with direct series names; color alone is insufficient. |
.plot-missing / .plot-missing-label | A dashed missing interval and its visible explanation. Do not draw a connecting path across it. |
.plot-axis / .plot-grid / .draw-note | Numeric axes, guides and unit labels; coordinate spacing must reflect the data domain. |
Usage notes
Use a numeric, ordered horizontal domain, not category rank. Map y = bottom − (value − minimum) / (maximum − minimum) × plot height. Label a nonzero axis minimum explicitly. Use steps for counts that change at events; avoid smoothing that implies unobserved values. Split paths around missing samples, and retain isolated points. Include exact observations in a table or caption. The example uses source position, not invented timestamps.
Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.