Can I make it look more like a box plot

Question

I am working with Elasticsearch which provides the min, max, Q1, Q2 and Q3 data. All I have to do is to plot it in form of a box plot. Kibana as of now only supports vega-lite version 2.6.0 and vega 4.3.0.

Here is a complete sample I have made.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": 100,
  "height": 200,
  "padding": 10,
 

  "data": {
    "name": "sample",
    "values": [
      {
      "task": "A", 
      "min" : 72.66500091552734,
      "max" : 139.54299926757812,
      "q1" : 98.68599700927734,
      "q2" : 120.12850189208984,
      "q3" : 121.82099914550781
      },
      {
      "task": "B", 
      "min" : 71.66500091552734,
      "max" : 159.54299926757812,
      "q1" : 88.68599700927734,
      "q2" : 110.12850189208984,
      "q3" : 141.82099914550781
      },
      {
      "task": "c", 
      "min" : 45.66500091552734,
      "max" : 169.54299926757812,
      "q1" : 88.68599700927734,
      "q2" : 110.12850189208984,
      "q3" : 141.82099914550781
      }
    ]
  },
  
  "layer": [
    {
      "width": 5,
      "encoding": {
        "x": {"type": "ordinal","field": "task"},
        "y": {"type": "quantitative","field": "min"},
        "y2": {"type": "quantitative","field": "max"},
        "color": {"value": "#2CB5E8"}
      },
      "mark": {
        "type": "bar"
      }
    },
    {
      "width": 20,
      "encoding": {
        "x": {"type": "ordinal","field": "task"},
        "y": {"type": "quantitative","field": "q1"},
        "y2": {"type": "quantitative","field": "q3"},
        "color": {"value": "#EB985E"}
      },
      "mark": "bar"
    },
    {
      "encoding": {
        "x": {"type": "ordinal","field": "task"},
        "y": {"type": "quantitative","field": "q2"},
        "color": {"value": "#090502"}
      },
      "mark": "point"
    }
  ]
}

This is what the plot looks like:

But box plot look something like this

The current version of vega-lite does support the boxplot. But I am stuck with older version.

I am trying to reduce the width of the bar plot for min and max. And keep it thick for Q1 and Q3. Somehow it is not working.

Also is it possible to plot Q2 as a flat line instead of a point?

Answer 1

You can construct a boxplot manually using a layer chart with a bar, tick, and rule mark. For example (view in editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "width": 100,
  "height": 200,
  "data": {
    "name": "sample",
    "values": [
      {
        "task": "A",
        "min": 72.66500091552734,
        "max": 139.54299926757812,
        "q1": 98.68599700927734,
        "q2": 120.12850189208984,
        "q3": 121.82099914550781
      },
      {
        "task": "B",
        "min": 71.66500091552734,
        "max": 159.54299926757812,
        "q1": 88.68599700927734,
        "q2": 110.12850189208984,
        "q3": 141.8209991455078
      },
      {
        "task": "c",
        "min": 45.66500091552734,
        "max": 169.54299926757812,
        "q1": 88.68599700927734,
        "q2": 110.12850189208984,
        "q3": 141.8209991455078
      }
    ]
  },
  "layer": [
    {
      "encoding": {
        "x": {"type": "ordinal", "field": "task"},
        "y": {"type": "quantitative", "field": "min"},
        "y2": {"type": "quantitative", "field": "max"}
      },
      "mark": {"type": "rule", "color": "black"}
    },
    {
      "encoding": {
        "x": {"type": "ordinal", "field": "task"},
        "y": {"type": "quantitative", "field": "q1"},
        "y2": {"type": "quantitative", "field": "q3"}
      },
      "mark": {"type": "bar", "color": "#EB985E", "size": 20}
    },
    {
      "encoding": {
        "x": {"type": "ordinal", "field": "task"},
        "y": {"type": "quantitative", "field": "q2"}
      },
      "mark": {"type": "tick", "color": "gray", "size": 20}
    }
  ]
}