Vega プロット

Quiver では、Vega または Vega ライブラリを使用して、完全にカスタマイズ可能なインタラクティブな可視化を作成できます。アイデアや例については、Vega ↗ および Vega ↗ のドキュメントを参照してください。

Vega とは

Vega と Vega を使用すると、可視化の外観と動作を記述する簡潔な JSON 仕様として、インタラクティブな可視化の設計を作成、保存、共有できます。Vega は、次のようなさまざまな可視化の設計をサポートしています。

• データの読み込み ↗ と変換 ↗
• スケール ↗
• 地図投影 ↗
• 軸 ↗
• 凡例 ↗
• 長方形、線、プロット記号などのグラフィカルマーク ↗

Vega は Vega を基盤とする高水準言語で、一般的な可視化をより簡潔かつ便利に作成できます。Vega の構文は Vega よりも読み書きやデバッグが容易なため、まず Vega から始めることを推奨します。Vega のオプションでは不十分な場合は、代わりに Vega の使用を検討してください。

Vega と Vega で作成した例を、以下の画像で確認できます。

Vega プロットを設定する

Vega プロットを設定するには、目的のカードにカーソルを合わせて可視化を選択し、ドロップダウンメニューで Vega プロットに移動するか、検索します。Vega プロットを選択すると、設定メニューが開きます。

エディターメニュー内で、Vega プロットまたは Vega プロットのどちらを設定するかを選択します。下図のように、テンプレートを選択ドロップダウンメニューには、バブルプロット、箱ひげ図、サンバーストプロットなど、一般的な可視化のテンプレートが用意されています。

Vega プロットのテンプレートを選択すると、選択したプロットに関連するパラメーターの入力画面が表示されます。パラメーターを変換テーブルのデータソースの列にマッピングして入力します。

テンプレートのパラメーターを入力したら、適用を選択して Vega プロットを生成します。テンプレートを適用すると、次のようになります。

• 空欄の項目には、パラメーター名がデフォルトとして使用されます。
• 入力済みのテンプレートによって、エディター内の現在の値が上書きされます。

データ入力を設定する

Vega プロットは、次のデータ入力を受け付けます。

• テーブルを変換する： 任意の変換テーブルを Vega プロットへの入力として使用できます。オブジェクトセットから Vega プロットを追加すると、元となる変換テーブルも分析の内容パネルに自動的に追加されます（ただし、キャンバスには追加されません）。
• 配列： 配列は、ARRAY_VALUES という名前の列を1列持つ変換テーブルとしてパースされます。

データセクションでは、次の形式でグローバル ID（$A など）を使用して、変換テーブルまたは配列の形式の表形式データを参照できます。

Copied!
1
2
3
4
{
    "data": { "values": $A }
    ...
}

たとえば、テーブル $A に name と id の2列がある場合、データは次のような仕様に解決されます。

Copied!
1
2
3
4
5
6
7
8
9
{
    "data": {
        "values": {
            { "name": "a", "id": 1},
            { "name": "b", "id": 2},
            { "name": "c", "id": 3}
        }
    }
}

変換テーブル内の特定の列を参照するには、構文 $A.column_name を使用します。この式は、列IDの文字列に解決されます。

Copied!
1
2
3
4
5
6
7
8
9
{
    "encoding": {
        "x": {
            "field": $A.column_x,
            "type": "quantitative",
        }
    }
    ...
}

分析の変数を使用する

Vega プロットでは、数値メトリックカードなどの Value Type も参照できます。たとえば、数値メトリックカードを使用して特定の値にしきい値線を設定するには、メトリックカードのグローバル ID を使用して、その値を参照します。

"encoding": {
    "y": { "datum": $C }
}
...

解決済みの Vega 仕様をプレビューする

解決済みの Vega 仕様を確認することで、Vega プロットの設定に関する問題をデバッグできます。プレビューを選択すると、解決済みの Vega を表示できます。

Vega プロットをほかのアプリケーションに埋め込む

Vega エディターには、Quiver ダッシュボードを使用して Vega プロットを Workshop に埋め込む際に便利な設定が2つあります。

• プロットの自動スケーリング： プロットの自動スケーリングを有効にすると、指定されたデータに基づいて、Vega プロットがカードのサイズに自動的に調整されます。
• デフォルトのスタイル： 自動サイズ調整とスタイルの設定を Vega 仕様に挿入し、プロットの外観を Quiver カードのスタイルに合わせます。無効にすると、Vega の可視化は公開されている Vega の Web サイト上のものと同じ外観になります。

AIP を使用して Vega プロットを設定する

AIP は、目的のプロットやプロットの変更内容を自然言語で説明するだけで、Vega プロットの設定を生成する支援ができます。作成または変更したいプロットを説明するだけで、AIP がプロンプトに基づいて提案を行い、エラーが発生しやすい JSON での Vega プロットの設定を簡略化できます。

