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

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

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

カスタムチャートを使用すると、パネルに読み込むデータとその可視化を制御できます。

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

まず、スクリプト内でデータをログします。ハイパーパラメーターのように、トレーニング開始時に一度だけ設定する単一の値には [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では、カスタムチャートを設定します。作成されたチャートがどのように表示されるかは、[ライブレポート](https://app.wandb.ai/demo-team/custom-charts/reports/Custom-Charts--VmlldzoyMTk5MDc)で確認できます。

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

可視化するデータをログしたら、プロジェクトページに移動し、**`+`** ボタンをクリックして新しいパネルを追加し、**Custom Chart** を選択します。[ワークスペース](https://app.wandb.ai/demo-team/custom-charts)を開きながら進めることもできます。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-wbdocs-1882/g98EkbyZbbkyMi8o/images/app_ui/create_a_query.png?fit=max&auto=format&n=g98EkbyZbbkyMi8o&q=85&s=8b1534f3b741cb00543ff3b6c09f9419" 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()` をログしたキーを入力します。上記のコードスニペットでは `my_custom_table` です。[サンプルノートブック](https://bit.ly/custom-charts-colab) では、キーは `pr_curve` と `roc_curve` です。

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

クエリがこれらの列に読み込まれると、Vega フィールドのドロップダウンメニューで選択できるようになります。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-wbdocs-1882/gvIZGkH-i0H7aNZQ/images/app_ui/set_vega_fields.png?fit=max&auto=format&n=gvIZGkH-i0H7aNZQ&q=85&s=64486923bcecaf97b6ce8b88088db689" 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="3-customize-the-chart">
  ## 3. チャートをカスタマイズする
</div>

かなり見栄えがよくなってきましたが、散布図ではなく折れ線グラフに切り替えてみます。この組み込みチャートの Vega spec を変更するには、**Edit** をクリックします。[ワークスペース](https://app.wandb.ai/demo-team/custom-charts) を見ながら進めてください。

<Frame>
  <img src="https://mintcdn.com/wb-21fd5541-wbdocs-1882/Sb3q6Nn7xrh8SB3Y/images/general/custom-charts-1.png?fit=max&auto=format&n=Sb3q6Nn7xrh8SB3Y&q=85&s=da8012c8942a5915bf5a17cf3a635212" 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-wbdocs-1882/g98EkbyZbbkyMi8o/images/app_ui/customize_vega_spec_for_pr_curve.png?fit=max&auto=format&n=g98EkbyZbbkyMi8o&q=85&s=30ccb341e1f171bb8f11949c6f8fa823" alt="PR曲線のVega spec" width="2070" height="1244" data-path="images/app_ui/customize_vega_spec_for_pr_curve.png" />
</Frame>

これをこのプロジェクト内の別の場所でも使えるプリセットとして保存するには、ページ上部の **Save as** をクリックします。結果は次のようになります。ROC 曲線もあわせて表示しています。

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

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

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

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

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

1. Workspace または Report で新しい Custom Chart パネルを作成します (「Custom Chart」可視化を追加します) 。右上の「Edit」ボタンをクリックすると、任意の組み込みパネルタイプをベースに Vega spec を編集できます。
2. その組み込みの Vega spec を、私の [Vega による複合ヒストグラム用 MVP コード](https://gist.github.com/staceysv/9bed36a2c0c2a427365991403611ce21) に置き換えます。メインタイトル、軸タイトル、入力ドメイン、そのほかの詳細は、この Vega spec を [Vega 構文を使って](https://vega.github.io/) 直接変更できます (colors を変えたり、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** をクリックして、プロットを完成させます。

ごく短時間の experiment で得られた結果は次のとおりです。1000件の例だけで1エポックトレーニングすると、ほとんどの画像が植物ではないことには非常に高い確信を示す一方で、どの画像が動物かもしれないかについては非常に不確かなモデルになります。

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

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