> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wandb.ai/llms.txt
> Use this file to discover all available pages before exploring further.

> W&B UI のカスタム チャート機能の使い方を説明するチュートリアル

# チュートリアル: カスタム チャートを使用する

カスタム チャートを使用すると、パネルに読み込むデータと、その可視化方法の両方を制御できます。このチュートリアルでは、データをログし、クエリを作成し、チャートの Vega 仕様をカスタマイズして、結果を再利用できるよう保存する手順を説明します。既定のチャート タイプだけではなく、特定のデータに合わせて可視化を調整したいユーザーを対象としています。

このチュートリアルを終えると、project で動作するカスタム チャートを作成し、それをプリセットとして保存できるようになります。さらに、ご自身のデータに合わせて調整できる複合ヒストグラムも利用できます。

<div id="log-data-to-wb">
  ## データを W\&B にログする
</div>

カスタム チャートで何かを可視化する前に、表示したいデータを run にログする必要があります。ハイパーパラメーターのように、トレーニング開始時に一度だけ設定する単一の値には [wandb.Run.config](/ja/models/track/config/) を使用します。時間の経過に伴って記録する複数の値には [wandb.Run.log()](/ja/models/track/log/) を使用し、カスタムの 2D 配列は `wandb.Table()` でログします。ログする各キーについて、データポイントは最大 10,000 件までにすることを推奨します。

```python theme={null}
with wandb.init() as run: 

  # カスタムのデータ表をログする
  my_custom_data = [[x1, y1, z1], [x2, y2, z2]]
  run.log(
    {"custom_data_table": wandb.Table(data=my_custom_data, columns=["x", "y", "z"])}
  )
```

