> ## Documentation Index
> Fetch the complete documentation index at: https://wb-21fd5541-docs-1917.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-1917/CB9tJSsSFnrt6bwh/images/app_ui/line_plot_example.png?fit=max&auto=format&n=CB9tJSsSFnrt6bwh&q=85&s=cd0574c49029a9df56a8595d64a30eda" 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="単一メトリクスの折れ線グラフ">
    [自動 Workspace](/ja/models/app/features/panels#workspace-modes) では、ログされた各メトリクスごとに単一メトリクスの折れ線グラフが自動的に作成されます。次の step に従って、自動 Workspace から削除した折れ線グラフを再度追加するか、手動 Workspace に折れ線グラフを追加します。

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

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

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

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

    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>このオプションをオンにすると、その式に一致する新たにログされたメトリクスに対して単一メトリクスのプロットは作成されません。代わりに、この複数メトリクス プロットにのみ含まれます。</Note>
    6. **Create \<number> panels** をクリックします。

    ### 複数メトリクスの正規表現について

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

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

    このセクションでは、複数メトリクス パネルを使って実験結果を分析する方法をいくつか紹介します。

    **レイヤーやモデル コンポーネント間でメトリクスを比較する**
    各レイヤーのメトリクスごとに個別のパネルを作成する代わりに、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 メトリクスに一致します

    **特定のメトリクスのバリエーションに一致させる**
    必要なメトリクスだけに一致させるには、OR を使用します。たとえば、非キャプチャグループ `(?:layer_0|layer_10)_loss` は、最初と 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」を選択すると、グラフに平均化された値が表示されます。

以下は、平均化する前のグラフです。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-1917/CB9tJSsSFnrt6bwh/images/app_ui/demo_precision_lines.png?fit=max&auto=format&n=CB9tJSsSFnrt6bwh&q=85&s=fe601b7512b8ec6536e57d31f479da94" 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-1917/CB9tJSsSFnrt6bwh/images/app_ui/demo_average_precision_lines.png?fit=max&auto=format&n=CB9tJSsSFnrt6bwh&q=85&s=ffb47ba6cb9f85f9d74160685967f025" 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>

`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-1917/J9MWPMly2QejZKBH/images/app_ui/visualize_nan.png?fit=max&auto=format&n=J9MWPMly2QejZKBH&q=85&s=02edd4450d7e9a0f1130b022dbc5a299" 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>

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-1917/J9MWPMly2QejZKBH/images/app_ui/visualization_add.gif?s=7a0c042890e1570cb16f85dfca6b69fa" 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 のデフォルトの色では不便なことがあります。そのような場合に備えて、wandb では色を手動で変更する方法が 2 つ用意されています。

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

    <Frame>
      <img src="https://mintcdn.com/wb-21fd5541-docs-1917/CB9tJSsSFnrt6bwh/images/app_ui/line_plots_run_table_random_colors.png?fit=max&auto=format&n=CB9tJSsSFnrt6bwh&q=85&s=f6e7b5e134356d76465a04ca353e8543" 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-1917/CB9tJSsSFnrt6bwh/images/app_ui/line_plots_run_table_color_palette.png?fit=max&auto=format&n=CB9tJSsSFnrt6bwh&q=85&s=b80b7ae0a03acc2d4d1c2a123b5e588d" 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-1917/J9MWPMly2QejZKBH/images/app_ui/plot_style_line_plot_legend.png?fit=max&auto=format&n=J9MWPMly2QejZKBH&q=85&s=88dd378bd668324b2824df5a54a9a8e8" 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 軸を切り替えることができます。以下は、steps から相対時間、さらに実時間へ切り替える例です。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-docs-1917/CB9tJSsSFnrt6bwh/images/app_ui/howto_use_relative_time_or_wall_time.gif?s=1c33c3e13753dfcd31a35db6f6c53503" 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-1917/J9MWPMly2QejZKBH/images/app_ui/line_plots_zoom.gif?s=7e5bda8b17f9b184169af670fd47885d" 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-1917/CB9tJSsSFnrt6bwh/images/app_ui/demo_hide_legend.gif?s=3185d3c0e70c0c61b7c5408e563a6960" 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/)を参照してください。