Deneb: Vega-Lite - Can you conditional format an element of visual based on existing measure

[DW868990]

Hi,

Im sure you can do this but if anyone got any advise how or an example of this - 

But in Deneb, Vega-Lite, can you highlight an element of a visual, say a column in a bar chart, based on an existing dax measure which returns the hex code?
This measure is dynamic based on end user slicer selection. 

TIA

[DW868990 · Accepted solution]

Thanks @giammariam ,

I nearly have it working, the code highlighting the product of th 'CF' measure in the below code.

However it is highlighting it as orange, and the rest blue, which im guessing is the default? As its not picking up the hex code in the CF measure.

{
"data": {"name": "dataset"},
"height": {"step": 50},
"layer": [
{
"mark": {
"type": "bar",
"yOffset": 5,
"cornerRadiusEnd": 20,
"stroke": "#605e5c",
"strokeWidth": 3,
"height": {"band": 0.3}
},
"encoding": {
"y": {
"field": "Product",
"scale": {"padding": 0},
"axis": {
"title": null,
"bandPosition": 0,
"grid": true,
"domain": false,
"ticks": false,
"labelAlign": "left",
"labelBaseline": "middle",
"labelPadding": -5,
"labelOffset": -15,
"labelLimit": 1000,
"titleX": 5,
"titleY": -5,
"titleAngle": 0,
"titleAlign": "left"
}
},
"color": {
"condition": {
"test": "datum['CF']",
"field": "CF",
"legend": null
},
"value": "#b3b3b3"
},
"tooltip": [
{
"field": "Product",
"type": "ordinal"
},
{
"field": "Comparison",
"type": "quantitative"
}
],
"x": {
"field": "Comparison",
"aggregate": "sum",
"title": null,
"axis": {
"grid": false,
"labelOpacity": 0
}
}
}
},
{
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 5,
"dy": 5,
"fontWeight": "normal",
"fontsize": 14
},
"encoding": {
"y": {
"field": "Product"
},
"x": {
"field": "Comparison",
"aggregate": "sum"
},
"text": {
"field": "Comparison"
}
}
}
]
}

[giammariam]

Hey @DW868990, there are different ways that this can be accomplished. I provided one way below where the DAX measure (called highlightHex here) returns a HEX code if highlighted, otherwise it should return BLANK() (i.e. null).

Interactive Vega-Lite Spec

EDIT: I forgot to set the scale to null in the color channel. That has been added below and in the interactive version of the spec

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 28, "highlightHex": null},
      {"a": "B", "b": 55, "highlightHex": "#FA0000"},
      {"a": "C", "b": 43, "highlightHex": null},
      {"a": "D", "b": 91},
      {"a": "E", "b": 81, "highlightHex": null},
      {"a": "F", "b": 53, "highlightHex": null},
      {"a": "G", "b": 19, "highlightHex": null},
      {"a": "H", "b": 87},
      {"a": "I", "b": 52, "highlightHex": null}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "a", "type": "nominal", "axis": {"labelAngle": 0}},
    "y": {"field": "b", "type": "quantitative"},
    "color": {
      "condition": {
        "test": "datum['highlightHex']",
        "field": "highlightHex",
        "legend": null,
        "scale": null
      },
      "value": "steelblue"
    }
  }
}

If this is enough to get you going please consider liking this reply and choosing it as the solution. Otherwise, I'm happy to help further.

[DW868990 · Accepted solution]

Thanks @giammariam ,

I nearly have it working, the code highlighting the product of th 'CF' measure in the below code.

However it is highlighting it as orange, and the rest blue, which im guessing is the default? As its not picking up the hex code in the CF measure.

{
"data": {"name": "dataset"},
"height": {"step": 50},
"layer": [
{
"mark": {
"type": "bar",
"yOffset": 5,
"cornerRadiusEnd": 20,
"stroke": "#605e5c",
"strokeWidth": 3,
"height": {"band": 0.3}
},
"encoding": {
"y": {
"field": "Product",
"scale": {"padding": 0},
"axis": {
"title": null,
"bandPosition": 0,
"grid": true,
"domain": false,
"ticks": false,
"labelAlign": "left",
"labelBaseline": "middle",
"labelPadding": -5,
"labelOffset": -15,
"labelLimit": 1000,
"titleX": 5,
"titleY": -5,
"titleAngle": 0,
"titleAlign": "left"
}
},
"color": {
"condition": {
"test": "datum['CF']",
"field": "CF",
"legend": null
},
"value": "#b3b3b3"
},
"tooltip": [
{
"field": "Product",
"type": "ordinal"
},
{
"field": "Comparison",
"type": "quantitative"
}
],
"x": {
"field": "Comparison",
"aggregate": "sum",
"title": null,
"axis": {
"grid": false,
"labelOpacity": 0
}
}
}
},
{
"mark": {
"type": "text",
"align": "left",
"baseline": "middle",
"dx": 5,
"dy": 5,
"fontWeight": "normal",
"fontsize": 14
},
"encoding": {
"y": {
"field": "Product"
},
"x": {
"field": "Comparison",
"aggregate": "sum"
},
"text": {
"field": "Comparison"
}
}
}
]
}

[giammariam]

Add this line under "legend": null

"scale": null

[DW868990]

Ah thank you! So simple when you know how! Thanks again

[giammariam]

Glad it will work for you! If it fulfills what you're after please consider marking my response as the solution.

[DW868990]

Will do.

@giammariam I also need to sort the above code via the Comparison measure, so the bars show with the product with the highest value of the comparison measure at the top. I have tried to do this but seems to still show in alphabetical order if have any advise. Thanks

[giammariam · Accepted solution]

This should work. Just remove the inline values in the data property:

{
  "data": {
    "name": "dataset",
    "values": [
      {"Product": "A", "CF": "#FF0000", "Comparison": 70},
      {"Product": "B", "CF": null, "Comparison": 100},
      {"Product": "C", "CF": null, "Comparison": 15},
      {"Product": "D", "CF": null, "Comparison": 75}
    ]
  },
  "height": {"step": 50},
  "encoding": {
    "x": {
      "field": "Comparison",
      "aggregate": "sum",
      "title": null,
      "axis": {"grid": false, "labelOpacity": 0}
    },
    "y": {
      "field": "Product",
      "scale": {"padding": 0},
      "axis": {
        "title": null,
        "bandPosition": 0,
        "grid": true,
        "domain": false,
        "ticks": false,
        "labelAlign": "left",
        "labelBaseline": "middle",
        "labelPadding": -5,
        "labelOffset": -15,
        "labelLimit": 1000,
        "titleX": 5,
        "titleY": -5,
        "titleAngle": 0,
        "titleAlign": "left"
      },
      "sort": {
        "op": "sum",
        "field": "Comparison",
        "order": "descending"
      }
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "yOffset": 5,
        "cornerRadiusEnd": 20,
        "stroke": "#605e5c",
        "strokeWidth": 3,
        "height": {"band": 0.3}
      },
      "encoding": {
        "color": {
          "condition": {
            "test": "datum['CF']",
            "field": "CF",
            "legend": null,
            "scale": null
          },
          "value": "#b3b3b3"
        },
        "tooltip": [
          {"field": "Product", "type": "ordinal"},
          {"field": "Comparison", "type": "quantitative"}
        ]
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "middle",
        "dx": 5,
        "dy": 5,
        "fontWeight": "normal",
        "fontsize": 14
      },
      "encoding": {"text": {"field": "Comparison"}}
    }
  ]
}