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

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

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

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

​

データを W&B にログする

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

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"])}
  )

データテーブルをログする簡単なサンプルノートブックをお試しください。次のstepでは、カスタムチャートを設定します。作成されたチャートがどのように表示されるかは、ライブreportで確認できます。

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

​

クエリを作成する

クエリは、カスタム チャートがどのログ済みデータを読み込むかを指定します。可視化するデータをログしたら、projectページに移動し、+ ボタンをクリックして新しいパネルを追加し、Custom Chart を選択します。ワークスペースを開きながら進めることもできます。

​

クエリを追加する

1. summary をクリックし、historyTable を選択して、run の履歴からデータを取得する新しいクエリを設定します。
2. wandb.Table() をログしたキーを入力します。前のコードスニペットでは custom_data_table です。サンプルノートブック では、キーは pr_curve と roc_curve です。summaryTable、historyTable、および tableKey の詳細については、GraphQL クエリを構築する を参照してください。

​

Vega フィールドを設定する

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

• x-axis: runSets_historyTable_r (再現率)
• y-axis: runSets_historyTable_p (適合率)
• color: runSets_historyTable_c (クラスラベル)

​

チャートをカスタマイズする

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

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

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

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

​

おまけ: 複合ヒストグラム

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

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

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

1. Workspace または report に新しいカスタム チャート パネルを作成します (Custom Chart 可視化を追加します) 。右上の Edit をクリックすると、任意の組み込みパネル タイプを起点に Vega spec を変更できます。
2. その組み込みの Vega spec を、Vega で記述した複合ヒストグラムのスターター コード に置き換えます。メイン タイトル、軸タイトル、入力ドメイン、そのほかの詳細は、この Vega spec 内で直接 Vega 構文を使用して変更できます。たとえば、色を変更したり、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 エポック トレーニングすると、ほとんどの画像は植物ではないと高い確信を持つ一方で、どの画像が動物かについては不確かなモデルが得られます。