Search code examples
vega-lite

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

I am getting this chart where rule is not correctly aligned on x axis. see image

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
Solution

  • You mean like this? enter image description here

    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}}
      ]
    }
  ]
}