Overlay a scatterplot on top of a heatmap in `vega`

scatterplot-over-heatmap-vega.json

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 200,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "d1",
      "values": [
        {"a": 0, "b": 0, "c": "36.5"},
        {"a": 0, "b": 5, "c": "37.2"},
        {"a": 0, "b": 10, "c": "38"},
        {"a": 5, "b": 0, "c": "36.9"},
        {"a": 5, "b": 5, "c": "37.5"},
        {"a": 5, "b": 10, "c": "37.9"},
        {"a": 10, "b": 0, "c": "37.5"},
        {"a": 10, "b": 5, "c": "37.9"},
        {"a": 10, "b": 10, "c": "38.3"}
      ]
    },
    {
      "name": "d2",
      "values": [
        {"vx": 2, "vy": 5},
        {"vx": 6, "vy": 9},
        {"vx": 8, "vy": 3}
      ]
    }
  ],
  "legends": [
    {
      "fill": "colourScale",
      "type": "gradient",
      "title": "Avg. Temp (°C)",
      "titleFontSize": 12
    }
  ],
  "scales": [
    {
      "name": "colourScale",
      "type": "linear",
      "domain": {"data": "d1", "field": "c"},
      "range": {"scheme": "Plasma"}
    },
    {
      "name": "scxLin",
      "type": "linear",
      "domain": {"data": "d1", "field": "a"},
      "range": "width"
    },
    {
      "name": "scyLin",
      "type": "linear",
      "domain": {"data": "d1", "field": "b"},
      "range": "height"
    }
  ],
  "axes": [
    {"orient": "bottom", "scale": "scxLin", "title": "a", "offset" : 70, "tickMinStep" : 5},
    {"orient": "left", "scale": "scyLin", "title": "b", "offset" : 70, "tickMinStep" : 5}
  ],
  "marks": [
    {
      "type": "group",
      "marks": [
        
        {
          "type": "rect",
          "from": {"data": "d1"},
          "encode": {
            "enter": {
              "fill": {"scale": "colourScale", "field": "c"},
              "xc": {"scale": "scxLin", "field": "a"},
              "yc": {"scale": "scyLin", "field": "b"},
              "width": {"value" : 100},
              "height": {"value" : 100},
              "fillOpacity": {"value": 1}
            }
          }
        },
        {
          "type": "symbol",
          "from": {"data": "d2"},
          "encode": {
            "enter": {
              "x": {"scale": "scxLin", "field": "vx"},
              "y": {"scale": "scyLin", "field": "vy"},
              "fill" : {"value" : "#ffffff"},
              "shape" : {"value" : "cross"},
              "size" : { "value" : 130 }
            }
          }
        }

      ]
    }
  ]
}

rendered result

The same with colour-coded scatterpoints, using an ordinal colour scale for the fill colour

{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "width": 200,
  "height": 200,
  "padding": 5,
  "data": [
    {
      "name": "d1",
      "values": [
        {"a": 0, "b": 0, "c": "36.5"},
        {"a": 0, "b": 5, "c": "37.2"},
        {"a": 0, "b": 10, "c": "38"},
        {"a": 5, "b": 0, "c": "36.9"},
        {"a": 5, "b": 5, "c": "37.5"},
        {"a": 5, "b": 10, "c": "37.9"},
        {"a": 10, "b": 0, "c": "37.5"},
        {"a": 10, "b": 5, "c": "37.9"},
        {"a": 10, "b": 10, "c": "38.3"}
      ]
    },
    {
      "name": "d2",
      "values": [
        {"vx": 2, "vy": 5, "z" : 1},
        {"vx": 6, "vy": 9, "z" : 0},
        {"vx": 8, "vy": 3, "z" : 1}
      ]
    }
  ],
  "legends": [
    {
      "fill": "colourScale",
      "type": "gradient",
      "title": "Avg. Temp (°C)",
      "titleFontSize": 12
    }
  ],
  "scales": [
    {
      "name": "colourScale",
      "type": "linear",
      "domain": {"data": "d1", "field": "c"},
      "range": {"scheme": "Plasma"}
    },
    {
      "name": "scxLin",
      "type": "linear",
      "domain": {"data": "d1", "field": "a"},
      "range": "width"
    },
    {
      "name": "scyLin",
      "type": "linear",
      "domain": {"data": "d1", "field": "b"},
      "range": "height"
    },
    {"name" : "cs2", 
     "type" : "ordinal", 
     "domain" : {"data" : "d2", "field" : "z"}, 
     "range" : ["#ff0000", "#0000ff"]}
  ],
  "axes": [
    {"orient": "bottom", "scale": "scxLin", "title": "a", "offset" : 70, "tickMinStep" : 5},
    {"orient": "left", "scale": "scyLin", "title": "b", "offset" : 70, "tickMinStep" : 5}
  ],
  "marks": [
    {
      "type": "group",
      "marks": [
        
        {
          "type": "rect",
          "from": {"data": "d1"},
          "encode": {
            "enter": {
              "fill": {"scale": "colourScale", "field": "c"},
              "xc": {"scale": "scxLin", "field": "a"},
              "yc": {"scale": "scyLin", "field": "b"},
              "width": {"value" : 100},
              "height": {"value" : 100},
              "fillOpacity": {"value": 0.5}
            }
          }
        },
        {
          "type": "symbol",
          "from": {"data": "d2"},
          "encode": {
            "enter": {
              "x": {"scale": "scxLin", "field": "vx"},
              "y": {"scale": "scyLin", "field": "vy"},
              "fill" : {"scale" : "cs2", "field" : "z"},
              "shape" : {"value" : "cross"},
              "size" : { "value" : 130 }
            }
          }
        }

      ]
    }
  ]
}