Deneb data label help

[Doug7983]

I haven't been able to clear a hurdle with the labels on a Deneb bar chart.

By default, as you can see in the GIF, the labels are on. I want the labels to be off by default. I only want to see a label when the user clicks on a row in the table. 

I'm unable to share a workbook due to restrictive workplace security measures. I will paste in some dummy data and my spec below:

{
"data": {"name": "dataset"},
"layer": [
{
"mark": {
"type": "bar",
"opacity": 0.3,
"tooltip": true
},
"encoding": {
"x": {
"field": "ModelKey",
"type": "nominal",
"sort": {
"field": "Min of MAPEVl",
"order": "ascending"
}
},
"y": {
"field": "Min of MAPEVl",
"type": "quantitative"
},
"color": {"value": "lightgrey"}
}
},
{
"mark": {
"type": "bar",
"tooltip": true
},
"encoding": {
"x": {
"field": "ModelKey",
"type": "nominal",
"sort": {
"field": "Min of MAPEVl",
"order": "ascending"
}
},
"y": {
"field": "Min of MAPEVl__highlight",
"type": "quantitative"
},
"color": {
"condition": {
"test": "datum['Min of MAPEVl__highlight'] !== null",
"value": "steelblue"
},
"value": "lightgrey"
}
}
},
{
"mark": {
"type": "text",
"align": "center",
"baseline": "bottom",
"dy": -5
},
"encoding": {
"x": {
"field": "ModelKey",
"type": "nominal",
"sort": {
"field": "Min of MAPEVl",
"order": "ascending"
}
},
"y": {
"field": "Min of MAPEVl__highlight",
"type": "quantitative"
},
"text": {
"field": "Min of MAPEVl__highlight",
"type": "quantitative",
"format": ".2f"
},
"color": {"value": "black"},
"opacity": {
"condition": {
"test": "datum['Min of MAPEVl__highlight'] !== null",
"value": 1
},
"value": 0
}
}
}
],
"encoding": {
"x": {
"field": "ModelKey",
"type": "nominal",
"sort": {
"field": "Min of MAPEVl",
"order": "ascending"
},
"axis": null
},
"y": {
"type": "quantitative",
"axis": {
"title": null,
"grid": false
}
}
}
}

ModelKey	MAPEVl
362609410_61	5.08
362619010_61	3.99
362706010_61	5.09
362715610_61	5.04
362968800_61	4.47
362978400_61	4.92
362978410_61	5.04
363134910_61	4.83
363242600_61	8.28
363289400_61	7.13
363664400_61	4.94
363854000_61	3.85
363961500_61	5.71
363961510_61	5.79
364201100_61	5.78
364344500_61	5.23
364380810_61	5.49
364404000_61	4.92
364622800_61	5.12

Anyone have a solution to share? @giammariam , maybe?

Thanks.

[dm-p]

Hi @Doug7983,

if you're using the highlight values, I'd try a filter transform on the layer that uses the text mark to only return values that are non-null and have a non-neutral highlight status, e.g.:

      "transform": [
        {"filter": "datum['Min of MAPEVl__highlight'] !== null && datum['Min of MAPEVl__highlightStatus'] !== 'neutral'"}
      ],

This may affect the sort order of the marks, so you might need to use an order channel in your encoding or sort by the appropriate field, but hopefully this is along the right lines for you.

Here's your original spec with the changes above:

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "bar",
        "opacity": 0.3
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0
          },
          "value": 1
        }
      }
    },
    {
      "transform": [
        {"filter": "datum['Min of MAPEVl__highlight'] !== null && datum['Min of MAPEVl__highlightStatus'] !== 'neutral'"}
      ],
      "mark": {
        "type": "text",
        "baseline": "bottom",
        "dy": -5
      },
      "encoding": {
        "text": {
          "field": "Min of MAPEVl__highlight",
          "type": "quantitative",
          "format": ".2f"
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "ModelKey",
      "type": "nominal",
      "sort": {
        "field": "Min of MAPEVl",
        "order": "ascending"
      },
      "axis": null
    },
    "y": {
      "field": "Min of MAPEVl",
      "type": "quantitative",
      "axis": {"title": "Min of MAPEVl"}
    }
  }
}

Cheers,

Daniel

[Doug7983]

Hi @dm-p,

Thank you for your reply. Assuming that I could restore the sorting as you suggested, is it possible to also add the highlighting of the selected bar back in? It helps the selection stand out more than just a data label alone.

Again, thanks for the help. I'm still in the fumbling around stage with Deneb, but it has helped me deliver visuals that just aren't possible with the default PBI options.

