Vega チャート

Vega チャートウィジェットは、Vega および Vega-Lite ↗ の文法を使用して、Workshop で自由にカスタマイズできるインタラクティブな可視化を作成するために使用します。

Vega とは

Vega では、可視化の外観と動作を記述する簡潔な JSON 仕様として、インタラクティブな可視化のデザインを作成、保存、共有できます。 Vega は D3 上に構築された高水準の可視化仕様言語です ↗。Vega-Lite は Vega 上に構築された、さらに高水準の言語で、一般的な可視化をより簡潔かつ便利に作成できます。

Vega チャートウィジェットは、標準の XY チャートウィジェットよりも柔軟にカスタマイズでき、公式の Vega-Lite サンプルギャラリー ↗で提供されている、以下のような可視化をサポートしています。

Vega のデータ入力

Vega ↗ のデータは、構造体の単純な配列です。

Copied!
1
2
3
4
5
6
7
8
9
10
"data": [
  {
    "name": "nba-player-data",
    "values": [
        { "name": "Michael Jordan", "height-in-inches": 78, "weight-in-lbs": 216, ... },
        { "name": "Stephen Curry", "height-in-inches": 74, "weight-in-lbs": 185, ... },
        ...
    ]
  }
]

Vega-Lite ↗ では、次のように複数のデータセットを指定できます。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
"datasets": {
  "nba-player-data": [
    { "name": "Michael Jordan", "height-in-inches": 78, "weight-in-lbs": 216, ... },
    { "name": "Stephen Curry", "height-in-inches": 74, "weight-in-lbs": 185, ... },
    ...
  ],
  "nba-team-data": [
    { "name": "Toronto Raptors", "has-won-championship": true, ... },
    { "name": "Memphis Grizzlies", "has-won-championship": false, ... },
    ...
  ]
}

データ設定

Vega チャートウィジェットには3つの設定オプションがあり、オントロジーのオブジェクトデータを、Vega および Vega-Lite が期待する形式に柔軟に変換してから、JSON 仕様に挿入できます。

• オブジェクトセット： データに含めるオブジェクトセットと、そのオブジェクトのプロパティを指定します。
  
  
  
  

• 集計： オブジェクトセット、バケット化戦略を含むグループ化用のプロパティ、および集計を指定します。各データポイントには、グループ化用の各プロパティの値と、指定した集計名をキーとする集計値が含まれます。
  
  
  
  

• 関数： データとして直接使用する構造体のリストを返す関数を指定します。

以下の例では、CompanyData カスタム型を宣言し、その構造体のリストを返します。宣言の形式は関数のバージョンによって異なります。TypeScript v1 ではデコレーター付きのクラスメソッドを、TypeScript v2 ではファイルのデフォルトエクスポートを、Python では @function デコレーター付きのモジュールレベルの関数を使用します。

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
import { Function, Long } from "@foundry/functions-api";

interface CompanyData {
    name: string;
    marketCap: Long;
    logoUrl: string;
}

export class MyFunctions {
    @Function()
    public companyVegaData(): CompanyData[] {...}
}

Copied!
1
2
3
4
5
6
7
8
9
10
import { Long } from "@osdk/functions";

interface CompanyData {
    name: string;
    // TypeScript v2 では Long は文字列です。このフィールドを定量的なエンコーディングに使用する場合は、Double を使用してください。
    marketCap: Long;
    logoUrl: string;
}

export default function companyVegaData(): CompanyData[] {...}

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
from dataclasses import dataclass
from functions.api import function, Long

@dataclass
class CompanyData:
    name: str
    market_cap: Long
    logo_url: str

@function
def company_vega_data() -> list[CompanyData]:
    ...

複数のデータ入力を設定し、設定した名前で仕様から参照できます。データは JSON 仕様に自動的に挿入され、エディターのプレビュータブで確認できます。また、上記のデータ形式に合わせて、JSON 仕様にデータをインラインで記述することもできます。

仕様

仕様 ↗は、可視化を定義する JSON です。仕様はインラインで指定するか、文字列変数を使用して指定できます。

Vega と Vega-Lite の比較

ウィジェットでは、仕様に Vega-Lite と Vega のどちらを使用するかを指定できます。

一般的なプロットを作成する場合は、文法がより簡潔で、選択パラメーターをサポートする Vega-Lite の使用を推奨します。より複雑な可視化には Vega を使用できます。それぞれでどのような可視化が可能かについては、Vega-Lite ↗ および Vega ↗ の例を参照してください。このウィジェットは Vega-Lite 5.18 を使用しています。

テーマ設定

再利用しやすくするため、仕様に挿入するテーマを設定できます。デフォルトのテーマは XY チャートウィジェットの Blueprint スタイルに一致しますが、文字列変数から独自のカスタムテーマを指定したり、テーマを完全に無効にしたりすることもできます。

独自のカスタムテーマを作成する際の例については、vega-themes リポジトリ ↗を参照してください。

デフォルトの Blueprint テーマを変更する場合は、インラインエディターのプレビュータブで挿入された設定を確認し、変更を加えて仕様に直接貼り付けることができます。

インラインエディター

AIP を使用して、Vega チャートの初期バージョンを作成できます。指定したデータ入力を使って、次のようなプロンプトを AIP に入力できます。

Make me a bar chart of average points per game, bucketed by the number of seasons played.

これによりチャートが作成され、追加の AIP プロンプトで繰り返し調整できます。

Remove the gridlines from this chart, and only show number of seasons greater than 4.

AIP プロンプトで望む結果にならない場合は、仕様を直接変更できます。仕様の変更方法については、既存の Vega-Lite の例 ↗やその他の Vega リソースを参照してください。たとえば、サンプルを出発点として、サンプルデータを入力データへの参照に置き換えることができます。

インラインエディター：プレビュー

プレビュータブには、データ入力とテーマデータが挿入された完全な仕様が表示されます。読みやすくするためにデータを切り詰めたり、この完全な仕様をクリップボードにコピーしたりできます。これにより、データが期待される形式になっていることを確認できます。

選択パラメーター（Vega のみ）

Workshop が Vega スキーマの使用を推奨する主な理由は、Vega が選択パラメーター ↗をサポートしているためです。Vega Chart ウィジェットでは、複数の選択パラメーターを設定できます。それぞれに名前と出力変数があります。出力変数には、オブジェクトセットフィルターまたは文字列を指定できます。

選択は仕様内のさまざまな場所で指定できるため、この設定は仕様に自動挿入されません。作成者は、設定したパラメーター名ごとに、対応する選択パラメーターを仕様に含める必要があります。

以下は、X 軸上の範囲選択を出力する選択パラメーターの例です。

Copied!
1
2
3
4
5
6
7
8
9
...
"params": [{
  "name": "intervalSelection",
  "select": {
    "type": "interval",
    "encodings": [ "x" ]
  }
}]
...