Encode condition for a stroke property with param and a field

Question

In the example below, I have a "params" set to pointerover, then in the encoding block, I have a stroke property that I'd like to set based on the "params" and a field in the dataset. Logically speaking, I want to hover over and at the same time datum.count has to be greater than 0, then the stroke property will be black.

The test condition in the below example does not work. Is there a way to combine these 2 conditions?

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"actual": "A", "predicted": "A", "count": 13},
      {"actual": "A", "predicted": "B", "count": 0},
      {"actual": "A", "predicted": "C", "count": 0},
      {"actual": "B", "predicted": "A", "count": 0},
      {"actual": "B", "predicted": "B", "count": 10},
      {"actual": "B", "predicted": "C", "count": 6},
      {"actual": "C", "predicted": "A", "count": 0},
      {"actual": "C", "predicted": "B", "count": 0},
      {"actual": "C", "predicted": "C", "count": 9}
    ]
  },
  "params": [
    {"name": "highlight", "select": {"type": "point", "on": "pointerover"}}
  ],
  "mark": {"type": "rect", "strokeWidth": 2},
  "encoding": {
    "y": {"field": "actual", "type": "nominal"},
    "x": {"field": "predicted", "type": "nominal"},
    "fill": {"field": "count", "type": "quantitative"},
    "stroke": {
      "condition": {"test": "highlight && datum.count > 0", "value": "black"},
      "value": null
    },
    "opacity": {"condition": {"param": "highlight", "value": 1}, "value": 0.5},
    "order": {"condition": {"param": "highlight", "value": 1}, "value": 0}
  },
  "config": {
    "scale": {"bandPaddingInner": 0, "bandPaddingOuter": 0},
    "view": {"step": 40},
    "range": {"ramp": {"scheme": "yellowgreenblue"}},
    "axis": {"domain": false}
  }
}

I tried the following

"stroke": {
      "condition": {"test": "highlight && datum.count > 0", "value": "black"},
      "value": null
    }

Answer 1

Try this:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"actual": "A", "predicted": "A", "count": 13},
      {"actual": "A", "predicted": "B", "count": 0},
      {"actual": "A", "predicted": "C", "count": 0},
      {"actual": "B", "predicted": "A", "count": 0},
      {"actual": "B", "predicted": "B", "count": 10},
      {"actual": "B", "predicted": "C", "count": 6},
      {"actual": "C", "predicted": "A", "count": 0},
      {"actual": "C", "predicted": "B", "count": 0},
      {"actual": "C", "predicted": "C", "count": 9}
    ]
  },
  "params": [
    {"name": "highlight", "select": {"type": "point", "on": "pointerover"}}
  ],
  "mark": {"type": "rect", "strokeWidth": 2},
  "encoding": {
    "y": {"field": "actual", "type": "nominal"},
    "x": {"field": "predicted", "type": "nominal"},
    "fill": {"field": "count", "type": "quantitative"},
    "stroke": {
      "condition": {
        "param": "highlight",
        "value": {"expr": "datum.count>0?'red':'transparent'"}
      },
      "value": "transparent"
    },
    "opacity": {"condition": {"param": "highlight", "value": 1}, "value": 0.5},
    "order": {"condition": {"param": "highlight", "value": 1}, "value": 0}
  },
  "config": {
    "scale": {"bandPaddingInner": 0, "bandPaddingOuter": 0},
    "view": {"step": 40},
    "range": {"ramp": {"scheme": "yellowgreenblue"}},
    "axis": {"domain": false}
  }
}