Vega Chart

Vega Chart ウィジェットは、Vega および Vega-Lite ↗ の文法を使用して、Workshop で完全にカスタマイズ可能でインタラクティブなビジュアライゼーションを作成するために使用されます。

Vega とは？

Vega は、ビジュアライゼーションの外観と動作を記述する簡潔な JSON 仕様の形式で、インタラクティブなビジュアライゼーションデザインを作成、保存、および共有することができます。 Vega は、D3 ↗ の上に構築された高レベルのビジュアライゼーション仕様言語であり、Vega-Lite は Vega の上に構築されたさらに高レベルの言語で、一般的なビジュアライゼーションをより簡潔かつ便利に作成する方法を提供します。

Vega Chart ウィジェットは、標準の XY Chart ウィジェット よりも多くのカスタマイズを提供し、公式の Vega-Lite Example Gallery ↗ によって提供される以下のようなビジュアライゼーションをサポートします。

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
13
14
"datasets": {
  "nba-player-data": [
    // NBA選手のデータ
    { "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": [
    // NBAチームのデータ
    { "name": "Toronto Raptors", "has-won-championship": true, ... },
    { "name": "Memphis Grizzlies", "has-won-championship": false, ... },
    ...
  ]
}

データ設定

Vega チャートウィジェットには 3 つの異なる設定オプションがあり、ユーザーのオントロジーからのオブジェクトデータを期待される Vega および Vega-Lite 形式に柔軟にトランスフォームできます。

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

  

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

  

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

  

複数のデータ入力を持ち、それらの設定された名前によって仕様で参照することができます。上記のデータ形式](#vega-data-inputs)に一致させてデータをインラインで仕様に追加することも可能です。

仕様

仕様 ↗ はユーザーのビジュアライゼーションを定義する JSON です。仕様はインラインで指定することも、文字列変数を使用して指定することもできます。

Vega と Vega-Lite

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

一般的なプロットを作成する場合、より簡潔な文法と選択パラメーターのサポートのために Vega-Lite を使用することをお勧めします。より複雑なビジュアライゼーションには Vega を使用できます。Vega-Lite ↗](https://vega.github.io/vega-lite/examples/) と Vega ↗ の例を参照して、両方がサポートする内容のアイデアを得てください。

テーマ設定

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

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

インラインエディタ

AIP を使用して Vega チャートの初期バージョンを作成できます。指定されたデータ入力を使用して、AIP に以下のようなプロンプトを提供できます。 Make me a bar chart of average points per game, bucketed by the number of seasons played.

This will create a chart which you can iterate on with additional AIP prompts:

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

// このコードは、シーズン数ごとに分類された1ゲームあたりの平均ポイントの棒グラフを作成します。
// グラフは追加のAIPプロンプトでさらに修正することができます。

// グリッドラインを削除し、シーズン数が4より多いものだけを表示するように修正します。

ユーザーのAIPプロンプトが期待する結果を提供しない場合、スペックを直接修正できます。既存のVega-Liteの例 ↗やその他のVegaリソースを参照して、スペックの修正方法についてガイダンスを得てください。たとえば、例から始めて、例のデータをユーザーの入力データへのリファレンスに置き換えることができます。

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

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

選択パラメーター (Vega-Liteのみ)

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

選択はスペックのさまざまな場所に指定できるため、この設定はスペックに自動的に注入されません。ビルダーとして、設定されたパラメーター名ごとにスペックに選択パラメーターを含める責任があります。

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

Copied!
1
2
3
4
5
6
7
8
9
...
"params": [{
  "name": "intervalSelection",  // intervalSelection という名前のパラメータ
  "select": {
    "type": "interval",  // 選択の種類が "interval"（範囲選択）
    "encodings": [ "x" ]  // x軸に対して範囲選択を行う
  }
}]
...