Put stars (asterisks) on Vega or Vega-Lite bar plots that represent significance comparisons

Question

Similar to Put stars on ggplot barplots and boxplots - to indicate the level of significance (p-value), I'm interested if there's a way to put some marks on a vega plot that represent the significance comparison.

Here's an example of what the final chart would look like:

An example spec that gets partially there:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A bar chart with significance indicators",
  "data": {
    "values": [
      {"group": "DMSO", "value": 1.0},
      {"group": "Compound 1", "value": 0.4},
      {"group": "Compound 2", "value": 0.55}
    ]
  },
  "width": 300,
  "height": 200,
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "group", "type": "nominal", "axis": {"labelAngle": 0}},
        "y": {"field": "value", "type": "quantitative"},
        "color": {"field": "group", "type": "nominal"}
      }
    },
    {
      "mark": {"type": "text", "fontSize": 14, "dy": -5},
      "encoding": {
        "x": {"field": "group", "type": "nominal"},
        "y": {"field": "value", "type": "quantitative"},
        "text": {"field": "value", "type": "quantitative", "format": ".2f"}
      }
    },
    {
      "data": {
        "values": [
          {"x": "DMSO", "x2": "Compound 1", "y": 1.3, "label": "**"},
          {"x": "DMSO", "x2": "Compound 2", "y": 1.4, "label": "**"}
        ]
      },
      "mark": {"type": "rule"},
      "encoding": {
        "x": {"field": "x", "type": "nominal"},
        "x2": {"field": "x2"},
        "y": {"field": "y", "type": "quantitative"}
      }
    },
    {
      "data": {
        "values": [
          {"x": "Compound 1", "y": 1.32, "label": "**"},
          {"x": "Compound 2", "y": 1.42, "label": "**"}
        ]
      },
      "mark": {"type": "text", "fontSize": 16, "fontWeight": "bold"},
      "encoding": {
        "x": {"field": "x", "type": "nominal"},
        "y": {"field": "y", "type": "quantitative"},
        "text": {"field": "label"}
      }
    }
  ]
}

Produces this:

Answer 1

You could just add some tick marks and set the orient to vertical.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A bar chart with significance indicators",
  "data": {
    "values": [
      {"group": "DMSO", "value": 1},
      {"group": "Compound 1", "value": 0.4},
      {"group": "Compound 2", "value": 0.55}
    ]
  },
  "width": 300,
  "height": 200,
  "layer": [
    {
      "mark": "bar",
      "encoding": {
        "x": {"field": "group", "type": "nominal", "axis": {"labelAngle": 0}},
        "y": {"field": "value", "type": "quantitative"},
        "color": {"field": "group", "type": "nominal"}
      }
    },
    {
      "mark": {"type": "text", "fontSize": 13, "dy": -7},
      "encoding": {
        "x": {"field": "group", "type": "nominal"},
        "y": {"field": "value", "type": "quantitative"},
        "text": {"field": "value", "type": "quantitative", "format": ".2f"}
      }
    },
    {
      "data": {
        "values": [
          {"x": "DMSO", "y": 1.4},
          {"x": "Compound 2", "y": 1.4},
          {"x": "Compound 1", "y": 1.25},
          {"x": "DMSO", "y": 1.25}
        ]
      },
      "mark": {
        "type": "tick",
        "orient": "vertical",
        "color": "black",
        "size": 7
      },
      "encoding": {
        "x": {"field": "x", "type": "nominal"},
        "y": {"field": "y", "type": "quantitative"},
        "yOffset": {"value": 3}
      }
    },
    {
      "data": {
        "values": [
          {"x": "DMSO", "x2": "Compound 1", "y": 1.25, "label": "**"},
          {"x": "DMSO", "x2": "Compound 2", "y": 1.4, "label": "**"}
        ]
      },
      "layer": [
        {
          "mark": {"type": "rule"},
          "encoding": {
            "x": {"field": "x", "type": "nominal"},
            "x2": {"field": "x2"},
            "y": {"field": "y", "type": "quantitative"}
          }
        },
        {
          "mark": {
            "type": "text",
            "fontSize": 16,
            "fontWeight": "bold",
            "xOffset": 10,
            "yOffset": -3
          },
          "encoding": {
            "x": {"field": "x2", "type": "nominal"},
            "y": {"field": "y", "type": "quantitative"},
            "text": {"field": "label"}
          }
        }
      ]
    }
  ]
}