Vega-Lite spec from Thu Oct 26 2023

spec.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "config": {
    "axis": {
      "domain": false,
      "grid": false,
      "labels": false,
      "ticks": false,
      "title": ""
    },
    "concat": {"spacing": 10},
    "view": {"stroke": null}
  },
  "data": {
    "values": [
      {"row": 1, "col": 1, "text": "A", "color": "gray-dark"},
      {"row": 1, "col": 2, "text": "B", "color": "gray-dark"},
      {"row": 1, "col": 3, "text": "C", "color": "gray-dark"},
      {"row": 1, "col": 4, "text": "D", "color": "yellow-dark"},
      {"row": 2, "col": 1, "text": "a", "color": "gray"},
      {"row": 2, "col": 2, "text": "t", "color": "gray"},
      {"row": 2, "col": 3, "text": "1", "color": "gray"},
      {"row": 2, "col": 4, "text": "3", "color": "yellow"},
      {"row": 3, "col": 1, "text": "b", "color": "gray"},
      {"row": 3, "col": 2, "text": "u", "color": "gray"},
      {"row": 3, "col": 3, "text": "2", "color": "gray"},
      {"row": 3, "col": 4, "text": "2", "color": "yellow"},
      {"row": 4, "col": 1, "text": "c", "color": "gray"},
      {"row": 4, "col": 2, "text": "v", "color": "gray"},
      {"row": 4, "col": 3, "text": "3", "color": "gray"},
      {"row": 4, "col": 4, "text": "N/A", "color": "white"}
    ]
  },
  "layer": [
    {
      "mark": "rect",
      "encoding": {
        "x": {"field": "col"},
        "y": {"field": "row"},
        "color": {
          "field": "color",
          "type": "nominal",
          "scale": {
            "domain": ["yellow", "yellow-dark", "gray", "gray-dark", "white"],
            "range": ["#fabf53", "#dea037", "#d0d1d2", "#767c85", "#FFFFFF"]
          },
          "legend": null
        }
      }
    },
    {
      "mark": "text",
      "encoding": {
        "x": {"field": "col"},
        "y": {"field": "row"},
        "text": {"field": "text", "type": "nominal"},
        "color": {
          "condition": {
            "test": "datum['color'] == 'yellow-dark'",
            "value": "white"
          },
          "value": "black"
        }
      }
    }
  ]
}