Vega解説 〜凡例〜

今回は凡例です。


まず、以下のグラフに凡例を出すことから始めます。

![スクリーンショット 2020-03-21 12.05.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/61ffb959-3946-3bfe-4cf4-fa9215741ed3.png)

[Online エディタで開く](https://vega.github.io/editor/#/gist/cfc5a4643445926d6111ec430c312c71/step1.json)


データは以下のような感じです。

```json
[
        {"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}, {"x": 5, "y": 49, "c": 1},
        {"x": 6, "y": 87, "c": 0}, {"x": 6, "y": 66, "c": 1},
        {"x": 7, "y": 17, "c": 0}, {"x": 7, "y": 27, "c": 1},
        {"x": 8, "y": 68, "c": 0}, {"x": 8, "y": 16, "c": 1},
        {"x": 9, "y": 49, "c": 0}, {"x": 9, "y": 15, "c": 1}
]
```

## とりあえず出してみる

凡例を設定するには、`legends` を使います。

![スクリーンショット 2020-03-21 12.46.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/9bc0f4d0-dede-7813-1a29-715e808e37f2.png)
[Online エディタで開く](https://vega.github.io/editor/#/gist/cfc5a4643445926d6111ec430c312c71/step2.json)
[差分](https://ihgs.github.io/online-diff/?diff=ihgs/cfc5a4643445926d6111ec430c312c71/raw/step1.json...ihgs/cfc5a4643445926d6111ec430c312c71/raw/step2.json)

```
  "legends": [
    {
      "title": "C",
      "fill": "color"
    }
  ]
```



* `fill` は `scale` の名前を設定します。

## labelを変更してみる

色を決定しているデータの値が0,1 なので、凡例も0,1になっています。
実際のデータの場合、便宜上数値に設定しているだけだったりするので、その対応データを渡して、凡例のラベルを変更してみます。

手順は

1. 対応データを追加

    ```
   {
      "name": "clabel",
      "values": [
        {"label": "Zero", "value": 0},{"label": "One", "value": 1}]
   }
   ```

2. 追加したデータの`scale` を作成
`domain` が、元の凡例の0,1に合致する為に、`field` の`value` を設定します。

    ```
    {
      "name": "legends_label",
      "type": "ordinal",
      "range": {"data": "clabel", "field": "label"},
      "domain": {"data": "clabel", "field": "value"}
    }
    ```

3. `legend`のテキストに上のscaleを利用するように設定

    ```
    {
      "title": "C",
      "fill": "color",
      "encode": {
        "labels": {
          "update":{
            "text": {"scale": "legends_label", "field": "label"}
          }
        }
      }
    }
   ```

![スクリーンショット 2020-03-21 13.05.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/01badfa4-fc11-d4d8-170e-af44f7c2214a.png)

[Online エディタで開く](https://vega.github.io/editor/#/gist/cfc5a4643445926d6111ec430c312c71/step3.json)
[差分](https://ihgs.github.io/online-diff/?diff=ihgs/cfc5a4643445926d6111ec430c312c71/raw/step2.json...ihgs/cfc5a4643445926d6111ec430c312c71/raw/step3.json)




## 大きさで表現する凡例

データは一緒ですが、y軸をcにし、yの値によって、大きさを変更するグラフにします。


![スクリーンショット 2020-04-28 11.37.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/1106b2ce-c043-1cb0-4a4a-c2580866259d.png)


[Online エディタで開く](https://vega.github.io/editor/#/gist/cfc5a4643445926d6111ec430c312c71/step4.json)



```
  "scales": [
...
    {
      "name": "size",
      "type": "linear",
      "range": [10, 500],
      "domain": {"data": "table", "field": "y"}
    }
  ],
...
  "legends": [
    {
      "title": "Size",
      "size": "size"
    }
  ]
}
```

* domain にyを指定した、`size scale` を作成します。
  * range は直接値を指定しています。 0始まりにすると(`[0,500]`) yが0の時、ポイントを表示しなくできます。
* legendのsize プロパティに 作成した `size scale` を指定します。
  

## 連続した色で表現する

先ほど、サイズで表現した部分を連続した色で表現します。

![スクリーンショット 2020-04-28 12.10.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/3ecf2010-e1ea-1a3d-c997-9a1539b2d6e1.png)


[Online エディタで開く](https://vega.github.io/editor/#/gist/cfc5a4643445926d6111ec430c312c71/step5.json)

```
  "scales": [
...
    {
      "name": "color",
      "type":"linear",
      "range": {"scheme": "category20"},
      "domain": {"data": "table", "field": "y"}
    }
  ],
...
  "legends": [
    {
      "title": "Color",
      "fill": "color"
    }
  ]
}
```

* type にlinear を、range に color スキーマである`{"scheme": "category20"}`を設定した`color scale` を作成します。　[color schema](https://vega.github.io/vega/docs/schemes/#diverging)
* legendの fill に作成した`color scale` を指定します。


color scale のtypeを変更することで、凡例の見え方も変わってきます。 
(左: `"type": "ordinal"`, 右: `"type": "quantize"`)

![スクリーンショット 2020-04-28 14.25.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/51316/54f3f45a-af5c-d76a-0944-2848f953fe6c.png)

[Online エディタで開く](https://vega.github.io/editor/#/gist/cfc5a4643445926d6111ec430c312c71/step6.json)