Dened - Custom Matrix with double headers

Hey H_insight. I believe I got everything implemented. Take a look and let me know. 

Notes: 

• When adjusting the size of the visual, you'll want to adjust the step width/height and the xOffset/yOffset for the rects sitting behind the row and column headers. You'll also want to adjust font size accordingly.
• Although there are alternatives, I added a calculated column to implement the logic for a custom sort order. The column is called "Sort Order". Here you should be able to implement any logic you'd like to determine the sorting of the products.  

Spec: 

{
  "data": {"name": "dataset"},
  "facet": {
    "column": {
      "field": "Category",
      "title": null,
      "header": {"labelFontSize": 14}
    }
  },
  "spec": {
    "width": {"step": 70},
    "height": {"step": 25},
    "encoding": {
      "y": {
        "field": "Product",
        "title": null,
        "sort": {"field": "Sort Order"},
        "axis": {
          "labelColor": "white",
          "labelFontWeight": 700
        }
      },
      "x": {
        "field": "Sub Cat",
        "axis": {
          "orient": "top",
          "labelAngle": 0,
          "labelColor": "white",
          "labelFontWeight": 700
        },
        "title": null
      }
    },
    "layer": [
      {
        "description": "x-axis background rects",
        "mark": {"type": "rect"},
        "encoding": {
          "y": {"value": 0},
          "yOffset": {"value": -25},
          "color": {
            "condition": {
              "test": "datum['Sub Cat'] == 'Overall'",
              "value": "#C45920"
            },
            "value": "#325964"
          }
        }
      },
      {
        "description": "y-axis background rects",
        "mark": {
          "type": "rect",
          "opacity": 0.5
        },
        "encoding": {
          "x": {"value": 0},
          "xOffset": {"value": -80},
          "color": {"value": "black"}
        }
      },
      {
        "description": "matrix value rects",
        "mark": {"type": "rect"},
        "encoding": {
          "color": {
            "field": "Value",
            "type": "nominal",
            "scale": {
              "domain": [1, 2, 3, 4, 5],
              "range": [
                "grey",
                "amber",
                "green",
                "red",
                "lightBlue"
              ]
            },
            "legend": null
          }
        }
      },
      {
        "mark": {
          "type": "text",
          "tooltip": true,
          "size": 14
        },
        "encoding": {
          "text": {
            "field": "Value",
            "type": "quantitative",
            "format": ",.0f"
          },
          "color": {
            "field": "Value",
            "type": "quantitative",
            "scale": {
              "domain": [1, 2, 3, 4, 5],
              "range": [
                "white",
                "white",
                "white",
                "white",
                "black"
              ]
            },
            "legend": null
          }
        }
      }
    ]
  },
  "resolve": {
    "scale": {
      "x": "independent",
      "y": "independent"
    }
  }
}

.pbix here