Add rule mark on top of multiple layers

Question

I'm pretty new to Vega/Deneb and can't figure out how to add a global rule mark to my chart. When I add it as a new layer, it displays a rule mark for each bar (see code below) Can somebody help?

Many thanks !

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 1}, {"a": "B", "b": 1}, {"a": "C", "b": 0.7455},
      {"a": "D", "b": 0.8}, {"a": "E", "b": 0.9402}
    ]
  },
  "encoding": {
    "y": {
      "field": "a",
      "type": "nominal",
      "axis": null
    },
    "x": {
      "field": "b",
      "type": "quantitative",
      "axis": {"format": ".0%", "values": [0, 0.5, 1]}
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "color": {"expr": "datum.b < 0.95 ? '#910049' : '#00477e'"},
        "tooltip": true
      }
    },
    {
      "mark": {"type": "text", "align": "right", "dx": -5},
      "encoding": {
        "text": {
          "field": "b",
          "type": "quantitative",
          "format": ".0%"
        }
      }
    },
    {
      "mark": {"type":"text", "align": "left", "dx": 5},
      "encoding": {
        "x": {"datum": 0},
        "text": {
          "field": "a",
          "type": "nominal"
        }
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "x": {"datum": 0.95}
      }
    }
  ]
}

I tried to add the rule mark in the layer, resulting in the screenshot below : { "mark": "rule", "encoding": { "x": {"datum": 0.95} } } In the layer

I tried to add the rule mark after the layer array, but it messed everything up : "mark": "rule", "encoding": { "x": {"datum": 0.95} } After the layer

Answer 1

It is also possible with a line mark instead of rule but the line doesn't scale across the entire chart.

David's answer is the best though!

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 1},
      {"a": "B", "b": 1},
      {"a": "C", "b": 0.7455},
      {"a": "D", "b": 0.8},
      {"a": "E", "b": 0.9402}
    ]
  },
  "encoding": {
    "y": {"field": "a", "type": "nominal"},
    "x": {
      "field": "b",
      "type": "quantitative",
      "axis": {"format": ".0%", "values": [0, 0.5, 1]}
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "color": {"expr": "datum.b < 0.95 ? '#910049' : '#00477e'"},
        "tooltip": true
      }
    },
    {
      "mark": {"type": "line", "strokeDash": [2, 2], "strokeWidth": 2},
      "encoding": {"x": {"datum": 0.95, "type": "quantitative"}}
    },
    {
      "mark": {"type": "text", "align": "right", "dx": -5, "color": "white"},
      "encoding": {
        "text": {"field": "b", "type": "quantitative", "format": ".0%"}
      }
    },
    {
      "mark": {"type": "text", "align": "left", "dx": 5, "color": "white"},
      "encoding": {"x": {"datum": 0}, "text": {"field": "a", "type": "nominal"}}
    }
  ],
  "config": {}
}

Answer 2

Here we go.

David's answer is the best solution.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "data": {
    "values": [
      {"a": "A", "b": 1},
      {"a": "B", "b": 1},
      {"a": "C", "b": 0.7455},
      {"a": "D", "b": 0.8},
      {"a": "E", "b": 0.9402}
    ]
  },
  "encoding": {
    "y": {"field": "a", "type": "nominal", "axis": null},
    "x": {
      "field": "b",
      "type": "quantitative",
      "axis": {"format": ".0%", "values": [0, 0.5, 1]}
    }
  },
  "layer": [
    {
      "data": {"values": [{"x": 0.95, "y": "0", "y2": "1"}]},
      "mark": {"type": "rule", "strokeDash": [4, 2], "color": "#00477e"},
      "encoding": {
        "x": {"field": "x", "type": "quantitative"},
        "y": {
          "field": "y",
          "type": "quantitative",
          "axis": null,
          "scale": {"domainMin": -1}
        },
        "y2": {"field": "y2"}
      }
    },
    {
      "mark": {
        "type": "bar",
        "color": {"expr": "datum.b < 0.95 ? '#910049' : '#00477e'"},
        "tooltip": true
      }
    },
    {
      "mark": {"type": "text", "align": "right", "dx": -5, "color": "white"},
      "encoding": {
        "text": {"field": "b", "type": "quantitative", "format": ".0%"}
      }
    },
    {
      "mark": {"type": "text", "align": "left", "dx": 5, "color": "white"},
      "encoding": {"x": {"datum": 0}, "text": {"field": "a", "type": "nominal"}}
    }
  ],
  "config": {}
}

Let us know how you get along. Adam

Answer 3

Here's another way.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "A simple bar chart with embedded data.",
  "layer": [
    {
      "data": {
        "values": [
          {"a": "A", "b": 1},
          {"a": "B", "b": 1},
          {"a": "C", "b": 0.7455},
          {"a": "D", "b": 0.8},
          {"a": "E", "b": 0.9402}
        ]
      },
      "layer": [
        {
          "encoding": {
            "y": {"field": "a", "type": "nominal", "axis": null},
            "x": {
              "field": "b",
              "type": "quantitative",
              "axis": {"format": ".0%", "values": [0, 0.5, 1]}
            }
          },
          "layer": [
            {
              "mark": {
                "type": "bar",
                "color": {"expr": "datum.b < 0.95 ? '#910049' : '#00477e'"},
                "tooltip": true
              }
            },
            {
              "mark": {
                "type": "text",
                "align": "right",
                "dx": -5,
                "color": "white"
              },
              "encoding": {
                "text": {"field": "b", "type": "quantitative", "format": ".0%"}
              }
            },
            {
              "mark": {
                "type": "text",
                "align": "left",
                "dx": 5,
                "color": "white"
              },
              "encoding": {
                "x": {"datum": 0},
                "text": {"field": "a", "type": "nominal"}
              }
            }
          ]
        }
      ]
    },
     {
      "data": {"values": [{}]},
      "encoding": {"x": {"datum": 0.95}},
      "layer": [
        {"mark": {"type": "rule", "stroke":"red", "strokeWidth":2, "strokeDash":[1,2]}}
      
      ]
    }
  ]
}