vega-lite change color scale of selected bars

Question

I'm trying to make the selected bars follow a different color scale, as shown below

Using this code

"color": {
      "condition": {
          "test": {
            "and": [{"selection": "select"}, "length(data(\"select_store\"))"]
          },
          "field": "is_overview",
          "type": "nominal",
          "scale": {"range": ["red", "yellow"], "domain": [false, true]},
          "legend": null
        },
        "field": "is_overview",
        "type": "nominal",
        "scale": {"range": ["blue", "#9FB3C8"], "domain": [false, true]},
        "legend": null
    },

But it doesn't seem to do anything.

Here is the link to full code on vega editor.

Thanks for the help!

Edit: I was able to resolve the original question based on Jake's answer, however, I ran into another issue for a variant of the code---as show here---it's basically the same idea but using a brush---would really appreciate the help!

Answer 1

It's not possible to have two different encodings for a single channel: channel conditions can only switch between an encoding and a static value, or between two static values.

A way to get the behavior you want is to use a layered chart with a filter transform to overlay the alternate encoding. Here is an example (vega editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Midas Generated Visualization of dataframe STATE_distribution",
  "data": {
    "values": [
      {"STATE": "AK", "count": 2, "is_overview": true},
      {"STATE": "AL", "count": 173, "is_overview": true},
      {"STATE": "AR", "count": 63, "is_overview": true},
      {"STATE": "AZ", "count": 193, "is_overview": true},
      {"STATE": "CA", "count": 373, "is_overview": true},
      {"STATE": "CO", "count": 152, "is_overview": true},
      {"STATE": "FL", "count": 139, "is_overview": true},
      {"STATE": "AK", "count": 1, "is_overview": false},
      {"STATE": "AL", "count": 73, "is_overview": false},
      {"STATE": "AR", "count": 23, "is_overview": false},
      {"STATE": "AZ", "count": 93, "is_overview": false},
      {"STATE": "CA", "count": 73, "is_overview": false},
      {"STATE": "CO", "count": 52, "is_overview": false},
      {"STATE": "FL", "count": 39, "is_overview": false}
    ]
  },
  "encoding": {
    "x": {"field": "STATE", "type": "ordinal"},
    "y": {"field": "count", "type": "quantitative", "stack": null},
    "opacity": {"value": 0.5},
    "stroke": {"value": "#F0B429"}
  },
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "color": {
          "field": "is_overview",
          "type": "nominal",
          "scale": {"range": ["blue", "#9FB3C8"], "domain": [false, true]},
          "legend": null
        },
        "strokeWidth": {"value": 0}
      },
      "selection": {
        "select": {"type": "multi", "encodings": ["x"], "empty": "none"}
      }
    },
    {
      "mark": "bar",
      "transform": [{"filter": {"selection": "select"}}],
      "encoding": {
        "color": {
          "field": "is_overview",
          "type": "nominal",
          "scale": {"range": ["red", "yellow"], "domain": [false, true]},
          "legend": null
        },
        "strokeWidth": {"value": 3}
      }
    }
  ],
  "resolve": {"scale": {"color": "independent"}}
}