Hide a mark based on a condition

Question

I'm wondering if it's possible to show just one of the marks based on a condition or something that is fed by a parameter dynamically.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/stocks.csv"},
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"}
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "y": {"field": "price", "aggregate": "mean"},
        "size": {"value": 2},
        "color": {"field": "symbol"}
      }
    }
  ]
}

I want to create a parameter where a user is able to select one of the two values "line" or "rule." Based on the selection one of the two marks is shown, and the other is hidden.

The data does not change.

Answer 1

Here you go.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {"url": "data/stocks.csv"},
  "params": [
    {
      "name": "choice",
      "value": "rule",
      "bind": {"input": "radio", "options": ["rule", "line"]}
    }
  ],
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"},
        "color": {"field": "symbol", "type": "nominal"},
        "opacity": {
          "condition": {"test": "choice == 'rule'", "value": 0},
          "value": 1
        }
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "y": {"field": "price", "aggregate": "mean"},
        "size": {"value": 2},
        "color": {"field": "symbol"},
        "opacity": {
          "condition": {"test": "choice == 'line'", "value": 0},
          "value": 1
        }
      }
    }
  ]
}