Forum Discussion

GlenWL's avatar
GlenWL
Frequent Visitor
3 years ago
Solved

Deneb Heatmap with Labels

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"
}
]
}
}
]
}
]
}

  • 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.

     

9 Replies

  • 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's avatar
      GlenWL
      Frequent Visitor

      Amazing, thank you so much for this.

      • giammariam's avatar
        giammariam
        Solution Sage

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

  • 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's avatar
      GlenWL
      Frequent Visitor

      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 

    • GlenWL's avatar
      GlenWL
      Frequent Visitor

      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.