KibanaでリッチなVegaビジュアライゼーションを作成する方法をご確認ください | Elastic Blog
エンジニアリング

KibanaでのVegaビジュアライゼーションの基本

VegaKibana 6.2Elasticsearch使VegaVega-LiteVega

Vega EditorVegaElasticsearch使便Hello Vega!

Text Mark Example

{
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  "width":100, "height":30,
  "background": "#eef2e8",
  "padding":5,
  "marks": [
    {
      "type": "text",
      "encode": {
        "update": {
          "text":     { "value":"Hello Vega!" },
          "align":    { "value": "center"},
          "baseline": { "value": "middle"},
          "stroke":   { "value": "#A32299" },
          "angle":    { "value":15 },
          "x":        { "signal": "width/2" },
          "y":        { "signal": "height/2" }
        }
      }
    }
  ]
}

marks使mark "update" xy 使

$schemaVegaIDbackgroundwidthheightautosize調Kibanaautosize調padfit調heightwidth padding

使 URL使KibanaElasticsearch使vals42categorycount categoryxcount y0

Rect Mark Example

{
  "$schema":"https://vega.github.io/schema/vega/v3.json",
  "width":300, "height":100,
  "data": [ {
    "name": "vals",
    "values": [
      {"category":50,  "count":30},
      {"category":100, "count":80},
      {"category":150, "count":10},
      {"category":200, "count":50}
    ]
  } ],
  "marks": [ {
    "type": "rect",
    "from": { "data": "vals" },
    "encode": {
      "update": {
        "x":     {"field": "category"},
        "width": {"value":30},
        "y":     {"field": "count"},
        "y2":    {"value":0}
      }
    }
  } ]
}

rectvalsdatumxy

1Vega

使10008000count=0count099 "scale": "yscale"yy2yscale使count09980000 height0

Rect Mark with Scaling Example

{
  "$schema":"https://vega.github.io/schema/vega/v3.json",
  "width":400, "height":100,
  "data": [ {
    "name": "vals",
    "values": [
      {"category":50,  "count":3000},
      {"category":100, "count":8000},
      {"category":150, "count":1000},
      {"category":200, "count":5000}
    ]
  } ],
 "scales": [
    {
      "name": "yscale",
      "type": "linear",
      "zero": true,
      "domain": {"data": "vals", "field": "count"},
      "range": "height"
    }
  ],
  "marks": [ {
    "type": "rect",
    "from": { "data": "vals" },
    "encode": {
      "update": {
        "x":     {"field": "category"},
        "width": {"value":30},
        "y":     {"scale": "yscale", "field": "count"},
        "y2":    {"scale": "yscale", "value":0}
      }
    }
  } ]
}

15Vega1使4400/45% {"scale": "xscale", "band":1}width100%

Rect Mark with Band Scaling Example

{
  "$schema":"https://vega.github.io/schema/vega/v3.json",
  "width":400, "height":100,
  "data": [ {
    "name": "vals",
    "values": [
      {"category":"Oranges", "count":3000},
      {"category":"Pears",   "count":8000},
      {"category":"Apples",  "count":1000},
      {"category":"Peaches", "count":5000}
    ]
  } ],
 "scales": [
    {
      "name": "yscale",
      "type": "linear",
      "zero": true,
      "domain": {"data": "vals", "field": "count"},
      "range": "height"
    },
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "vals", "field": "category"},
      "range": "width",
      "padding":0.05
    }
  ],
  "marks": [ {
    "type": "rect",
    "from": { "data": "vals" },
    "encode": {
      "update": {
        "x":     {"scale": "xscale", "field": "category"},
        "width": {"scale": "xscale", "band":1},
        "y":     {"scale": "yscale", "field": "count"},
        "y2":    {"scale": "yscale", "value":0}
      }
    }
  } ]
}

使

Rect Mark with Axes Example

  "axes": [
    {"scale": "yscale", "orient": "left"},
    {"scale": "xscale", "orient": "bottom"}
  ],

"autosize": "fit"

使Vega使使count333666666使

Random Data Example

