Vega Plot

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

Vegaとは？

VegaおよびVega-Liteは、ビジュアライゼーションの外観と動作を記述する簡潔なJSON仕様の形式で、インタラクティブなビジュアライゼーションデザインを作成、保存、および共有できます。Vegaはさまざまなビジュアライゼーションデザインをサポートしています。たとえば：

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

Vega-Liteは、Vegaの上に構築された高レベルの言語で、一般的なビジュアライゼーションをより簡潔かつ便利に作成できます。Vega-Liteの構文はVegaよりも読みやすく、書きやすく、デバッグしやすいため、Vega-Liteから始めることをお勧めします。Vega-Liteのオプションが不十分な場合は、代わりにVegaを使用してください。

以下の画像では、VegaおよびVega-Liteで作成されたいくつかの例を見ることができます。

Vegaプロットの設定

Vegaプロットを設定するには、目的のカードにカーソルを合わせ、Visualizeを選択し、ドロップダウンメニューでVega plotをナビゲートするか検索します。Vega plotを選択して設定メニューを開きます。

エディターメニュー内で、VegaプロットまたはVega-Liteプロットのいずれかを設定することを選択します。一般的なビジュアライゼーションのテンプレート（バブルプロット、ボックスプロット、サンバーストプロットなど）は、以下の図に示すようにChoose a templateドロップダウンメニューに提供されています。

Vegaプロットテンプレートを選択すると、選択したプロットに関連するパラメーターを、トランスフォームテーブルデータソースの列にマッピングして入力するように求められます。

テンプレートのパラメーターを入力した後、Applyを選択してVegaプロットを生成します。次の点に注意してください：

• フィールドが空白のままの場合、パラメーター名がデフォルトとして使用されます。
• 入力されたテンプレートは、エディター内の現在の値を上書きします。

データ入力の設定

Vegaプロットは次のデータ入力を受け入れます：

• トランスフォームテーブル: どのトランスフォームテーブルもVegaプロットの入力として使用できます。オブジェクトセットからVegaプロットを追加する場合、バックトランスフォームテーブルも自動的にAnalysis Contentsパネル（ただしCanvasには含まれません）に追加されます。
• 配列: 配列は、ARRAY_VALUESという名前の 1 列を持つトランスフォームテーブルとして解析されます。

データセクションでは、次の形式でグローバルID（たとえば$A）によってトランスフォームテーブルまたは配列の形式で表形式データをリファレンスできます。

Copied!
1
2
3
4
5
{
    "data": { "values": $A } 
    // "values"キーの値として変数$Aを指定しています
    ...
}

たとえば、テーブル $A が name と id の2つの列を持つテーブルの場合、データは次のようなスペックに解決されます：

Copied!
1
2
3
4
5
6
7
8
9
{
    "data": {
        "values": [
            { "name": "a", "id": 1}, // 名前が 'a' で ID が 1
            { "name": "b", "id": 2}, // 名前が 'b' で ID が 2
            { "name": "c", "id": 3}  // 名前が 'c' で ID が 3
        ]
    }
}

