vega-lite tick z-index when there is occlusion?

Question

In a visualization I have I want to order the marks when there is occlusion (based on an attribute of the mark). I tried using opacity, but I would prefer being able to directly control which element is laid on top. I checked out the doc and saw some discussions https://github.com/vega/vega-lite/issues/1684, but cannot locate if there is a way to directly do this. Or if I can creatively use layers to achieve the same result?

Open the Chart in the Vega Editor You can see that my ticks are overlapping, and I want to make the gray one ("scroll") have a lower z-index than every other mark. Right now I am using opacity, but it's still occlusion that I like to avoid.

Thanks so much!

Answer 1

You can set the z-index using the order encoding, however it only accepts sort = "ascending" or "descending", which doesn't directly help you here.

You can get around this limitation by using a calculate transform to define the particular z-order you want:

"transform": [
  {"calculate": "datum.actionChart == 'scroll' ? 0 : 1", "as": "zorder"}
]

And then reference that new field in the order encoding:

"encoding": {
  ...
  "order": {"field": "zorder", "type": "quantitative"}
}

The result looks like this (Open the Chart in the Vega Editor):