Vega解説 〜複数グラフ〜

今回は、カテゴリが設定されたデータを複数のグラフにして出します。

完成形は以下のような感じに上下に二つのグラフが並びます。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/c4e5224d-ee26-53fa-4a22-a2e10b74a1e0.png)



## 利用データ

x,y,cからなるデータです。最終的にcごとのグラフを作成します。

```
[
{"x":0,"y":28,"c":0},{"x":0,"y":55,"c":1},
{"x":1,"y":43,"c":0},{"x":1,"y":91,"c":1},
{"x":2,"y":81,"c":0},{"x":2,"y":53,"c":1},
{"x":3,"y":19,"c":0},{"x":3,"y":87,"c":1},
{"x":4,"y":52,"c":0},{"x":4,"y":48,"c":1},
{"x":5,"y":24,"c":0}
]
```


## 重ねて表示

一旦、重ねて表示します。通常の棒グラフ表示ですので、[ここ](https://qiita.com/ihgs/items/87fda0cd39693bae44f3)を参考してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/1dede736-64ab-5bec-9ea0-a20d9cd373a6.png)

[Online Editorで開く](https://vega.github.io/editor/#/gist/2d2be575035a0630db34d166891e677c/step0.json)

## グラフ表示部のグルーピング

marksに `type="group"` を導入します。

`table` データの `c` でグルーピングし、`table_facet` という名前をつけています。入れ子になっている 'marks'が、グルーピングされたデータ群に対して、繰り返し実行されます。
グラフの見た目は変わっていないですが、c=0,c=1で２回、同じ場所に棒グラフ描画をしているイメージです。

```
  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "table_facet",
          "data": "table",
          "groupby": ["c"]
        }
      },
      "marks":[
        {
          "type": "rect",
          "from": {
            "data": "table_facet"
          },
          "encode": {
// 先ほどと同じ棒グラフの表示を記載
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/ddaa0c38-4caf-552c-a8c6-13a632564850.png)

[Online Editorで開く](https://vega.github.io/editor/#/gist/2d2be575035a0630db34d166891e677c/step1.json)

## グラフの分離(Layoutの導入)

レイアウトを設定するために、 `layout` を導入します。
`columns=1` のため、縦一列に並ぶようになります。
 

```
  "layout": {
    "padding": 20,
    "columns": 1
  },
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/38c2ade8-3080-5da7-8675-efa6aca3649f.png)

[Online Editorで開く](https://vega.github.io/editor/#/gist/2d2be575035a0630db34d166891e677c/step2.json)

## 軸の描画

`type="group"` に `axes` の設定を移動し、`width`と`height` を設定する `encode` も追加します。
これで、データを分類し複数のグラフで表示することができました。

```
  "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "name": "table_facet",
          "data": "table",
          "groupby": ["c"]
        }
      },
      "encode": {
        "update": {
          "width": {"signal": "width"},
          "height": {"signal": "height"}
        }
      },
      "axes": [
        {
          "orient": "bottom",
          "scale": "xscale"
        },
        {
          "orient": "left",
          "scale": "yscale"
        }
      ],
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/18261c9c-d61a-f127-da8b-e08990bbfb63.png)

[Online Editorで開く](https://vega.github.io/editor/#/gist/2d2be575035a0630db34d166891e677c/step3.json)

## （おまけ）軸をあわせる必要がない時

`axes` と同様に `type="group"`　に `scales` を移動し、参照先のデータを `table` から `table_facet` に切り替えると、x軸、y軸のスケールがそれぞれのデータセットに応じた値になります。

```
      "scales": [
        {
          "name": "xscale",
          "type": "band",
          "range": "width",
          "domain": {
            "data": "table_facet",
            "field": "x"
          }
        },
        {
          "name": "yscale",
          "type": "linear",
          "range": "height",
          "nice": true,
          "zero": true,
          "domain": {
            "data": "table_facet",
            "field": "y"
          }
        }
      ],
```


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/268ab922-8263-4488-92bf-0bed9fd68104.png)

[Online Editorで開く](https://vega.github.io/editor/#/gist/2d2be575035a0630db34d166891e677c/step4.json)