トランスフォームテーブル内の特定の列をリファレンスするには、`$A.column_name`という構文を使用します。この表現は、列のIDを文字列として解決します。
```json
{
    "encoding": {
        "x": {
            "field": $A.column_x,  // $A.column_x を x 軸のフィールドとして指定
            "type": "quantitative",  // データのタイプを「量的(quantitative)」として指定
        }
    }
    ...
}

分析から変数を使用する

数値メトリクスカードなどのValue TypesをVegaプロットでリファレンスすることもできます。たとえば、特定の値に閾値線を設定するには、メトリクスカードのグローバルIDを使用してその値をリファレンスします。

"encoding": {
    // "y": Y軸の値を指定します。"$C"は定数Cを指す。
    "y": { "datum": $C }
}
...

解決されたVega仕様のプレビュー

Vegaプロットの設定に関する問題をデバッグするには、解決されたVega仕様を確認します。Previewを選択して解決されたVegaを表示してください。

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

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

• Autoscale plot: Autoscale plotが有効になっていると、提供されたデータに基づいてVegaプロットがカードの寸法に自動的に調整されます。
• Default styling: Vega仕様に自動サイズ調整とスタイリングの設定を追加して、プロットの外観をQuiverカードのスタイルに合わせます。無効にすると、Vegaビジュアライゼーションは公開されているVegaウェブサイトのものと一致します。

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

AIPは、自然言語で記述されたプロットやプロットの修正についての説明だけで、Vegaプロット設定を生成するのに役立ちます。ユーザーは作成または修正したいプロットを単に説明するだけで、AIPがプロンプトに基づいて提案を行い、エラーが発生しやすいJSON形式のVegaプロット設定を簡素化します。

望ましいVegaプロットを説明する

AIPを使用するには、Vegaプロットカードの右上にあるAIP Configureを選択します。その後、プロンプトを入力し、Configureを選択してAIPが生成した提案を確認してください。提案を受け入れるには、Applyを選択します。別の提案をAIPに依頼する場合は、プロンプトを編集してからReconfigureを選択してください。

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

AIPの提案を受け入れるには、Applyを選択します。これにより、更新されたVega仕様に基づいてVegaプロットがビジュアライゼーションをレンダリングします。

既存のプロットの上に構築する

AIPはプロンプト内の抽象的なアイデアを認識し、それを使用してVegaプロットを生成または修正するのに役立ちます。たとえば、AIPは以前に生成されたプロットの特性を参照して、既存のプロットの上に「構築する」ことができます。

以下の画像では、ユーザーはプロンプトを提供しています。「プロット上の2本の線が点を4つの象限に分割しています。各象限を異なる色で塗りつぶしてください。」AIPは、現在のプロット設定に象限の定義や設定が含まれていなくても、垂直および水平線によって定義されたエリアが象限であることを認識しています。

AIPはユーザープロンプトに基づいて正確にプロットを生成し、初期プロットを基にしています。

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

AIPを使用して生成されたQuiver分析グラフには、Vegaプロットを含めることができます。AIPにネイティブなQuiverビジュアライゼーション（線グラフや散布図など）ではなくVegaプロットを生成するよう指示するには、プロンプトで明示的に「Vegaプロット」を返すように指定します。たとえば、正確なプロンプトは次のようになります。「Vegaプロットを使用して散布図にカフェインとpHを表示してください。」

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

Vega-Lite選択

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

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

Vega-Liteは、2種類の選択 ↗を通じてチャートと対話できます。

• Point選択: キャンバス上の単一のポイントを選択するか、Shiftキーを押しながら複数のポイントを選択します。
• Interval選択: キャンバス上でドラッグして境界のある矩形領域を選択します。

プロット選択データをトランスフォームテーブルとして出力するには、次の手順を実行します。

1. Vegaプロットカードの設定パネルを開き、Selection Optionsまでスクロールします。次に、Enable output point selections as transform tableおよび/またはEnable output interval selections as transform tableをオンにします。

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

   1. パラメーターは、ポイント選択の場合はquiverDefaultClick、インターバル選択の場合はquiverDefaultBrushと名付ける必要があります。

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

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

      

3. 選択が行われると、選択データを含むカードフッターが表示されます。Output Selectionを選択して、選択データをトランスフォームテーブルとして出力します。あるいは、Vegaプロットの次のアクションメニューを使用してConvert > New Transform Tableを選択します。

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

   

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

   

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

一般的なビジュアライゼーション（バブルプロットやヒートグリッドなど）における選択セットアップの追加例については、提供されたVegaプロットテンプレートを参照してください。これらのテンプレートは、設定エディターのChoose a templateドロップダウンメニューの下にあります。

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

...
"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-Lite プロットからの選択データを使用してドリルダウンワークフローを構築できます。チャートの選択がフィルター処理する役割を果たし、上流の選択に基づいてデータのサブセットに対して分析を続けることができます。以下の手順では、ドリルダウンワークフローの構築方法を説明します。

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

2. プロパティを配列に変換するために、Pop out column as array を選択します。

3. 選択された値をフィルターパラメーターとして使用して、元のトランスフォームテーブルのコピー（またはトランスフォームテーブルが派生したルートオブジェクトセットのコピー）をフィルター処理します。

4. フィルター処理されたテーブルは、上流のチャート選択に基づいて動的に更新されます。

FAQ と制限事項

どのタイプの Vega-Lite プロットでも選択の設定が可能ですか？

すべての Vega-Lite プロットタイプが選択をサポートしているわけではありません。Vega のドキュメントにはサポートされているプロットタイプの完全なリストはありませんが、以下は非網羅的なリストです:

• サポートされている: バープロット、散布図、ヒートグリッド、ラインプロット、円グラフ（ポイント選択のみ）、ウォーターフォールプロット（ポイント選択のみ）、地理座標投影、GeoJSON マップ（ポイント選択のみ）
• サポートされていない: ボックスプロット、信頼区間プロット

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

各プロットは 1 つのポイント選択パラメーターと 1 つのインターバル選択パラメーターに制限されており、それらが Quiver にデータを出力します。これは Quiver による制限です。Vega はユニークな名前を持つ複数のパラメーターの定義を許可しますが、quiverDefaultClick と quiverDefaultBrush と名付けられたものだけが Quiver トランスフォームテーブルとして出力されます。

選択パラメーターのエンコーディングリストに追加したにもかかわらず、軸のサブセットを選択できません。何が原因ですか？

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

"encodings": {
  "y": {
    "field": $C.field_y, // Y軸のフィールド
    "aggregate": "avg" // 平均値を集計
  },
  ...
}

y軸で選択を有効にするには、最初にQuiverでデータを集計します（たとえば、ピボットテーブルを使用）。その後、データをVegaに渡します。

スペックがコンパイルされても、選択を試みたときに Invalid data selection エラーが発生するのはなぜですか？

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

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