目的の Vega プロットを説明する

AIP を使用するには、Vega プロットカードの右上にある AIP Configure を選択します。次に、プロンプトを入力し、設定を選択して、AIP が生成した提案を確認します。提案を受け入れるには、適用を選択します。AIP に別の提案を生成させたい場合は、プロンプトを編集してから再設定を選択します。

以下の例では、ユーザーは AIP に「散布図で ph とカフェインの関係を表示し、x 軸の13と y 軸の6の位置に赤い線を描画してください」というプロンプトを入力しています。AIP はこのプロンプトを使用して、対象となる2個の数値プロパティ（カフェインと pH 値）を含むプロットの設定を提案します。

AIP が提案した更新を受け入れるには、適用を選択します。Vega プロットには、更新された Vega 仕様に基づく可視化が表示されます。

既存のプロットを基に作成する

AIP は、プロンプトに含まれる抽象的な概念を認識して区別し、その情報を使用して Vega プロットの生成や変更を支援できます。たとえば、AIP は以前に生成されたプロットの特性への言及を利用できるため、既存のプロットを基に新たなプロットを作成できます。

以下の画像では、ユーザーは「プロット上の2本の線が点を4つの象限に分割しています。各象限を異なる色で色分けしてください」というプロンプトを入力しています。現在のプロットの設定には象限の定義や設定が含まれていませんが、AIP は垂直線と水平線によって区切られた領域が象限であることを認識します。

AIP は、ユーザーのプロンプトに沿って、元のプロットを基に目的のプロットを正確に生成します。

AIP Generate を使用して Vega プロットを作成する

AIP を使用して生成された Quiver の分析グラフには、Vega プロットを含めることができます。折れ線グラフや散布図などの Quiver 標準の可視化ではなく Vega プロットを生成するよう AIP に指示するには、AIP が「Vega プロット」を返す必要があることをプロンプトで明示します。たとえば、「Vega プロットを使用して、散布図でカフェインと ph の関係を表示してください」というプロンプトが適切です。

注：AIP 機能の利用可否は変更される場合があり、顧客によって異なる場合があります。

Vega の選択

Vega プロットの選択を設定する

Vega の選択は、インタラクティブな可視化を作成するための、強力で高度にカスタマイズ可能な機能です。Vega ライブラリーには選択 ↗のサポートが組み込まれており、Quiver の Vega プロットは、選択を変換テーブルとして出力するように設定できます。ユーザーは選択データを活用して、下流のカードをパラメーター化し、ドリルダウンワークフローを構築して、分析を続けることができます。Vega の選択の動作はオブジェクトセットプロットの選択とは異なり、セットアップには追加の手順が必要です。

Vega では、2種類の選択 ↗を通じてチャートを操作できます。

• ポイント選択：キャンバス上の単一のポイントを選択するか、Shift キーを押しながら複数のポイントを選択します。
• 間隔選択：ドラッグして、キャンバス上の長方形の領域を選択します。

すべての種類の Vega プロットが選択をサポートしているわけではありません。たとえば、箱ひげ図や信頼区間プロットはサポートしていません。選択をサポートしていることが確認されているプロットの種類については、以下の FAQ セクションを参照してください。

プロットの選択データを変換テーブルとして出力するには、次の手順を実行します。

1. Vega プロットカードの設定パネルを開き、選択オプションまでスクロールします。次に、ポイント選択の変換テーブルとしての出力を有効にすると間隔選択の変換テーブルとしての出力を有効にするのいずれか、または両方をオンにします。

2. Vega プロットの JSON エディターで、params フィールドに選択パラメーターを追加します。選択パラメーターの詳細については、Vega プロットのドキュメントを参照してください。

   1. パラメーター名は、ポイント選択では quiverDefaultClick、間隔選択では quiverDefaultBrush にする必要があります。

   2. type プロパティを、quiverDefaultClick では point、quiverDefaultBrush では interval に設定します。

   3. encodings プロパティに1つ以上のエンコーディング ↗を指定します。これらは、x、y、color など、選択の対象とするフィールドです。エンコーディングは、値の選択方法と出力される情報を決定します。

      

3. 選択すると、選択データを含むカードフッターが表示されます。出力選択を選択して、選択データを変換テーブルとして出力します。または、Vega プロットの次のアクションメニューを使用し、変換する > 新しい変換テーブルを選択します。

   • ポイント選択は、エンコーディングのフィールドと値のテーブルとして出力されます。各列はフィールドに対応し、各行は選択されたポイントを表します。
     
     
     
     

   2. 間隔選択は、フィールドが連続値の場合は間隔の境界の範囲（最小値、最大値）として、フィールドが離散値の場合は値の配列として出力されます。
      
      
      
      