{
  "$schema":"https://vega.github.io/schema/vega/v3.json",
  "width":400, "height":200,
  "data": [ {
    "name": "vals",
    "values": [
      {"category":"Oranges"},
      {"category":"Pears"},
      {"category":"Apples"},
      {"category":"Peaches"},
      {"category":"Bananas"},
      {"category":"Grapes"}
    ],
    "transform": [
      {"type": "formula", "as": "count", "expr": "random()*1000"}
    ]
  } ],
 "scales": [
    {
      "name": "yscale",
      "type": "linear",
      "zero": true,
      "domain": {"data": "vals", "field": "count"},
      "range": "height"
    },
    {
      "name": "xscale",
      "type": "band",
      "domain": {"data": "vals", "field": "category"},
      "range": "width",
      "padding":0.05
    }
  ],
  "axes": [
    {"scale": "yscale", "orient": "left"},
    {"scale": "xscale", "orient": "bottom"}
  ],
  "marks": [ {
    "type": "rect",
    "from": { "data": "vals" },
    "encode": {
      "update": {
        "x":     {"scale": "xscale", "field": "category"},
        "width": {"scale": "xscale", "band":1},
        "y":     {"scale": "yscale", "field": "count"},
        "y2":    {"scale": "yscale", "value":0},
        "fill":  [
          {"test": "datum.count < 333", "value": "red"},
          {"test": "datum.count < 666", "value": "yellow"},
          {"value": "green"}
        ]
      }
    }
  } ]
}

ElasticsearchKibana

Elasticsearch使 KibanaVegaVega-LiteVegaKibanaVega使

url使values使KibanaElasticsearchVega Editor valuesurlKibana

KibanaElasticsearch

   "url": {
      "%context%": true,
      "%timefield%": "@timestamp",
      "index": "_all",
      "body": {
        "aggs": {
          "time_buckets": {
            "date_histogram": {
              "field": "@timestamp",
              "interval": {"%autointerval%": true},
              "extended_bounds": {
                "min": {"%timefilter%": "min"},
                "max": {"%timefilter%": "max"}
              },
              "min_doc_count":0
            }
          }
        },
        "size":0
      }

     "aggregations": {
        "time_buckets": {
          "buckets": [
            {"key":1528061400000, "doc_count":1},
            {"key":1528063200000, "doc_count":45},
            {"key":1528065000000, "doc_count":49},
            {"key":1528066800000, "doc_count":17},
...

aggregations.time_buckets.buckets"format": {"property": "aggregations.time_buckets.buckets"}Vega

xkeyVega使UNIXxscalekeydoc_count使調linexy formatlabelAngletickCounthttps://vega.github.io/vega/docs/axes/)使x

Elasticsearch search result example

{
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  "width":400, "height":200,
  "data": [
    {
      "name": "vals",
      "values": {
        "aggregations": {
          "time_buckets": {
            "buckets": [
              {"key":1528063200000, "doc_count":45},
              {"key":1528065000000, "doc_count":49},
              {"key":1528068600000, "doc_count":32},
              {"key":1528072200000, "doc_count":12},
              {"key":1528074000000, "doc_count":10},
              {"key":1528075800000, "doc_count":10},
              {"key":1528083000000, "doc_count":2},
              {"key":1528088400000, "doc_count":3},
              {"key":1528092000000, "doc_count":9},
              {"key":1528093800000, "doc_count":15},
              {"key":1528095600000, "doc_count":13},
              {"key":1528097400000, "doc_count":19},
              {"key":1528099200000, "doc_count":33},
              {"key":1528101000000, "doc_count":20},
              {"key":1528102800000, "doc_count":55},
              {"key":1528104600000, "doc_count":68},
              {"key":1528108200000, "doc_count":70},
              {"key":1528110000000, "doc_count":108},
              {"key":1528113600000, "doc_count":151},
              {"key":1528117200000, "doc_count":206},
              {"key":1528122600000, "doc_count":258},
              {"key":1528129800000, "doc_count":250},
              {"key":1528135200000, "doc_count":220}
            ]
          }
        }
      },
      "format": {"property": "aggregations.time_buckets.buckets"}
    }
  ],
  "scales": [
    {
      "name": "yscale",
      "type": "linear",
      "zero": true,
      "domain": {"data": "vals", "field": "doc_count"},
      "range": "height"
    },
    {
      "name": "xscale",
      "type": "time",
      "domain": {"data": "vals", "field": "key"},
      "range": "width"
    }
  ],
  "axes": [
    {"scale": "yscale", "orient": "left"},
    {"scale": "xscale", "orient": "bottom"}
  ],
  "marks": [
    {
      "type": "line",
      "from": {"data": "vals"},
      "encode": {
        "update": {
          "x": {"scale": "xscale", "field": "key"},
          "y": {"scale": "yscale", "field": "doc_count"}
        }
      }
    }
  ]
}

Vega Elasticsearch稿

便

Vega稿