[dm-p · Accepted solution]

Hi @Doug7983,

Apologies - I cribbed from Lutz's spec as it was already pretty-printed, so I didn't know about the formatting requirements for the bars. I've taken yours and applied the changes you asked for. Here's how it looks now:

Note that I needed to remove the redundant sort operations from the x-encoding in each bar's layer as these can be set at the top level and were messing with the sorts lower down. Because this is a layered spec, an op (aggregate) property is needed, a quirk of Vega-Lite. I'd also recommend setting shared encoding properties at as high a level as possible and letting dependent layers inherit where possible rather than repeating. Not that they don't work if you don't, but they can trip you up if one mark differs from another and they're sharing the same encoding channel. This can also help make your spec easier to read. maintain and debug 👌

Here's the amended spec:

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "bar",
        "opacity": 0.3,
        "tooltip": true
      },
      "encoding": {
        "x": {"field": "ModelKey"},
        "y": {"field": "Min of MAPEVl"},
        "color": {"value": "lightgrey"}
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "x": {"field": "ModelKey"},
        "y": {
          "field": "Min of MAPEVl__highlight"
        },
        "color": {
          "condition": {
            "test": "datum['Min of MAPEVl__highlight'] !== null",
            "value": "steelblue"
          },
          "value": "lightgrey"
        }
      }
    },
    {
      "transform": [
        {
          "filter": "datum['Min of MAPEVl__highlight'] !== null && datum['Min of MAPEVl__highlightStatus'] !== 'neutral'"
        }
      ],
      "mark": {
        "type": "text",
        "baseline": "bottom",
        "dy": -5
      },
      "encoding": {
        "text": {
          "field": "Min of MAPEVl__highlight",
          "format": ".2f"
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "ModelKey",
      "type": "nominal",
      "sort": {
        "field": "Min of MAPEVl",
        "order": "ascending",
        "op": "min"
      },
      "axis": null
    },
    "y": {
      "field": "Min of MAPEVl",
      "type": "quantitative",
      "axis": {"title": "Min of MAPEVl"}
    }
  }
}

And thanks for using Deneb! I'm glad you find it useful 🙂

Cheers,

Daniel

[Doug7983]

@dm-p This is exactly what I wanted to accomplish. Thanks so much. 

For others who may come across this thread and wonder why I needed Deneb for a fairly standard visual (and for your knowledge on how people are using your tool): The visual is meant to help users see at a glance where a particular selection falls in the distribution of available options. The native Power BI column chart's scrollbars were a major obstacle to that. 

Thanks, Daniel. And thanks for creating Deneb!

[lbendlin]

@dm-p  Where would the NaN come from?  what's the difference between __format and __formatted ?

[dm-p]

Hi @lbendlin,

NaN would imply an issue with the value being passed in, which could be a reference error. I would probably need to see the entire spec and dataset to troubleshoot an issue here.

The __format suffixed field is the format string according to the data model for a specific measure for a given row. Because these can be dynamic with measure-based expressions and calculation groups they can be contextual, so this allows you to manage these situations rather than at a column level. The __formatted suffix is the measure value formatted, based on the __format field value. One other thing to bear in mind is that the __formatted field value is a string rather than a number.

Further reading: Deneb documentation on formatting.

Daniel

[lbendlin]

Where is 'Min of MAPEVl__highlight' defined?

You should be able to use this example to show or hide the data label when testing the selection of the bar.

Interactive Responsive Bar Chart with Cross-Filtering Template | CSalcedoDataBI

Or use "selection"

Interactive Plots with Selections | Vega-Lite

[lbendlin]

Maybe something like this

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "bar",
        "opacity": 0.3
      }
    },
    {
      "mark": {
        "type": "bar",
        "tooltip": true
      },
      "encoding": {
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0
          },
          "value": 1
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "baseline": "bottom",
        "dy": -5
      },
      "encoding": {
        "text": {
          "field": "Min of MAPEVl__highlight",
          "type": "quantitative",
          "format": ".2f"
        },
        "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0
          },
          "value": 1
        }
      }
    }
  ],
  "encoding": {
    "x": {
      "field": "ModelKey",
      "type": "nominal",
      "sort": {
        "field": "Min of MAPEVl",
        "order": "ascending"
      },
      "axis": null
    },
    "y": {
      "field": "Min of MAPEVl",
      "type": "quantitative",
      "axis": {"title": "Min of MAPEVl"}
    }
  }
}

[Doug7983]

That produced a similar result to what I've been getting trying various tweaks. Your spec, like mine, results in labels for each bar by default.