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

sshota · February 20, 2020, 4:40am

お世話になります。

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

{
  "$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

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

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

tsgkdt · February 20, 2020, 4:05pm

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

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

index名：forum0221
日付項目: @timestamp

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

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

{
  "$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"}
        ]
      }
    }
  ]
}

sshota · February 21, 2020, 2:50am

@tsgkdt さん

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

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

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

tsgkdt · February 25, 2020, 12:10am

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

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

（例）

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

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

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

{
  "$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で求めています。

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

sshota · February 27, 2020, 12:12am

@tsgkdt さん

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

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

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

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

system · March 26, 2020, 12:12am

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