Vega-lite: comparing heatmap and table-bubble-plot

with-overlay-text.vg.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/cars.json"},
  "transform": [
    {
      "aggregate": [{"op": "count", "as": "num_cars"}],
      "groupby": ["Origin", "Cylinders"]
    }
  ],
  "resolve": {
    "legend": {
      "color": "independent",
      "size": "independent"
    }
  },
  "vconcat": [
    {
      "layer": [
        {
          "mark": {
            "type": "rect",
            "tooltip": true
          },
          "encoding": {
            "y": {"field": "Origin", "type": "nominal"},
            "x": {"field": "Cylinders", "type": "ordinal"},
            "color": {"field": "num_cars", "type": "quantitative"}
          }
        },
        {
          "mark": "text",
          "encoding": {
            "y": {"field": "Origin", "type": "nominal"},
            "x": {"field": "Cylinders", "type": "ordinal"},
            "text": {"field": "num_cars", "type": "quantitative"},
            "color": {
              "condition": {"test": "datum['num_cars'] < 40", "value": "black"},
              "value": "white"
            }
          }
        }
      ]
    },
    {
      "mark": {
        "type": "circle",
        "tooltip": true
      },
      "encoding": {
        "y": {
          "field": "Origin",
          "type": "nominal"
        },
        "x": {
          "field": "Cylinders",
          "type": "ordinal"
        },
        "size": {
          "type": "quantitative",
          "field": "num_cars"
        },
        "opacity": {
          "value": 1
        }
      }
    }
  ]
}

without-overlay-text.vg.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {"url": "data/cars.json"},
  "resolve": {
    "legend": {
      "color": "independent",
      "size": "independent"
    }
  },
  "vconcat": [
    {
      "mark": {
        "type": "rect",
        "tooltip": true
      },
      "encoding": {
        "y": {"field": "Origin", "type": "nominal"},
        "x": {"field": "Cylinders", "type": "ordinal"},
        "color": {"aggregate": "count", "type": "quantitative"}
      }
    },

    {
      "mark": {
        "type": "circle",
        "tooltip": true
      },
      "encoding": {
        "y": {
          "field": "Origin",
          "type": "nominal"
        },
        "x": {
          "field": "Cylinders",
          "type": "ordinal"
        },
        "size": {
          "type": "quantitative",
          "aggregate": "count"
        }
    }
  }
  ]
}