Deneb Heatmap with Labels

[GlenWL]

I'm really struggling to get data labels to show in my deneb heatmap matrix. Very new to deneb and vega-lite so was following Daniel M-P's tutorial that he did on the Reid Havens YouTube channel. However, he didn't add the labels so I'm trying to get it to work myself, but knowing where to place the line of code is causing me problems.

Here's the code without the labels.

Any help would be much appreciated.

{
"data": {"name": "dataset"},
"resolve": {
"scale": {"color": "independent"}
},
"transform": [
{
"calculate": "datum['__selected__'] == 'off' ? 0 : datum['Transfers']",
"as": "Transfers_Selected"
}
],
"vconcat": [
{
"hconcat": [
{
"name": "Main matrix",
"mark": {
"type": "rect",
"tooltip": true
},
"encoding": {
"x": {
"field": "WeekDay",
"sort": null
},
"y": {
"field": "Hour",
"sort": null
},
"fill": {
"field": "Transfers",
"type": "quantitative",
"legend": null,
"scale": {
"range": [
"#D5E9F9",
"#FFE45E",
"#FD0E33"
]
}
},
"opacity": {
"condition": {
"test": {
"field": "__selected__",
"equal": "off"
},
"value": 0.3
},
"value": 1
}
}
},
{
"name": "Marginal bars (row)",
"width": 95,
"layer": [
{
"mark": {
"type": "bar",
"height": {"band": 0.9},
"opacity": 0.3
},
"encoding": {
"x": {
"field": "Transfers",
"aggregate": "sum"
}
}
},
{
"mark": {
"type": "text",
"color": "white",
"xOffset": 22
},
"encoding": {
"text": {
"field": "Transfers_Selected",
"type": "quantitative",
"aggregate": "sum",
"formatType": "pbiFormat",
"format": "#,0"
}
}
},
{
"mark": {
"type": "bar",
"height": {"band": 0.9},
"tooltip": true
}
}
],
"encoding": {
"y": {
"field": "Hour",
"sort": null,
"axis": null
},
"x": {
"field": "Transfers_Selected",
"type": "quantitative",
"aggregate": "sum"
},
"tooltip": [
{
"field": "Hour",
"title": "Hour of Day"
},
{
"field": "Transfers",
"aggregate": "sum"
},
{
"field": "Transfers_Selected",
"aggregate": "sum",
"title": "Transfers (Highlighted)",
"formatType": "pbiFormat",
"format": "#,0"
}
]
}
}
]
},
{
"hconcat": [
{
"name": "Marginal bars (col)",
"height": 65,
"layer": [
{
"mark": {
"type": "bar",
"width": {"band": 0.96},
"opacity": 0.3
},
"encoding": {
"y": {
"field": "Transfers",
"aggregate": "sum"
}
}
},
{
"mark": {
"type": "text",
"color": "white",
"yOffset": 14
},
"encoding": {
"text": {
"field": "Transfers_Selected",
"type": "quantitative",
"aggregate": "sum",
"formatType": "pbiFormat",
"format": "#,0"
}
}
},
{
"mark": {
"type": "bar",
"width": {"band": 0.96},
"tooltip": true
}
}
],
"encoding": {
"x": {
"field": "WeekDay",
"sort": null,
"axis": null
},
"y": {
"field": "Transfers_Selected",
"type": "quantitative",
"aggregate": "sum",
"scale": {"reverse": true}
},
"tooltip": [
{
"field": "WeekDay",
"title": "Day of Week"
},
{
"field": "Transfers",
"aggregate": "sum"
},
{
"field": "Transfers_Selected",
"aggregate": "sum",
"title": "Transfers (Highlighted)",
"formatType": "pbiFormat",
"format": "#,0"
}
]
}
}
]
}
]
}

[giammariam · Accepted solution]

Hey @GlenWL The solution .pbix can be found here. You may have to tinker with things to get the cross-highlighting working with the outer bars.

[GlenWL]

Amazing, thank you so much for this.

[giammariam]

Tag me in the future if you ever need any Deneb help. I always enjoy getting practice in. 

[giammariam]

Hey @GlenWL, unfortunately I cannot access that link.

[GlenWL]

Really strange, just tested same link with a colleague and he can access and download the pbix without issues. I'll try it again with a zipped file.

[GlenWL]

Here's a zipped version...

Zipped PBIX 

[giammariam]

😕

[giammariam]

Hey @GlenWL. I just implemented this for someone else. Take a look at this thread.

If this helps you get the labels added, please consider kudoing and liking this message. If you still need additional help, please provide a santized dataset (see here) and I'll try to get back to you ASAP.

[GlenWL]

Thanks for quick reply but still stuggling with it. Maybe I'm adding the text in the wrong place in the script? Tried lots of variations but can't get it to work 😞

Here's a link to the PBIX 

PBIX File