select both bars in the same x position with layered barcharts

Question

I have the following visualization, which, if you paste to the editor, is a layered barchart. Right now, when I select a bar, I do not want to just select the bar itself but the bar(s) that are in the same x position.

The only solution I can think of has to use vega and explicitly reference the underlying dataset (since the selection signal is offset based, and not data based).

Might you know how this might be done in vega-lite?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "selection": {
    "select": {"type": "multi"}
  },
  "data": {
    "values": [
      {"STAT_CAUSE_DESCR": "Arson", "count": 804, "is_overview": true},
      {"STAT_CAUSE_DESCR": "Arson", "count": 604, "is_overview": false},
      {"STAT_CAUSE_DESCR": "Campfire", "count": 231, "is_overview": true},
      {"STAT_CAUSE_DESCR": "Children", "count": 97, "is_overview": true},
      {"STAT_CAUSE_DESCR": "Children", "count": 50, "is_overview": false},
      {
        "STAT_CAUSE_DESCR": "Debris Burning",
        "count": 1175,
        "is_overview": true
      },
      {
        "STAT_CAUSE_DESCR": "Debris Burning",
        "count": 115,
        "is_overview": false
      },
      {"STAT_CAUSE_DESCR": "Equipment Use", "count": 301, "is_overview": true},
      {"STAT_CAUSE_DESCR": "Equipment Use", "count": 51, "is_overview": false},
      {
        "STAT_CAUSE_DESCR": "Missing/Undefined",
        "count": 233,
        "is_overview": true
      }
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "STAT_CAUSE_DESCR", "type": "ordinal"},
    "y": {"field": "count", "type": "quantitative", "stack": null},
    "color": {
      "field": "is_overview",
      "type": "nominal",
      "scale": {"range": ["#003E6B", "#9FB3C8"], "domain": [false, true]},
      "legend": null
    },
    "opacity": {"value": 0.5},
    "stroke": {"value": "#F0B429"},
    "strokeWidth": {
      "condition": [
        {
          "test": {
            "and": [{"selection": "select"}, "length(data(\"select_store\"))"]
          },
          "value": 3
        }
      ],
      "value": 0
    }
  },
  "config": {}
}

Answer 1

You can specify the encodings you want your selection to apply to within the selection definition. In your case, the selection specification would look like this:

  "selection": {
    "select": {"type": "multi", "encodings": ["x"]}
  },

View the result here: