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

> W&B UI でカスタム チャート機能を使用するためのチュートリアル

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

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

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

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

カスタム チャートで何かを可視化するには、まず表示したいデータを run でログしておく必要があります。ハイパーパラメーターなど、トレーニング開始時に設定する単一のポイントには [wandb.Run.config](/ja/products/wandb/track/config) を使用します。時間の経過とともに変化する複数のポイントには [wandb.Run.log()](/ja/products/wandb/track/log) を使用し、カスタムの 2D 配列は `wandb.Table()` でログします。データポイントは、ログするキーごとに最大 10,000 個までにすることをお勧めします。

```python theme={"system"}
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)を試してデータ表をログし、次のステップでカスタム チャートを設定しましょう。作成されるチャートの例は、[ライブ report](https://forge.coreweave.com/wandb/demo-team/custom-charts/reports/Custom-Charts--VmlldzoyMTk5MDc) で確認できます。

データをログしたら、そのデータをカスタム チャート パネルに取り込めます。

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

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

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/create_a_query.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=7de15b04e03f6d5241668813c8acf0eb" alt="空のカスタム チャート" width="2204" height="968" data-path="products/wandb/_media/create_a_query.png" />
</Frame>

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

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/products/wandb/app/features/custom-charts#build-the-graphql-query)を参照してください。

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

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

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/set_vega_fields.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=f13d8ae9a1b7f355fd4406f73225e5d7" alt="クエリ結果から列を取り込んで Vega フィールドを設定する" width="2572" height="950" data-path="products/wandb/_media/set_vega_fields.png" />
</Frame>

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

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

デフォルトの可視化は出発点として便利ですが、Vega spec を編集すれば、チャート タイプの変更、タイトルの追加、外観の調整を行えます。散布図から折れ線グラフに切り替えるには、**Edit** をクリックして、この組み込みチャートの Vega spec を変更します。[カスタム チャートのデモ ワークスペース](https://app.wandb.ai/demo-team/custom-charts)で実際に操作しながら進めることもできます。

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/custom-charts-1.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=cb1a024420ba0891235b50ee8808c8ba" alt="カスタム チャートの選択" width="416" height="67" data-path="products/wandb/_media/custom-charts-1.png" />
</Frame>

Vega spec を次のように更新して、可視化をカスタマイズします。

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

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/customize_vega_spec_for_pr_curve.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=d6e3c64534a743b9bfcfcdfc156c8968" alt="PR 曲線の Vega spec" width="2070" height="1244" data-path="products/wandb/_media/customize_vega_spec_for_pr_curve.png" />
</Frame>

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

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/custom-charts-2.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=cdb78d5bc6622f0ef0d4e6625cb1b5e7" alt="PR 曲線のチャート" width="1114" height="422" data-path="products/wandb/_media/custom-charts-2.png" />
</Frame>

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

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

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

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/composite_histograms.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=6c61e0079eac029ac7e8dfcfeb9b1838" alt="複合ヒストグラム" width="1518" height="608" data-path="products/wandb/_media/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 つのヒストグラム ビン セット (`red_bins` と `blue_bins`) に割り当てられるようになります。たとえば、赤のビンには `animal` クラスの予測スコアを、青のビンには `plant` を選択できます。
4. プレビューに表示されるプロットが思いどおりになるまで、Vega spec とクエリを繰り返し変更できます。完了したら、上部の **Save as** をクリックし、カスタム プロットに名前を付けて再利用できるようにします。最後に **Apply from panel library** をクリックすると、プロットが完成します。

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

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/custom-charts-3.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=53c6d303b12aba54a06ed4155b8f0ec1" alt="チャートの設定" width="1646" height="600" data-path="products/wandb/_media/custom-charts-3.png" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/coreweave-dbfa0e8d/3Dv_sw2eg8feUJlx/products/wandb/_media/custom-charts-4.png?fit=max&auto=format&n=3Dv_sw2eg8feUJlx&q=85&s=b4e672c01040da9d6ef1712713ca12c7" alt="チャートの結果" width="1358" height="1274" data-path="products/wandb/_media/custom-charts-4.png" />
</Frame>