# VEGA Visualizationでy軸に複数の項目をセットしたい。

**URL:** <https://discuss.elastic.co/t/vega-visualization-y/220076>\
**Category:** 日本語による質問・議論はこちら\
**Created:** [February 20, 2020, 4:40am UTC](https://discuss.elastic.co/t/vega-visualization-y/220076 "2020-02-20T04:40:46Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sshota](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@sshota](https://discuss.elastic.co/u/sshota)\
**Post date:** [February 20, 2020, 4:40am UTC](https://discuss.elastic.co/t/vega-visualization-y/220076/1 "2020-02-20T04:40:46Z")

</div>

お世話になります。

VEGAを用いて散布図を作成しています。  
一つのx軸を共通で使用し、y軸に複数の項目をセットしたいのですが、上手くいきません。

## やりたいこと

下記のデータ群で、値を x軸: testdate , y軸: value1 でセットする簡単な散布図は作成できました。

**Sample data**

| testdate | value1 | value2 | value3 |
| --- | --- | --- | --- |
| 2020-01-03 00:00:00 | 10 | 20 | 30 |
| 2020-01-02 00:00:00 | 11 | 21 | 31 |
| 2020-01-01 00:00:00 | 12 | 22 | 32 |

**VEGA script**

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "mark": { type:"point", filled: true },
  data: {
    url: {
      %context%: true
      %timefield%: testdate
      index: test_index
      body: {
        size: 10000
        _source: ["testdate","value1","value2","value3"]
      }
    }
    format: { 
      property: "hits.hits" 
    }
  }
  transform: [{
    calculate: "toDate(datum._source['testdate'])"
    as: "time"    
  }]

  encoding: {
    x:{
      field: time
      type: temporal
      axis: { title: "testdate"}
     }
    y: {
      field: _source['value1']
      type: quantitative
      axis: { title: "value" }
     }
    size: {value: 300}
    tooltip: [{
      field: "_source['testdate']",title:"testdate"
      },{
      field: "_source['value1']",title:"value1"
      }
    ] 
  }

}

```

**Scatter plot**

 ![vega_scatterplot](https://us1.discourse-cdn.com/elastic/original/3X/8/3/83ed0b0cb1c25eeeebd9ac29da1a2c8262a83683.jpeg)

これに続いて、x軸の一つのtestdateに対して、y軸に３つの値(value1,value2,value3)を表示したいのですが、やり方がわかりません。  
`encoding.y.field` を`_source['value1'],_source['value2'],_source['value3']`としても上手く機能しませんでした。

やり方をご存知の方がいれば、ご教示いただけますと幸いです。

---

<div class="post-metadata">

**Author:** ![tsgkdt](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tsgkdt/32/39151_2.png) [@tsgkdt](https://discuss.elastic.co/u/tsgkdt)\
**Post date:** [February 20, 2020, 4:05pm UTC](https://discuss.elastic.co/t/vega-visualization-y/220076/2 "2020-02-20T16:05:00Z")

</div>

Vega的にもKibanaとしても正しいやり方かどうかわかりませんが、  
Layerを重ねることで、value1, value2, value3と異なるを１つの散布図グラフに描画できそうです。

やってみた結果が以下のイメージです。

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/3/6/36d5734df8a5e7a2a646295418ffeff1f617bddc.png)

index名：forum0221  
日付項目: @timestamp

と読み替えていただき、以下が使用した内容です。  
value1、2、３と違うものを出していることを明示的にするため、色とプロットする形を変更してあります。

ご参考になれば幸いです。

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {
    "url": {
      "%context%": true,
      "%timefield%": "@timestamp",
      "index": "forum0221",
      "body": {
        "size": 10000,
        "_source": ["@timestamp", "value1", "value2", "value3"]
      }
    },
    "format": {"property": "hits.hits"}
  },
  "transform": [
    {"calculate": "toDate(datum._source['@timestamp'])", "as": "time"}
  ],
  "layer": [
    {
      "mark": {"type": "point", "filled": true},
      "encoding": {
        "x": {
          "field": "time",
          "type": "temporal",
          "axis": {"title": "@timestamp"}
        },
        "y": {
          "field": "_source['value1']",
          "type": "quantitative",
          "axis": {"title": "value"}
        },
        "size": {"value": 300},
        "tooltip": [
          {"field": "_source['@timestamp']", "title": "@timestamp"},
          {"field": "_source['value1']", "title": "value1"}
        ]
      }
    },
    {
      "mark": {"type": "point", "filled": true},
      "encoding": {
        "x": {
          "field": "time",
          "type": "temporal",
          "axis": {"title": "@timestamp"}
        },
        "y": {
          "field": "_source['value2']",
          "type": "quantitative"
        },
        "size": {"value": 300},
        "shape": {"value": "diamond"},
        "color": {"value": "red"},
        "tooltip": [
          {"field": "_source['@timestamp']", "title": "@timestamp"},
          {"field": "_source['value2']", "title": "value2"}
        ]
      }
    },
    {
      "mark": {"type": "point", "filled": true},
      "encoding": {
        "x": {
          "field": "time",
          "type": "temporal",
          "axis": {"title": "@timestamp"}
        },
        "y": {
          "field": "_source['value3']",
          "type": "quantitative"
        },
        "size": {"value": 300},
        "shape": {"value": "cross"},
        "color": {"value": "blue"},
        "tooltip": [
          {"field": "_source['@timestamp']", "title": "@timestamp"},
          {"field": "_source['value3']", "title": "value3"}
        ]
      }
    }
  ]
}

```

---

<div class="post-metadata">

**Author:** ![sshota](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@sshota](https://discuss.elastic.co/u/sshota)\
**Post date:** [February 21, 2020, 2:50am UTC](https://discuss.elastic.co/t/vega-visualization-y/220076/3 "2020-02-21T02:50:15Z")

</div>

@tsgkdt さん

早速のご回答ありがとうございます。  
まさに実現したい内容そのもので、大変参考になりました。  
また、 色とプロットする形もありがとうございます。

追加でご教示願いたいのですが、Layerを重ねて表示した場合に、凡例を1つにまとめるにはどうしたらよいのでしょうか。

緑circleアイコン：value1、赤diamondアイコン：value2、青crossアイコン：value3  
というのを、1つにまとめた凡例を作りたいです。

---

<div class="post-metadata">

**Author:** ![tsgkdt](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/tsgkdt/32/39151_2.png) [@tsgkdt](https://discuss.elastic.co/u/tsgkdt)\
**Post date:** [February 25, 2020, 12:10am UTC](https://discuss.elastic.co/t/vega-visualization-y/220076/4 "2020-02-25T00:10:11Z")

</div>

まったく正しいやり方であるかどうかわかりませんが、  
凡例に表示される項目が固定できる前提があれば、このようにすればできそうです。

 ![image](https://us1.discourse-cdn.com/elastic/original/3X/e/2/e2e1941a892d88f834784e7a03367499ce68dd61.png)

layerの１つめのところで、shapreとcolorのところにscaleを宣言し、そこで凡例に出したい内容を書いています。

（例）

```auto
"scale": {
  "domain": ["data-value1", "data-value2", "data-value3"],
  "range": ["circle", "diamond", "cross"]
}

```

この方法だと、事前に凡例に出すべき内容が予めすべて分かっている前提が必要となりますが、  
見た目だけで判断すれば、実現されたいイメージに近いのではないでしょうか。

以下、使用した設定の全部です。

```auto
{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "data": {
    "url": {
      "%context%": true,
      "%timefield%": "@timestamp",
      "index": "forum0221",
      "body": {
        "size": 10000,
        "_source": ["@timestamp", "value1", "value2", "value3"]
      }
    },
    "format": {"property": "hits.hits"}
  },
  "transform": [
    {"calculate": "toDate(datum._source['@timestamp'])", "as": "time"},
    {"calculate": "'data-value1'", "as": "value_legend_1"}
  ],
  "layer": [
    {
      "mark": {"type": "point", "filled": true},
      "encoding": {
        "shape": {
          "field": "value_legend_1",
          "type": "nominal",
          "title": "Elastic Discuss Forum",
          "scale": {
            "domain": ["data-value1", "data-value2", "data-value3"],
            "range": ["circle", "diamond", "cross"]
          }
        },
        "color": {
          "field": "value_legend_1",
          "type": "nominal",
          "scale": {
            "domain": ["data-value1", "data-value2", "data-value3"],
            "range": ["green", "red", "blue"]
          }
        },
        "x": {
          "field": "time",
          "type": "temporal",
          "axis": {"title": "@timestamp"}
        },
        "y": {
          "field": "_source['value1']",
          "type": "quantitative",
          "axis": {"title": "value"}
        },
        "size": {"value": 300},
        "tooltip": [
          {
            "field": "_source['@timestamp']",
            "title": "@timestamp",
            "type": "nominal"
          },
          {
            "field": "_source['value1']",
            "title": "value1",
            "type": "quantitative"
          }
        ]
      }
    },
    {
      "mark": {"type": "point", "filled": true},
      "encoding": {
        "color": {"value": "red"},
        "x": {
          "field": "time",
          "type": "temporal",
          "axis": {"title": "@timestamp"}
        },
        "y": {"field": "_source['value2']", "type": "quantitative"},
        "size": {"value": 300},
        "shape": {"value": "diamond"},
        "tooltip": [
          {
            "field": "_source['@timestamp']",
            "title": "@timestamp",
            "type": "nominal"
          },
          {
            "field": "_source['value2']",
            "title": "value2",
            "type": "quantitative"
          }
        ]
      }
    },
    {
      "mark": {"type": "point", "filled": true},
      "encoding": {
        "x": {
          "field": "time",
          "type": "temporal",
          "axis": {"title": "@timestamp"}
        },
        "y": {"field": "_source['value3']", "type": "quantitative"},
        "size": {"value": 300},
        "shape": {"value": "cross"},
        "color": {"value": "blue"},
        "tooltip": [
          {
            "field": "_source['@timestamp']",
            "title": "@timestamp",
            "type": "nominal"
          },
          {
            "field": "_source['value3']",
            "title": "value3",
            "type": "quantitative"
          }
        ]
      }
    }
  ]
}

```

以下、補足です。

shapeでfield指定ではなく、"value" : "cross" と指定しますと、凡例すべてがその記号になってしまったことから、valueではなくfield指定するようにしています。  
そのfieldも固定値となるようにしたかったので、 transformのcalculateで求めています。

ご参考になれば幸いです。

---

<div class="post-metadata">

**Author:** ![sshota](https://avatars.discourse-cdn.com/v4/letter/s/f9ae1b/32.png) [@sshota](https://discuss.elastic.co/u/sshota)\
**Post date:** [February 27, 2020, 12:12am UTC](https://discuss.elastic.co/t/vega-visualization-y/220076/5 "2020-02-27T00:12:18Z")

</div>

@tsgkdt さん

いつもご教示ありがとうございます。

凡例に表示される項目を固定して表示したかったので、ご教示頂いた方法が  
実現したいイメージどおりだったので、大変参考になりました。

また、綿密に検証して頂き、ありがとうございます。  
大変理解しやすかったです。

いろいろと検証して活用させていただきます。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [March 26, 2020, 12:12am UTC](https://discuss.elastic.co/t/vega-visualization-y/220076/6 "2020-03-26T00:12:19Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.