Vega プロット

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 パネルに追加されます（ただし、キャンバスには追加されません）。
• 配列： 配列は、ARRAY_VALUES という名前の単一の行を持つ変換テーブルとして解析されます。

データセクションでは、以下の形式で変換テーブルまたは配列の形式の表形式データをそのグローバル ID（例えば $A）で参照できます：

Copied!
1
2
3
4
{
    "data": { "values": $A } // "データ": {"値": $A}
    ...
}

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

Copied!
1
2
3
4
5
6
7
8
9
{
    "data": {
        "values": {
            { "name": "a", "id": 1}, // 名前: "a", 識別子: 1
            { "name": "b", "id": 2}, // 名前: "b", 識別子: 2
            { "name": "c", "id": 3}  // 名前: "c", 識別子: 3
        }
    }
}

変換表内の特定の行を参照するには、$A.column_nameという構文を使用します。この表現は、行のIDを文字列として解決します。

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

分析から変数を使用する

Vega プロットで 値タイプ（数値メトリックカードなど）も参照できます。例えば、数値メトリックカードを使用して特定の値でしきい値ラインを設定するには、メトリックカードのグローバル ID を使用してその値を参照します。

"encoding": {
    "y": { "datum": $C } // "y"エンコーディング: データムに$Cを使用
}
...

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

Vegaプロットの設定に関する問題は、解決されたVega仕様を見ることでデバッグできます。プレビューを選択して、解決されたVegaを表示します。

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

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

• プロットの自動スケーリング: プロットの自動スケーリングが有効になっている場合、Vegaプロットは提供されたデータに基づいてカードの寸法に自動的に調整されます。
• デフォルトのスタイリング: Vega仕様に自動サイズとスタイリングの設定を追加し、プロットの外観をQuiverカードのスタイルに合わせます。無効にすると、Vegaの可視化は公開されているVegaウェブサイトのものと一致します。

AIPを使ったVegaプロットの設定

AIPは、希望するプロット、またはプロットの変更の説明だけを使用して、Vegaプロットの設定を生成するのに役立ちます。ユーザーは作成または変更したいプロットを単に説明し、AIPがプロンプトに基づいた提案を行います。これにより、JSONでのVegaプロット設定を簡単にエラーになりやすくします。

希望するVegaプロットを説明する

AIPを使用するには、Vegaプロットカードの右上にあるAIP設定を選択します。次に、プロンプトを提供し、設定を選択し、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プロットを含めることができます。AIPにQuiverのネイティブ可視化（線プロットや散布図など）ではなくVegaプロットを生成させるには、プロンプトでAIPが「Vegaプロット」を返すように明示的に指定してください。例えば、正確なプロンプトは「カフェインとphを散布図で表示し、vegaプロットを使用する」となります。

注: AIPの機能の可用性は変更されることがあり、顧客間で異なる場合があります。

Vega-Lite選択

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

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

Vega-Liteでは、ユーザーが2種類の選択（外部）を通じてチャートと対話できます。

• ポイント選択: キャンバス上で1つのポイントを選択するか、シフトキーを押しながら複数のポイントを選択します。
• インターバル選択: キャンバス上で矩形の範囲を選択するためにドラッグします。

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

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

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

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

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

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

FAQと制限事項

すべてのタイプのVega-Liteプロットで選択を設定できますか？

すべてのVega-Liteプロットタイプが選択をサポートしているわけではありません。Vegaのドキュメンテーションではサポートされているプロットタイプの完全なリストは提供されていませんが、以下は一部のリストです：

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

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

各プロットは、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などの非軸エンコーディングフィールドに対するインターバル選択には対応していません。エンコーディング配列からこれらを削除すると、エラーが解消されるはずです。