> ## Documentation Index
> Fetch the complete documentation index at: https://wb-21fd5541-docs-sandboxes-integrations-placement.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

> メトリクスを可視化し、軸をカスタマイズして、折れ線グラフで複数の線を比較する

# 折れ線グラフの概要

`wandb.Run.log()` で時間の経過に沿ってログされたメトリクスは、デフォルトで折れ線グラフとして表示されます。折れ線グラフでは、複数のメトリクスのプロット、カスタム軸の計算などを行えます。

このページでは、[Workspace](/ja/models/track/workspaces) で折れ線グラフを作成、設定、管理する方法を説明します。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-sandboxes-integrations-placement/hS4tNv5jzsGoCezc/images/app_ui/line_plot_example.png?fit=max&auto=format&n=hS4tNv5jzsGoCezc&q=85&s=143e95099d20d0bf7f525af53c75ad0e" alt="折れ線グラフの例" width="1838" height="622" data-path="images/app_ui/line_plot_example.png" />
</Frame>

<Tip>
  [CoreWeave Kubernetes Service (CKS)](https://docs.coreweave.com/products/cks) のクラスター上で実行される [run](/ja/models/runs) では、インテグレーションが有効になっている場合、[CoreWeave Mission Control](https://www.coreweave.com/mission-control) がコンピュートインフラストラクチャーを監視できます。エラーが発生すると、W\&B はプロジェクトの Workspace 内にある run のプロットにインフラストラクチャー情報を表示します。前提条件と詳細については、[CoreWeave のインフラストラクチャーアラートを可視化する](/ja/models/runs/infrastructure-alerts) を参照してください。
</Tip>

<div id="add-a-line-plot">
  ## 折れ線グラフを追加する
</div>

以下のセクションでは、単一または複数のメトリクスの折れ線グラフを作成する方法を説明します。

<Tabs>
  <Tab title="単一メトリクスの折れ線グラフ">
    [automatic workspace](/ja/models/app/features/panels#workspace-modes) では、W\&B がログされた各メトリクスに対して単一メトリクスの折れ線グラフを自動的に作成します。次の手順に従って、自動 Workspace で削除した折れ線グラフを再追加するか、手動 Workspace に折れ線グラフを追加します。

    1. Workspace にアクセスします。
    2. 折れ線グラフを Workspace 全体に追加するには、パネル検索フィールド付近のコントロールバーで **Add panels** をクリックします。

       セクションに直接追加する場合は、セクションの **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**+ Add panels** をクリックします。
    3. デフォルト設定で単一メトリクスのプロットを追加するには、**Quick panel builder** をクリックします。
       1. **Single-key panels** タブで、メトリクスにカーソルを合わせて **Add** をクリックします。追加する各パネルについてこの手順を繰り返します。
       2. **Create \[NUMBER] panels** をクリックします。
    4. カスタムの折れ線グラフを追加するには、**Line plot** をクリックします。
       1. 対応するタブを使用して、折れ線グラフのデータ、グループ化、表示設定を構成します。詳細については、[Edit line plot settings](#edit-line-plot-settings) を参照してください。
       2. X 軸または Y 軸に計算式を追加するには、**Expressions** をクリックします。[JavaScript regular expressions](https://www.w3schools.com/js/js_regexp.asp) がサポートされています。
    5. 追加するパネルのタイプ (チャートなど) を選択します。パネルの設定詳細が、選択したデフォルト値とともに表示されます。
    6. 必要に応じて、パネルとその表示設定をカスタマイズします。設定オプションは、選択したパネルのタイプによって異なります。各パネルタイプのオプションの詳細については、[Line plots](/ja/models/app/features/panels/line-plot/) または [Bar plots](/ja/models/app/features/panels/bar-plot/) を参照してください。
    7. **Apply** をクリックします。
  </Tab>

  <Tab title="複数メトリクスの折れ線グラフ">
    <Note>
      この機能はプレビュー版で、招待された場合にのみ利用できます。利用登録を希望する場合は、[support](mailto:support@wandb.com) または担当の AISE にお問い合わせください。
    </Note>

    [自動 Workspace](/ja/models/app/features/panels#workspace-modes) では、W\&B がログされた各メトリクスに対して単一メトリクスの折れ線グラフを自動的に作成します。このセクションでは、JavaScript の正規表現で定義した複数のメトリクスをまとめて表示する 1 つの折れ線グラフを作成する方法を説明します。必要に応じて、多数の単一メトリクスのグラフを 1 つの複数メトリクスのグラフに統合することもできます。これにより、多数のメトリクスがログされている Workspace のパフォーマンスを改善し、Runs の結果を分析しやすくできます。

    1. Workspace にアクセスします。
    2. 折れ線グラフをグローバルに追加するには、パネル検索フィールドの近くにあるコントロールバーで **Add panels** をクリックします。

       代わりに折れ線グラフをセクションに直接追加するには、セクションの **action (<Icon icon="ellipsis" iconType="solid" />)** メニューをクリックし、**+ Add panels** をクリックします。
    3. **Quick panel builder** をクリックし、**Multi-metric panels** タブをクリックします。
    4. **Regex** に、[JavaScript regular expression](https://www.w3schools.com/js/js_regexp.asp) 形式の式を入力します。入力に合わせて UI が更新され、どのメトリクスがその式に一致するかが表示されます。デフォルトでは、グラフ名にはそのグラフで使用している正規表現が表示されます。このグラフには、今後ログされるメトリクスも含め、その式に一致するすべてのメトリクスの線が表示されます。
    5. 複数メトリクスのグラフを作成する際に、重複する単一メトリクスのパネルを必要に応じて削除するには、**Clean up auto-generated panels** を切り替えます。どのパネルがクリーンアップされるかはプレビューで確認できます。<Note>このオプションをオンにすると、W\&B はその式に一致する新たにログされたメトリクスに対して単一メトリクスのグラフを作成しません。代わりに、そのメトリクスはこの複数メトリクスのグラフにのみ表示されます。</Note>
    6. **Create \[NUMBER] panels** をクリックします。

    ### 複数メトリクスの正規表現

    複数メトリクスの折れ線グラフでは、メトリクス名の一致に [JavaScript regular expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions) を使用します。以下のセクションでは、一般的なユースケースを説明し、キャプチャグループが W\&B が作成するパネルにどのような影響を与えるかなど、正規表現の仕組みについてさらに詳しく説明します。

    #### 一般的なユースケース

    以下の例では、実験結果の分析に役立つ複数メトリクスのパネルの使い方をいくつか示します。

    **レイヤーやモデルコンポーネント間でメトリクスを比較する**
    各レイヤーのメトリクスごとに個別のパネルを作成する代わりに、それらを 1 つのパネルにまとめて表示できます。たとえば、この Python のサンプルコードのように、`layer_0_loss`、`layer_1_loss`、`layer_2_loss` のような一貫した命名でメトリクスをログする場合は、正規表現 `layer_\d+_loss` を使用して、すべてのレイヤーの損失を 1 つのグラフに表示できます。

    ```python theme={null}
    with wandb.init(project="multi-layer-model") as run:
        for step in range(100):
            run.log({
                "layer_0_loss": loss_0,
                "layer_1_loss": loss_1,
                "layer_2_loss": loss_2,
                "step": step
            })
    ```

    **接頭辞または接尾辞で関連するメトリクスをグループ化する**
    共通の命名パターンを持つメトリクスをまとめて一致させます。例:

    * `train_.*` は、`train_loss`、`train_accuracy`、`train_f1_score` など、すべてのトレーニングメトリクスに一致します。
    * `.*_accuracy` は、`train_accuracy`、`val_accuracy`、`test_accuracy` のように、異なるデータセットにまたがる accuracy メトリクスに一致します。

    **特定のメトリクスのバリエーションに一致させる**
    必要なメトリクスだけに一致させるには、オルタネーションを使用します。たとえば、非キャプチャグループ `(?:layer_0|layer_10)_loss` は、1 層目と 10 層目の損失にのみ一致し、中間の層は除外します。

    #### キャプチャグループ

    正規表現内のキャプチャグループによって、複数メトリクスのパネルがどのように作成されるかが決まります。これを想定していないと、この挙動はわかりにくい場合があります。

    * **キャプチャグループを使うと複数のパネルが作成される**
      正規表現にキャプチャグループを構成する丸括弧が含まれている場合、UI はそのグループでキャプチャされた各一意の値ごとに個別のパネルを作成します。

      たとえば、式 `(layer_0|layer_10)_loss` にはキャプチャグループが含まれているため、2 つの別々のパネルが作成されます。

      1. `layer_0` に一致するメトリクスのパネル
      2. `layer_10` に一致するメトリクスのパネル

    * **非キャプチャグループを使うとメトリクスは同じパネルにまとまる**
      複数の選択肢に一致させつつ別々のパネルを作成したくない場合は、`?:` 構文の非キャプチャグループを使用します。式 `(?:layer_0|layer_10)_loss` は前の例と同じメトリクスに一致しますが、それらを 1 つのパネルにまとめて表示します。

    違いは次のとおりです。

    * `(layer_0|layer_10)_loss` - レイヤーごとに 1 つずつ、合計 2 つのパネルを作成します。
    * `(?:layer_0|layer_10)_loss` - 両方のレイヤーをまとめて表示する 1 つのパネルを作成します。

    これにより、分析内容に応じて適切な方法を柔軟に選べます。メトリクスを別々のパネルに分けたい場合はキャプチャグループを使用します。メトリクスを 1 つのプロット上でまとめて比較したい場合は非キャプチャグループを使用します。
  </Tab>
</Tabs>

<div id="edit-line-plot-settings">
  ## 折れ線グラフの設定を編集する
</div>

以下のセクションでは、個別のラインプロットパネル、セクション内のすべてのラインプロットパネル、またはWorkspace内のすべてのラインプロットパネルの設定を編集する方法を説明します。折れ線グラフの設定の詳細は、[折れ線グラフのリファレンス](/ja/models/app/features/panels/line-plot/reference)を参照してください。

<div id="individual-line-plot">
  ### 個別の折れ線グラフ
</div>

折れ線グラフの個別設定は、セクションまたはWorkspaceの折れ線グラフ設定よりも優先されます。折れ線グラフをカスタマイズするには、次の手順に従います。

1. Workspaceにアクセスします。
2. パネルにマウスカーソルを合わせ、歯車アイコンをクリックします。
3. 表示されたドロワーで、設定を編集するタブを選択します。
4. **Apply** をクリックします。

折れ線グラフの設定は、次のタブに分かれています。

* **Data**: x軸、y軸、サンプリング method、スムージング、外れ値、チャートタイプを設定します。
* **Grouping**: プロット内でrunをグループ化して集計するかどうかと、その方法を設定します。
* **Chart**: パネルと軸のタイトルを指定し、凡例の表示と位置を設定します。
* **Legend**: パネルの凡例の見た目と内容をカスタマイズします。
* **Expressions**: 軸のカスタム計算式を追加します。

各設定の詳細については、[折れ線グラフのリファレンス](/ja/models/app/features/panels/line-plot/reference)を参照してください。

<div id="all-line-plots-in-a-section">
  ### セクション内のすべての折れ線グラフ
</div>

セクション内のすべての折れ線グラフのデフォルト設定をカスタマイズして、折れ線グラフのWorkspace設定を上書きするには:

1. Workspace にアクセスします。
2. セクションの歯車アイコンをクリックして、設定を開きます。
3. 表示されたドロワーで **Data** または **Display preferences** タブを選択し、セクションのデフォルト設定を行います。各 **Data** 設定の詳細については、[折れ線グラフのリファレンス](/ja/models/app/features/panels/line-plot/reference)を参照してください。各表示設定の詳細については、[セクションの Layout を設定する](../#configure-section-layout)を参照してください.

<div id="all-line-plots-in-a-workspace">
  ### Workspace 内のすべての折れ線グラフ
</div>

Workspace 内のすべての折れ線グラフのデフォルト設定をカスタマイズするには、次の手順に従います。

1. Workspace にアクセスします。
2. 歯車の **Settings** ラベルが付いた Workspace 設定アイコンをクリックします。
3. **Line plots** をクリックします。
4. 表示されたドロワーで **Data** または **Display preferences** タブを選択し、Workspace のデフォルト設定を構成します。
   * 各 **Data** 設定の詳細については、[折れ線グラフのリファレンス](/ja/models/app/features/panels/line-plot/reference)を参照してください。
   * 各 **Display preferences** セクションの詳細については、[Workspace の表示設定](../#configure-workspace-layout)を参照してください。Workspace レベルでは、折れ線グラフのデフォルトの **Zooming** 動作を構成できます。この設定では、x軸キーが一致する折れ線グラフ間でズームを同期するかどうかを制御します。デフォルトではオフになっています。

<div id="visualize-average-values-on-a-plot">
  ## プロット上で平均値を可視化する
</div>

複数の異なるExperimentsがあり、それらの値の平均をプロットで確認したい場合は、表のグループ化機能を使用できます。run テーブルの上にある「Group」をクリックし、「All」を選択すると、グラフに平均化された値が表示されます。

次の画像は、平均化前のグラフを示しており、runごとに1本の線があります。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-sandboxes-integrations-placement/MAxbgoUtLbv2P8uu/images/app_ui/demo_precision_lines.png?fit=max&auto=format&n=MAxbgoUtLbv2P8uu&q=85&s=3520faea7e8d68d7f2f718a2c50f5d6b" alt="個々の精度の線" width="849" height="440" data-path="images/app_ui/demo_precision_lines.png" />
</Frame>

次の画像は、線をグループ化して複数のrunにまたがる平均値を示したグラフです。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-sandboxes-integrations-placement/MAxbgoUtLbv2P8uu/images/app_ui/demo_average_precision_lines.png?fit=max&auto=format&n=MAxbgoUtLbv2P8uu&q=85&s=435ade86cbdd27fcd44a220c1059202e" alt="平均化された精度の線" width="852" height="441" data-path="images/app_ui/demo_average_precision_lines.png" />
</Frame>

<div id="visualize-nan-value-on-a-plot">
  ## プロット上でNaN値を可視化する
</div>

`NaN` を返す損失のように、ときどき未定義になるメトリクスをトラッキングする場合は、それらをログすると、W\&B の折れ線グラフに表示されます。`wandb.Run.log()` を使うと、PyTorch テンソルを含む `NaN` 値も折れ線グラフにプロットできます。たとえば、次のようになります。

```python theme={null}
with wandb.init() as run:
    # NaN 値をログする
    run.log({"test": float("nan")})
```

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-sandboxes-integrations-placement/hS4tNv5jzsGoCezc/images/app_ui/visualize_nan.png?fit=max&auto=format&n=hS4tNv5jzsGoCezc&q=85&s=a99d865e46df9709249cfde74fb40d34" alt="NaN 値の処理" width="936" height="688" data-path="images/app_ui/visualize_nan.png" />
</Frame>

<div id="compare-multiple-metrics-on-one-chart">
  ## 1つのチャートで複数のメトリクスを比較する
</div>

1 つ以上の Runs の複数のメトリクスを並べて比較するには、Workspace に **Run comparer** パネルを追加します。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-sandboxes-integrations-placement/hS4tNv5jzsGoCezc/images/app_ui/visualization_add.gif?s=035b418b4a4a80daf16ae8b32a12dc2d" alt="可視化パネルを追加している様子" width="3866" height="2574" data-path="images/app_ui/visualization_add.gif" />
</Frame>

1. Workspace にアクセスします。
2. ページの画面右上にある **Add panels** ボタンを選択します。
3. 表示されたドロワーで、**評価** ドロップダウンを展開します。
4. **Run comparer** を選択します。

<div id="change-the-colors-of-the-lines">
  ## 線の色を変更する
</div>

比較の際に run のデフォルトの色が役に立たない場合、W\&B では色を変更する方法を 2 つ用意しています。run テーブルから変更する方法と、チャートの凡例設定から変更する方法です。

<Tabs>
  <Tab title="run テーブルから">
    各 run には、初期化時にデフォルトでランダムな色が割り当てられます。

    <Frame>
      <img src="https://mintcdn.com/wb-21fd5541-docs-sandboxes-integrations-placement/hS4tNv5jzsGoCezc/images/app_ui/line_plots_run_table_random_colors.png?fit=max&auto=format&n=hS4tNv5jzsGoCezc&q=85&s=5ce49f4700e971acdee8a31479a3e127" alt="run に割り当てられたランダムな色" width="272" height="174" data-path="images/app_ui/line_plots_run_table_random_colors.png" />
    </Frame>

    いずれかの色をクリックするとカラーパレットが表示され、そこで好みの色を手動で選択できます。

    <Frame>
      <img src="https://mintcdn.com/wb-21fd5541-docs-sandboxes-integrations-placement/hS4tNv5jzsGoCezc/images/app_ui/line_plots_run_table_color_palette.png?fit=max&auto=format&n=hS4tNv5jzsGoCezc&q=85&s=eed69d962cbaea0d08de026a9a3fb243" alt="カラーパレット" width="261" height="393" data-path="images/app_ui/line_plots_run_table_color_palette.png" />
    </Frame>
  </Tab>

  <Tab title="チャートの凡例設定から">
    1. Workspace にアクセスします。
    2. 設定を編集するパネルにマウスカーソルを合わせます。
    3. 表示される鉛筆アイコンを選択します。
    4. **Legend** タブを選択します。

    <Frame>
      <img src="https://mintcdn.com/wb-21fd5541-docs-sandboxes-integrations-placement/hS4tNv5jzsGoCezc/images/app_ui/plot_style_line_plot_legend.png?fit=max&auto=format&n=hS4tNv5jzsGoCezc&q=85&s=df91aeedfbc1dd8bdd00a66c38b409f7" alt="折れ線グラフの凡例設定" width="2682" height="1166" data-path="images/app_ui/plot_style_line_plot_legend.png" />
    </Frame>
  </Tab>
</Tabs>

<div id="visualize-on-different-x-axes">
  ## 異なる x 軸で可視化する
</div>

既定では、折れ線グラフでは x 軸としてトレーニング step が使用されますが、別の視点でデータを表示するために別の x 軸に切り替えることができます。実験に要した実際の時間を確認したい場合や、実験を実行した日付を確認したい場合は、x 軸を切り替えることができます。以下の例は、steps から相対時間、さらに実時間へ切り替える例です。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-sandboxes-integrations-placement/hS4tNv5jzsGoCezc/images/app_ui/howto_use_relative_time_or_wall_time.gif?s=a559dd75e61cdabdcef8482368bb339a" alt="x 軸の時間オプション" width="3348" height="1880" data-path="images/app_ui/howto_use_relative_time_or_wall_time.gif" />
</Frame>

カスタム x 軸を使用するには、y 軸をログするのと同じ call で、そのメトリクスを `wandb.Run.log()` にログします。次に例を示します。

```python theme={null}
with wandb.init() as run:
    for i in range(100):
        run.log({"accuracy": acc, "custom_x": i * 10})
```

詳細は、[ログ軸をカスタマイズする](/ja/models/track/log/customize-logging-axes#customize-log-axes)を参照してください。

<div id="zoom">
  ## ズーム
</div>

折れ線グラフの特定の領域をより詳しく確認するには、両方の軸を同時にズームインできます。長方形になるようにクリック＆ドラッグすると、縦方向と横方向を同時にズームできます。これにより、x軸とy軸のズーム範囲が変更されます。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-sandboxes-integrations-placement/hS4tNv5jzsGoCezc/images/app_ui/line_plots_zoom.gif?s=09b79fc229a0e78464354f50fbd8d307" alt="プロットのズーム機能" width="1056" height="473" data-path="images/app_ui/line_plots_zoom.gif" />
</Frame>

<div id="hide-chart-legend">
  ## チャートの凡例を非表示にする
</div>

チャートの凡例が、プロットに使いたいスペースを取っている場合は、非表示にできます。次のトグルを切り替えるだけで、折れ線グラフの凡例をオフにできます。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-sandboxes-integrations-placement/MAxbgoUtLbv2P8uu/images/app_ui/demo_hide_legend.gif?s=b3c8059a2725d8eed70382367dcc0ee8" alt="凡例を非表示にするトグル" width="2720" height="1246" data-path="images/app_ui/demo_hide_legend.gif" />
</Frame>

<div id="create-a-run-metrics-notification">
  ## run メトリクス通知を作成する
</div>

[Automations](/ja/models/automations/)を使用すると、指定した条件を run メトリクスが満たしたときにチームに通知できます。オートメーションでは、Slack チャンネルへの投稿や webhook の実行が可能です。

折れ線グラフから、そのグラフに表示されているメトリクスの[run メトリクス通知](/ja/models/automations/automation-events/#run-events)を作成できます。

1. Workspace にアクセスします。
2. パネルにカーソルを合わせて、ベルのアイコンをクリックします。
3. 基本設定または高度な設定のコントロールを使用してオートメーションを設定します。たとえば、run フィルターを適用してオートメーションの対象範囲を制限したり、絶対しきい値を設定したりできます。

詳しくは、[Automations](/ja/models/automations/)を参照してください。