selectionHeatMap.vl

{
    "config": {
        "scale": {
            "bandPaddingInner": 0,
            "bandPaddingOuter": 0
        },
        "range": {
            "ramp": {
                "scheme": "yellowgreenblue"
            }
        },
        "view": {
            "step": 40
        },
        "axis": {
            "domain": false
        }
    },
    "mark": {
        "strokeWidth": 2,
        "type": "rect"
    },
    "data": {
        "values": [
            {
                "predicted": "A",
                "count": 13,
                "actual": "A"
            },
            {
                "predicted": "B",
                "count": 0,
                "actual": "A"
            },
            {
                "predicted": "C",
                "count": 0,
                "actual": "A"
            },
            {
                "predicted": "A",
                "count": 0,
                "actual": "B"
            },
            {
                "predicted": "B",
                "count": 10,
                "actual": "B"
            },
            {
                "predicted": "C",
                "count": 6,
                "actual": "B"
            },
            {
                "predicted": "A",
                "count": 0,
                "actual": "C"
            },
            {
                "predicted": "B",
                "count": 0,
                "actual": "C"
            },
            {
                "predicted": "C",
                "count": 9,
                "actual": "C"
            }
        ]
    },
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "selection": {
        "highlight": {
            "type": "single"
        }
    },
    "encoding": {
        "opacity": {
            "value": 0.5,
            "condition": {
                "value": 1,
                "selection": "highlight"
            }
        },
        "stroke": {
            "value": null,
            "condition": {
                "value": "black",
                "test": {
                    "and": [
                        {
                            "selection": "highlight"
                        },
                        "length(data(\"highlight_store\"))"
                    ]
                }
            }
        },
        "fill": {
            "field": "count",
            "type": "quantitative"
        },
        "x": {
            "field": "predicted",
            "type": "nominal"
        },
        "order": {
            "value": 0,
            "condition": {
                "value": 1,
                "selection": "highlight"
            }
        },
        "y": {
            "field": "actual",
            "type": "nominal"
        }
    }
}