Search code examples
vega-lite

How to draw vertical lines based on a different quantity than that for the x channel in charts by row channel?


I'd like to have multiple time series drawn by row channel ("field": "PLATFORM"), x channel: ("field": "estimating-date-time"), and y channel ("field": "eta-variance"). Besides the lines of time series, I'd like to draw a vertical line at x = arrvial-time which is another field, conditioned by the value of "PLATFORM". The following is a working example of the charts except the desirable vertical line in each chart: vega-lite for multiple time series

Below is the desired effect with manual illustration: the desired effect with manual illustration

My question is how to add the vertical line for each chart to the specifications?

The challenge to me is that the field "arrival-time" from which the value used to draw the vertical line is not the same as the chart's x channel "estimating-data-time". I've found examples of drawing such a line using a value related to the same x channel.


Solution

  • You can do this by nesting a layer specification within a facet operator; something like this (open in editor):

    {
      "facet": {"row": {"field": "PLATFORM"}},
      "spec": {
        "height": 80,
        "width": 300,
        "layer": [
          {
            "mark": "line",
            "encoding": {
              "x": {"field": "estimating-date-time", "type": "temporal"},
              "y": {"field": "ETA-variance", "type": "quantitative"}
            }
          },
          {
            "mark": "rule",
            "encoding": {"x": {"field": "arrival-time", "type": "temporal"}}
          }
        ]
      },
      "data": {...}
    }
    

    enter image description here