カスタマイズした選択パラメーターの例

バブルプロットやヒートグリッドなど、一般的な可視化での選択設定の追加の例については、用意されている Vega プロットテンプレートを参照してください。これらのテンプレートは、設定エディターのテンプレートを選択ドロップダウンメニューにあります。

ポイント選択パラメーターの例

...
"params": [
  {
    "name": "quiverDefaultClick", // 点の選択パラメーターを定義します
    "select": {
      "type": "point",
      "encodings": ["x"] // "x" の値が同じ点をすべて選択します
    }
  }
],
"encodings": [
  "x": ...
  "y": ...
  "color": {
    "condition": [
      {
        "param": "quiverDefaultClick",
        "empty": false,
        "value": "orange" // 条件に応じて選択した点に色を付けます
      }
    ]
  },
]

...
"params": [
  {
    "name": "quiverDefaultClick",
    "select": {
      "type": "point",
      "encodings": ["color"] // "color" エンコーディングが同じデータをすべて選択します
    }
  }
]

間隔選択パラメーターの例

...
"params": [
  {
    "name": "quiverDefaultBrush",
    "select": {
      "type": "interval",
      "encodings": ["y"] // 区間選択を y 軸に限定します
    }
  }
]

ドリルダウンワークフローを構築する

Vega プロットの選択データを使用して、ドリルダウンワークフローを構築できます。このワークフローでは、チャートの選択がフィルターとして機能し、上流の選択に基づいたデータのサブセットで分析を続けることができます。次の手順では、ドリルダウンワークフローの構築方法を説明します。

1. 上記の手順に従って選択パラメーターを設定し、現在の選択を変換テーブルとして出力します。
   
   
   
   

2. 列を配列としてポップアウトを選択して、プロパティを配列に変換します。
   
   

3. 選択された値をフィルターパラメーターとして使用して、元の変換テーブルのコピー（または、変換テーブルの派生元であるルートオブジェクトセットのコピー）を絞り込みます。
   
   

4. これで、絞り込まれたテーブルは、上流のチャートの選択に基づいて動的に更新されます。
   
   

FAQ と制限事項

どの種類の Vega プロットでも選択を設定できますか？

すべての種類の Vega プロットが選択に対応しているわけではありません。Vega のドキュメントには、対応しているプロットの種類を網羅した一覧はありませんが、以下に一部を示します。

• 対応： 棒グラフ、散布図、ヒートグリッド、折れ線グラフ、円グラフ（ポイント選択のみ）、ウォーターフォールプロット（ポイント選択のみ）、地理座標の投影、GeoJSON マップ（ポイント選択のみ）
• 未対応： 箱ひげ図、信頼区間プロット

1つのチャート仕様内で複数の選択パラメーターを定義できますか？

各プロットで Quiver にデータを出力できる選択パラメーターは、ポイント選択パラメーター1個と区間選択パラメーター1個に限られます。これは Quiver による制限です。Vega では、名前が一意であれば複数のパラメーターを定義できますが、Quiver の変換テーブルとして出力されるのは、quiverDefaultClick および quiverDefaultBrush という名前のパラメーターのみです。

選択パラメーターのエンコーディング一覧に軸を追加したのに、その軸の一部を選択できません。原因は何ですか？

その軸の値が Vega 仕様内で集計されていないか確認してください。Vega は、Vega によって集計されたフィールドの選択に対応していません。たとえば、y エンコーディングフィールドに以下のスニペットのようなインライン集計が含まれている場合、ユーザーは y 軸の一部を選択できません。

"encodings": {
  "y": {
    "field": $C.field_y,
    "aggregate": "avg"
  },
  ...
}

y 軸で選択できるようにするには、Vega にデータを渡す前に、まず Quiver でデータを集計します（たとえば、ピボットテーブルを使用します）。

仕様はコンパイルできるのに、選択しようとすると Invalid data selection エラーが表示されるのはなぜですか？

以下を確認してください。

• すべての選択パラメーターで、encodings フィールドが空でないことを確認してください。選択情報を出力するには、各パラメーターで1個以上のエンコーディングを指定する必要があります。
• 区間選択の場合は、選択パラメーターで定義したエンコーディングに、軸以外のフィールドが含まれていないか確認してください。Vega は、color や shape など、軸以外のエンコーディングフィールドでの区間選択に対応していません。これらをエンコーディング配列から削除すると、エラーは解消されるはずです。

Vega プロットのオブジェクト数の上限

Quiver の Vega プロットには、50,000個のオブジェクトという上限があります。この上限を超えるデータセットを可視化する必要がある場合は、規模の制限がないオブジェクトセットチャートまたはデータセットチャートの使用を検討してください。