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: