热图中的文本叠加

Question

是否可以在可选择的热图中叠加文本

https://vega.github.io/editor/#/examples/vega-lite/selection_heatmap

如果我在可选热图中绘制二进制的实际热图与预测热图，我可以将文本覆盖为具有相应值的真阳性、FP、TN、FN 并关闭图例

这里是完整代码

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.4.json",
  "data": {
    "values": [
      {"actual": "Good", "predicted": "Bad", "count": 6386},
      {"actual": "Bad", "predicted": "Good", "count": 1261},
      {"actual": "Bad", "predicted": "Bad", "count": 6386},
      {"actual": "Good", "predicted": "Good", "count": 24030}
    ]
  },
  "mark": {"type": "rect", "strokeWidth": 2},
  "encoding": {
    "y": {
      "field": "actual",
      "type": "nominal"
    },
    "x": {
      "field": "predicted",
      "type": "nominal"
    },
    "fill": {
      "field": "count",
      "type": "quantitative"
    },
  "config": {
    "scale": {
      "bandPaddingInner": 0,
      "bandPaddingOuter": 0
    }
  }
}

输出像

是否可以从索引中提取值并提供给计数值

    "url" : {
        "%context%": true,
        "index": "index",
        "body": {
          "size":1000,
          "_source": ["modelMetrics"],
        }
      }  
    "format": {"property": "hits.hits"}
  },

其中索引有

        "_source" : {
          "modelMetrics" : {
            "TN" : 110868,
            "FP" : 6386,
            "FN" : 1261,
            "TP" : 24030,
          }
         }

Answer 1

您可以使用 Layered chart construct. For example (view in editor):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.4.json",
  "data": {
    "values": [
      {"actual": "Good", "predicted": "Bad", "label": "FP", "count": 6386},
      {"actual": "Bad", "predicted": "Good", "label": "FN", "count": 1261},
      {"actual": "Bad", "predicted": "Bad", "label": "TN", "count": 6386},
      {"actual": "Good", "predicted": "Good", "label": "TP", "count": 24030}
    ]
  },
  "encoding": {
    "y": {"field": "actual", "type": "nominal"},
    "x": {"field": "predicted", "type": "nominal"}
  },
  "layer": [
    {
      "mark": {"type": "rect", "strokeWidth": 2},
      "encoding": {
        "fill": {"field": "count", "type": "quantitative", "legend": null}
      }
    },
    {
      "mark": {"type": "text", "dy": -5},
      "encoding": {
        "text": {"field": "label", "type": "nominal"},
        "color": {
          "condition": {"test": "datum.count < 10000", "value": "black"},
          "value": "white"
        }
      }
    },
    {
      "mark": {"type": "text", "dy": 5},
      "encoding": {
        "text": {"field": "count", "type": "nominal"},
        "color": {
          "condition": {"test": "datum.count < 10000", "value": "black"},
          "value": "white"
        }
      }
    }
  ],
  "width": 100,
  "height": 100
}

热图中的文本叠加

Text overlay in heatmap

vega-lite

vega