how to align rule on x axis with line chart data in vega-lite - vega-lite

Question

I am getting this chart where rule is not correctly aligned on x axis.
group a has value 3.2 and it is not between 2 and 4 on x axis as supposed to. same for b group and c group.
I tried resolve, scale separately line chart and rule without success
Result should be that rule for group a, group b and group c lie on axis x aligned the value they have.
Here is my code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 606,
"height":384,
"data": {
"values": [
{
"datapoints": {
"division": [
{
"participation_duration": {
"total": {
"mean": 384,
"a": 190,
"b": 365,
"c": 495,
"distribution": {
"min": 0,
"max": 10,
"step": 2,
"data": [0,0.3,0.1,0.2,0.2, 0]
}
}
}
}
]
}
}
]
},
"transform": [
{ "calculate": "datum.datapoints.division", "as": "D" },
{ "flatten": ["D"] },
{"calculate": "datum.D.participation_duration.total.distribution.data", "as": "y"},
{"flatten": ["y"]},
{
"window": [{ "op": "count", "field": "y", "as": "i" }],
"frame": [null, 0]
},
{ "calculate": "(datum.i-1)*2", "as": "x" }
],
"layer": [
{
"mark": {"type":"line",
"point": false,
"interpolate": "cardinal",
"color":"blueviolet"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"title": "",
"axis":{
"tickCount": 5,
"grid": true
}
},
"y": {
"scale":{"domain":[0,0.3]},
"field": "y",
"type": "quantitative",
"title": "",
"axis": {
"orient": "right",
"tickCount": 3,
"format": "%"
}
}
}
},
{
"transform": [
{"calculate": "datum.D.participation_duration.total", "as": "total"},
{"calculate": "datum.total.a/60", "as": "a group"},
{"calculate": "datum.total.b/60", "as": "b group"},
{"calculate": "datum.total.c/60", "as": "c group"},
{"fold": ["a group", "b group", "c group"]}
],
"encoding": {
"x":{
"field": "value",
"title":null,
"axis":{
"format":".2",
"grid": false,
"domain": false,
"labels":true,
"ticks": false,
"labelAlign":"center",
"labelAngle":0,
"labelPadding": 15
}
},
"color":{
"field": "key",
"legend":null
},
"text": {"field":"key"}
},
"layer": [
{
"mark":{"type":"rule",
"strokeWidth": 5,
"strokeDash":[3,16]
}},
{
"mark":{"type": "text", "align": "center", "dy":-220}
}
]
}
]
}````
Please advise which part is missing.
Thank you

Answer 1

You mean like this?
You need to explicitly set the type.
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"width": 606,
"height": 384,
"data": {
"values": [
{
"datapoints": {
"division": [
{
"participation_duration": {
"total": {
"mean": 384,
"a": 190,
"b": 365,
"c": 495,
"distribution": {
"min": 0,
"max": 10,
"step": 2,
"data": [0, 0.3, 0.1, 0.2, 0.2, 0]
}
}
}
}
]
}
}
]
},
"transform": [
{"calculate": "datum.datapoints.division", "as": "D"},
{"flatten": ["D"]},
{
"calculate": "datum.D.participation_duration.total.distribution.data",
"as": "y"
},
{"flatten": ["y"]},
{"window": [{"op": "count", "field": "y", "as": "i"}], "frame": [null, 0]},
{"calculate": "(datum.i-1)*2", "as": "x"}
],
"layer": [
{
"mark": {
"type": "line",
"point": false,
"interpolate": "cardinal",
"color": "blueviolet"
},
"encoding": {
"x": {
"field": "x",
"type": "quantitative",
"title": "",
"axis": {"tickCount": 5, "grid": true}
},
"y": {
"scale": {"domain": [0, 0.3]},
"field": "y",
"type": "quantitative",
"title": "",
"axis": {"orient": "right", "tickCount": 3, "format": "%"}
}
}
},
{
"transform": [
{"calculate": "datum.D.participation_duration.total", "as": "total"},
{"calculate": "datum.total.a/60", "as": "a group"},
{"calculate": "datum.total.b/60", "as": "b group"},
{"calculate": "datum.total.c/60", "as": "c group"},
{"fold": ["a group", "b group", "c group"]}
],
"encoding": {
"x": {
"field": "value",
"title": null,
"type": "quantitative",
"axis": {
"format": ".2",
"grid": false,
"domain": false,
"labels": true,
"ticks": false,
"labelAlign": "center",
"labelAngle": 0,
"labelPadding": 15
}
},
"color": {"field": "key", "legend": null},
"text": {"field": "key"}
},
"layer": [
{"mark": {"type": "rule", "strokeWidth": 5, "strokeDash": [3, 16]}},
{"mark": {"type": "text", "align": "center", "dy": -220}}
]
}
]
}