Skip to main content
カスタム チャートを使用すると、パネルに読み込むデータとその可視化方法の両方を制御できます。このチュートリアルでは、データのログ、クエリの作成、チャートの Vega spec のカスタマイズ、そして再利用のための結果の保存までの手順を説明します。デフォルトのチャート タイプでは不十分で、特定のデータに合わせて可視化を調整したいユーザーを対象としています。 このチュートリアルを完了すると、プリセットとして保存できるカスタム チャートが project 内で動作するようになります。さらに、独自のデータに合わせて調整できる複合ヒストグラムも作成できます。

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

カスタム チャートで何かを可視化するには、まず表示したいデータを run でログしておく必要があります。ハイパーパラメーターなど、トレーニング開始時に設定する単一のポイントには wandb.Run.config を使用します。時間の経過とともに変化する複数のポイントには wandb.Run.log() を使用し、カスタムの 2D 配列は wandb.Table() でログします。データポイントは、ログするキーごとに最大 10,000 個までにすることをお勧めします。
簡単なサンプル ノートブックを試してデータ表をログし、次のステップでカスタム チャートを設定しましょう。作成されるチャートの例は、ライブ report で確認できます。 データをログしたら、そのデータをカスタム チャート パネルに取り込めます。

クエリを作成する

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

クエリを追加する

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

Vega フィールドを設定する

クエリを設定したら、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” フィールドを削除します。
PR 曲線の Vega spec
プリセットとして保存すると、同じチャート設定を project 内の他のパネルでも再利用できます。この project 内の他の場所で使用できるプリセットとして保存するには、ページ上部の Save as をクリックします。結果は次のとおりです (ROC 曲線も併せて表示しています)。
PR 曲線のチャート

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

このセクションでは、より高度なカスタム チャートの例として、2 つの分布を同じビューに重ねて表示する複合ヒストグラムの作成方法を紹介します。Vega spec の編集に慣れると、どのようなことができるようになるかを示す例です。 ヒストグラムを使うと数値の分布を可視化でき、大規模なデータセットの理解に役立ちます。複合ヒストグラムは同じビン上に複数の分布を表示するため、異なるモデル間、またはモデル内の異なるクラス間で 2 つ以上のメトリクスを比較できます。たとえば、運転シーン内のオブジェクトを検出するセマンティック セグメンテーション モデルであれば、精度を最適化した場合と 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 つのヒストグラム ビン セット (red_bins と blue_bins) に割り当てられるようになります。たとえば、赤のビンには animal クラスの予測スコアを、青のビンには plant を選択できます。
  4. プレビューに表示されるプロットが思いどおりになるまで、Vega spec とクエリを繰り返し変更できます。完了したら、上部の Save as をクリックし、カスタム プロットに名前を付けて再利用できるようにします。最後に Apply from panel library をクリックすると、プロットが完成します。
以下は、短い実験で得られた結果の例です。1,000 件のサンプルで 1 エポックだけトレーニングしたモデルは、ほとんどの画像を植物ではないと確信している一方、どの画像が動物であるかについては判断に迷っています。
チャートの設定
チャートの結果
最終更新日 2026年9月30日