[データテーブルをログする簡単なサンプルノートブックをお試しください](https://bit.ly/custom-charts-colab)。次のstepでは、カスタムチャートを設定します。作成されたチャートがどのように表示されるかは、[ライブreport](https://app.wandb.ai/demo-team/custom-charts/reports/Custom-Charts--VmlldzoyMTk5MDc)で確認できます。

データをログしたので、カスタム チャート パネルに取り込む準備ができました。

<div id="create-a-query">
  ## クエリを作成する
</div>

クエリは、カスタム チャートがどのログ済みデータを読み込むかを指定します。可視化するデータをログしたら、projectページに移動し、**`+`** ボタンをクリックして新しいパネルを追加し、**Custom Chart** を選択します。[ワークスペース](https://app.wandb.ai/demo-team/custom-charts)を開きながら進めることもできます。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/ZDqxXQYvQVF43fU1/images/app_ui/create_a_query.png?fit=max&auto=format&n=ZDqxXQYvQVF43fU1&q=85&s=12a5238b280f7267a132aa9c28f03c9d" alt="空のカスタムチャート" width="2204" height="968" data-path="images/app_ui/create_a_query.png" />
</Frame>

<div id="add-a-query">
  ### クエリを追加する
</div>

1. `summary` をクリックし、`historyTable` を選択して、run の履歴からデータを取得する新しいクエリを設定します。
2. `wandb.Table()` をログしたキーを入力します。前のコードスニペットでは `custom_data_table` です。[サンプルノートブック](https://bit.ly/custom-charts-colab) では、キーは `pr_curve` と `roc_curve` です。**`summaryTable`**、**`historyTable`**、および **`tableKey`** の詳細については、[GraphQL クエリを構築する](/ja/models/app/features/custom-charts#build-the-graphql-query) を参照してください。

<div id="set-vega-fields">
  ### Vega フィールドを設定する
</div>

クエリの設定が完了したら、Vega フィールドのドロップダウンメニューを使って、ログした列をチャートの視覚エンコーディングにマッピングできます。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/UhAQoGpm-LvpH3-8/images/app_ui/set_vega_fields.png?fit=max&auto=format&n=UhAQoGpm-LvpH3-8&q=85&s=7361682df6416c191f77ac5288139963" alt="クエリ結果から列を取り込み、Vega フィールドを設定する" width="2572" height="950" data-path="images/app_ui/set_vega_fields.png" />
</Frame>

* **x-axis:** runSets\_historyTable\_r (再現率)
* **y-axis:** runSets\_historyTable\_p (適合率)
* **color:** runSets\_historyTable\_c (クラスラベル)

<div id="customize-the-chart">
  ## チャートをカスタマイズする
</div>

デフォルトの可視化は出発点として適していますが、Vega spec を編集することで、チャートのタイプを変更したり、タイトルを追加したり、見た目を調整したりできます。散布図から折れ線グラフに切り替えるには、**Edit** をクリックして、この組み込みチャートの Vega spec を変更してください。[ワークスペース](https://app.wandb.ai/demo-team/custom-charts)を見ながら進めます。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/88iR80mZ8tuFCZUU/images/general/custom-charts-1.png?fit=max&auto=format&n=88iR80mZ8tuFCZUU&q=85&s=697c5ba95464271ebf0fe599e71712c4" alt="カスタム チャートの選択" width="416" height="67" data-path="images/general/custom-charts-1.png" />
</Frame>

Vega spec を更新して可視化をカスタマイズします。

* プロット、凡例、X 軸、Y 軸にタイトルを追加します (各フィールドの "title" を設定します) 。
* "mark" の値を "point" から "line" に変更します。
* 使用していない "size" フィールドを削除します。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/ZDqxXQYvQVF43fU1/images/app_ui/customize_vega_spec_for_pr_curve.png?fit=max&auto=format&n=ZDqxXQYvQVF43fU1&q=85&s=3667d49e8bff3ae6b2bfbf45d2d68d4a" alt="PR 曲線の Vega spec" width="2070" height="1244" data-path="images/app_ui/customize_vega_spec_for_pr_curve.png" />
</Frame>

プリセットを保存すると、同じチャート設定を project 内の他のパネルでも再利用できます。この project 内の別の場所でも使えるプリセットとして保存するには、ページ上部の **Save as** をクリックしてください。結果は次のようになり、ROC 曲線も表示されます。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/88iR80mZ8tuFCZUU/images/general/custom-charts-2.png?fit=max&auto=format&n=88iR80mZ8tuFCZUU&q=85&s=be4c61d484b9fa0bb61611ca5bfb97a3" alt="PR 曲線のチャート" width="1114" height="422" data-path="images/general/custom-charts-2.png" />
</Frame>

<div id="bonus-composite-histograms">
  ## おまけ: 複合ヒストグラム
</div>

このセクションでは、Vega spec の編集に慣れたあとで何ができるかを示すために、より高度なカスタム チャートとして、同じビューに 2 つの分布を重ねて表示する複合ヒストグラムの作成方法を紹介します。

ヒストグラムは数値分布を可視化し、大規模なデータセットを理解するのに役立ちます。複合ヒストグラムでは、同じ bin 上に複数の分布を表示できるため、異なるモデル間や、1 つのモデル内の異なるクラス間で 2 つ以上のメトリクスを比較できます。たとえば、運転シーン内のオブジェクトを検出するセマンティック セグメンテーション モデルでは、accuracy と Intersection over Union (IoU) のどちらを最適化する方が効果的かを比較したり、異なるモデルが車 (データ内で大きく一般的な領域) と交通標識 (はるかに小さく、あまり一般的でない領域) をどの程度うまく検出できるかを確認したりできます。[デモ Colab](https://bit.ly/custom-charts-colab) では、生物 10 クラスのうち 2 クラスの信頼度スコアを比較できます。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/ZDqxXQYvQVF43fU1/images/app_ui/composite_histograms.png?fit=max&auto=format&n=ZDqxXQYvQVF43fU1&q=85&s=9f41a947f36a94db4d75aacc9cf4bdfd" alt="複合ヒストグラム" width="1518" height="608" data-path="images/app_ui/composite_histograms.png" />
</Frame>

独自のカスタム複合ヒストグラム パネルを作成するには、次の手順に従います。

1. Workspace または report に新しいカスタム チャート パネルを作成します (**Custom Chart** 可視化を追加します) 。右上の **Edit** をクリックすると、任意の組み込みパネル タイプを起点に Vega spec を変更できます。
2. その組み込みの Vega spec を、[Vega で記述した複合ヒストグラムのスターター コード](https://gist.github.com/staceysv/9bed36a2c0c2a427365991403611ce21) に置き換えます。メイン タイトル、軸タイトル、入力ドメイン、そのほかの詳細は、この Vega spec 内で直接 [Vega 構文を使用して](https://vega.github.io/)変更できます。たとえば、色を変更したり、3 つ目のヒストグラムを追加したりできます。
3. 右側パネルのクエリを変更して、wandb ログから正しいデータを読み込みます。`summaryTable` フィールドを追加し、対応する `tableKey` を `class_scores` に設定して、run によってログされた `wandb.Table` を取得します。これにより、`class_scores` としてログされた `wandb.Table` の列を使って、ドロップダウン メニューから 2 つのヒストグラムの bin セット (`red_bins` と `blue_bins`) を設定できます。たとえば、赤の bins には `animal` クラスの予測スコアを、青の bins には `plant` を選択できます。
4. プレビューに表示されるプロットが目的どおりになるまで、Vega spec とクエリを引き続き調整できます。完了したら、上部の **Save as** をクリックし、再利用できるようにカスタム プロットに名前を付けます。次に **Apply from panel library** をクリックして、プロットを完成させます。

以下は、短時間の実験で得られた結果の例です。1,000 件の例だけで 1 エポック トレーニングすると、ほとんどの画像は植物ではないと高い確信を持つ一方で、どの画像が動物かについては不確かなモデルが得られます。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/88iR80mZ8tuFCZUU/images/general/custom-charts-3.png?fit=max&auto=format&n=88iR80mZ8tuFCZUU&q=85&s=d702517b0ff53a3579dcc131aeed3794" alt="チャート設定" width="1646" height="600" data-path="images/general/custom-charts-3.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541/88iR80mZ8tuFCZUU/images/general/custom-charts-4.png?fit=max&auto=format&n=88iR80mZ8tuFCZUU&q=85&s=986352cb4140f0fd344332901449aa5f" alt="チャート結果" width="1358" height="1274" data-path="images/general/custom-charts-4.png" />
</Frame>