Box-plot on Vega issue

Elastic Stack Kibana
1

Hi! I am using Vega in order to draw a boxplot. I have an indicator which I aggregate by device types. Using percentile and min max aggregations. But box-plot is drawn incomplete, it doesnt show that straight line from minimum to max value (seen from the example of Vega). I would like to know how I can improve that. Official Vega example code is modified by me and used as a reference. I will paste both my query, result, Vega code and what I get as graph below. I hope someone can help me with that! Thanks in advance

Query Result:

  "aggregations": {
    "delivery_delay_per_device_type": {
      "doc_count_error_upper_bound": 0,
      "sum_other_doc_count": 0,
      "buckets": [
        {
          "key": "some_device",
          "doc_count": 11712,
          "min_value": {
            "value": 0
          },
          "delay_quantile": {
            "values": {
              "25.0": 0,
              "50.0": 775732.4341377576,
              "75.0": 1636191.1859775642
            }
          },
          "max_value": {
            "value": 2406472
          }
        },
        ...
  }

My Vega code:

{
  "$schema": "https://vega.github.io/schema/vega/v3.json",
  "title": "Completeness Box-plot",
    "signals": [
    { "name": "fields",
      **"value": [ different device names] }**,
    { "name": "plotWidth", "value": 100},
    { "name": "height", "value": 300}
  ]
  "data": [{
  "name": "results",
    "url": {
     "index": "vee_statistics",
      "body": {
              "size": 0,
              
              "aggs": {
                "completeness_per_meter_type": {
                  "terms": {
                    "field": "meter_type",
                    "size": 10
                  },
                  "aggs": {
                    "completeness_quantile": {
                      "percentiles": {
                        "field": "avg_delivery_delay",
                        "percents": [
                          25,
                          50,
                          75
                          
                        ]
                      }
                    },
                    "min_value":{
                        "min": {
                          "field": "avg_delivery_delay"
                        }
                      },
                    "max_value":{
                      "max": {
                        "field": "avg_delivery_delay"
                      }
                    }
                  }
                }
              }
            }
          },
    "format": {
      "property": "aggregations.delivery_delay_per_meter_type.buckets"
    },
    "transform":[
      {
        "type": "formula",
        "expr": "datum.delay_quantile.values['25.0']"
        "as": "q1"
      },
      {
        "type": "formula",
        "expr": "datum.delay_quantile.values['50.0']"
        "as": "median"
      },
      {
        "type": "formula",
        "expr": "datum.delay_quantile.values['75.0']"
        "as": "q3"
      },
      {
        "type": "formula",
        "expr": "datum.min_value.value"
        "as": "min_value"
      },
      {
        "type": "formula",
        "expr": "datum.max_value.value"
        "as": "max_value"
      },
      {
      "type": "fold",
      "fields": ["min_value", "q1", "median", "q3", "max_value"],
       "as": ["metric", "metricValue"]
       }
    ]
  }
  ],
   "scales": [
    {
      "name": "layout",
      "type": "band",
      "range": "height",
      "domain": {"data": "results", "field": "key"}
    },
    {
      "name": "xscale",
      "type": "linear",
      "range": "width", "round": true,
      "domain": {"data": "results", "field": "metricValue"},
      "zero": true, "nice": true
    },
    {
      "name": "color",
      "type": "ordinal",
      "range": "category"
    }
  ],
   "axes": [
    {"orient": "bottom", "scale": "xscale", "zindex": 1},
    {"orient": "left", "scale": "layout", "tickCount": 20, "zindex": 1}
  ],
  
 "marks": [
    {
      "type": "group",
      "from": {
        "facet": {
          "data": "results",
          "name": "meters",
          "groupby": "key"
        }
      },

      "encode": {
        "enter": {
          "yc": {"scale": "layout", "field": "key", "band": 0.5},
          "height": {"signal": "plotWidth"},
          "width": {"signal": "width"}
        }
      },

      "data": [
        {
          "name": "summary",
          "source": "meters",
          "transform": [
            {
              "type": "aggregate",
              "fields": ["metricValue", "metricValue", "metricValue", "metricValue", "metricValue"],
              "ops": ["min", "q1", "median", "q3", "max"],
              "as": ["min", "q1", "median", "q3", "max"]
            }
          ]
        }
      ],

      "marks": [
        {
          "type": "rect",
          "from": {"data": "summary"},
          "encode": {
            "enter": {
              "fill": {"value": "red"},
              "height": {"value": 100}
            },
            "update": {
              "yc": {"signal": "plotWidth/2", "offset": -0.5},
              "x": {"scale": "xscale", "value": "min_value"},
              "x2": {"scale": "xscale", "field": "max_value"},
              "zindex": 1
            }
          }
        },
        {
          "type": "rect",
          "from": {"data": "summary"},
          "encode": {
            "enter": {
              "fill": {"value": "steelblue"},
              "cornerRadius": {"value": 4}
            },
            "update": {
              "yc": {"signal": "plotWidth / 2"},
              "height": {"signal": "plotWidth / 2"},
              "x": {"scale": "xscale", "field": "q1"},
              "x2": {"scale": "xscale", "field": "q3"}
              
            }
          }
        },
        {
          "type": "rect",
          "from": {"data": "summary"},
          "encode": {
            "enter": {
              "fill": {"value": "aliceblue"},
              "width": {"value": 2}
            },
            "update": {
              "yc": {"signal": "plotWidth / 2"},
              "height": {"signal": "plotWidth / 2"},
              "x": {"scale": "xscale", "field": "median"}
            }
          }
        }
      ]
    }
  ]
}

And this is how my boxplot looks like:

boxplot%20vega

2

@nyuriks can you please grab this to help when you get a moment? Thanks!

3

Fixed the issue by changing the firs mark update property at line 160 from value to field

      marks: [
    {
      type: rect
      from: {data: "summary"}
      encode: {
        enter: {
          fill: {value: "black"}
          height: {value: 1}
        }
        update: {
          yc: {signal: "plotWidth/2", offset: -0.5}
          x: {scale: "xscale", field: "min"}
          x2: {scale: "xscale", field: "max"}
        }
      }
    }

In the update field, for "x" scale, there should be "field" keyword instead of "value"

4

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