図とグラフ / 順序に沿って値をたどる

Line plot

欠測や観測範囲を明示し、時間や位置に沿った値の変化をたどります。

離散的な累積を階段で示す

プレビュー

ファイルのどこにSQL文が集まっているか？

段は観測された呼び出し箇所を示し、実行時の活動や時系列ではありません。WordPress SQLカタログのスナップショット · cache_data · SimplePie/Cache/MySQL.php。90、120、135、142、146、156、204、208、216、240、297、317、335行の13文。

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="cache_dataを参照するSQL文の累積：0行目で0、100行目で1、200行目で6、300行目で11、400行目で13。13箇所の呼び出し位置で段が上がります。">
      <text class="draw-note" x="64" y="24">累積SQL文数</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">ソース行 · MySQL.php</text>
    </svg>
  </div>
  <figcaption>段は観測された呼び出し箇所を示し、実行時の活動や時系列ではありません。<span class="plate-source">WordPress SQLカタログのスナップショット · cache_data · SimplePie/Cache/MySQL.php。90、120、135、142、146、156、204、208、216、240、297、317、335行の13文。</span>
  </figcaption>
</figure>

記録のない区間を空ける

プレビュー

二つの観測だけでは、その間の経路はわかりません。

測定のない区間は空けます。横位置は段階を表し、経過時間ではありません。bison-parser 3.8.2の作業レポート · 2026-02-11。変更前（20/29）と変更後（29/30）のカバレッジのみを報告しています。

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 296" role="img" aria-label="変更前68.97%、変更中は記録なし、変更後96.67%。二つの観測値を線で結んでいません。">
      <text class="draw-note" x="64" y="24">ソースカバレッジ（%）</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">記録なし</text>
      <text class="draw-note" x="384" y="154" text-anchor="middle">補間しない</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">変更前</text>
      <text class="draw-label" x="384" y="252" text-anchor="middle">変更中</text>
      <text class="draw-label" x="608" y="252" text-anchor="middle">変更後</text>
    </svg>
  </div>
  <figcaption>測定のない区間は空けます。横位置は段階を表し、経過時間ではありません。<span class="plate-source">bison-parser 3.8.2の作業レポート · 2026-02-11。変更前（20/29）と変更後（29/30）のカバレッジのみを報告しています。</span>
  </figcaption>
</figure>

クラスと属性

クラス / 属性	用途
`.draw-wrap / .draw`	スクロール領域内の等倍固定SVG。スクロールする場合はtabindex="0"、role="region"とアクセシブルな名前を付けます。
`.plot-line / .plot-point`	作成した経路と観測点。直線は補間を表し、水平・垂直の線分は階段図になります。
`.plot-line-alt / .plot-point-alt`	第二系列の破線と白抜きの点。系列名を直接添え、色だけに頼らないでください。
`.plot-missing / .plot-missing-label`	欠測区間を示す破線と説明。区間をまたぐ接続線は描きません。
`.plot-axis / .plot-grid / .draw-note`	数値軸・補助線・単位ラベル。座標間隔はデータの範囲を反映させます。

使い方の注意

横軸はカテゴリの順位ではなく、順序のある数値にします。y = 下端 − (値 − 最小値) / (最大値 − 最小値) × 作図高さで配置します。最小値がゼロでない軸は明示します。出来事ごとに増える件数は階段で示し、未観測の値を示唆する平滑化は避けます。欠測では線を分け、孤立した点も残します。正確な観測値を表かキャプションに記します。この例はソース位置を使い、架空の時刻は使いません。

作例はシステムの配色設定に従います。ヘッダーの◐で自動・ライト・ダークを試せます。

Storybookでバリエーションを見る ↗すべてのコンポーネント →