Resolved: Vega-lite mark not showing colors as specified

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Horizontally concatenated charts that show different types of discretizing scales.",
  "data": {
    "values": [
      {"a": "A", "b": 2020, "c": 11, "d": 3},
      {"a": "A", "b": 2020, "c": 40.2, "d": 3},
      {"a": "A", "b": 2021, "c": 40.2, "d": 2},
      {"a": "A", "b": 2022, "c": 70.2, "d": 1},
      {"a": "B", "b": 2020, "c": 20.2, "d": 1},
      {"a": "B", "b": 2021, "c": 20.2, "d": 2},
      {"a": "B", "b": 2021, "c": 20.2, "d": 2},
      {"a": "B", "b": 2022, "c": 20.2, "d": 1},
      {"a": "C", "b": 2021, "c": 20.2, "d": 1},
      {"a": "C", "b": 2022, "c": 20.2, "d": 1},
      {"a": "C", "b": 2022, "c": 20.2, "d": 1}
    ]
  },
  "mark": "circle",
  "encoding": {
    "y": {
      "field": "a",
      "type": "nominal",
      "sort": null,
      "axis": {"ticks": false, "domain": false, "title": null}
    },
    "x": {"field": "b", "type": "ordinal"},
    "size": {
      "field": "b",
      "type": "quantitative",
      "scale": {
        "type": "threshold",
        "domain": [30, 70],
        "range": [80, 200, 320]
      }
    },
    "color": {
      "field": "d",
      "type": "quantitative",
      "scale": {
        "type": "threshold",
        "domain": [2, 3],
        "range": ["#FF0000", "#FBFF00", "#00FF00"]
      },
      "legend": {"title": "Threshold"}
    }
  },
  "resolve": {"scale": {"color": "independent", "size": "independent"}}
}

  "mark":{"type": "circle", "opacity":1},