Add lower and upper limit specification vertical lines on histogram with DENEB [VEGA-LITE]

Question

Hello! I am working with data analysis on Power BI. Since recently the platform removed the Histogram Chart I am trying to work with Deneb, a custom visual based on Vega-lite. I would like to build a histogram, with mean, lower specification limit (LSL) and upper specification limit (USL). My results are dynamic , since there are many products I am working with. Each product has analysis like pH, weight, concentration, etc, and each analysis has its own LSL and USL (ex: pH 7.0 to 8.5, concentration 1,3 to 2,9 % and weight 120 to 300 mg, all for product A).

I watched the video https://www.youtube.com/watch?v=67ucnNrMHgY, which really helped me! But I still am not able to add LSL and USL, because I am new in Vega-lite world.

{
  "description": "Histogram",
  "data": {"name": "dataset"},
  "layer": [
    {
      "mark": {
        "type": "bar",
        "color": "#377eb8",
        "tooltip": true
      },
      "encoding": {
        "x": {
          "field": "RESULTS",
          "bin": {"maxbins": 10
          },
          "title": "RESULTS"
        },
        "y": {
          "aggregate": "count",
          "title": "ABSOLUTE FREQUENCE"
        }
      }
    },
    {
      "mark": "rule",
      "encoding": {
        "x": {
          "aggregate": "mean",
          "field": "RESULTS"
          },
          "color": {"value": "red"},
          "size": {"value": 3}
        }
    }
              ]
    }

How can I add vertical lines with my limits? They are measures on Power BI. I can't fix a value, because the value change according with analyasis.

How to add vertical Rule with constant value to Vega Lite chart? This question is similar to mine, but didn't helped me, unfortunatelly.

Answer 1

Just pass the measures with the USL and LSL into the visual and reference them in the rule mark in the Vega spec.

{
  "data": {"name": "dataset"},
  "layer": [
    {
      "description": "Histogram bars",
      "mark": {
        "type": "bar",
        "color": "#7DA7D9",
        "stroke": "#515151",
        "strokeWidth": 1,
        "tooltip": true
      },
      "encoding": {
        "x": {
          "field": "RESULTS",
          "bin": {"maxbins": 10},
          "title": "RESULTS"
        },
        "y": {
          "aggregate": "count",
          "field": "RESULTS",
          "type": "quantitative",
          "title": "ABSOLUTE FREQUENCE"
        }
      }
    },
    {
      "description": "Histogram line",
      "transform": [
        {
          "density": "RESULTS",
          "bandwidth": 5,
          "as": ["values", "density"]
        }
      ],
      "mark": {
        "type": "line",
        "color": "#931313",
        "strokeWidth": 3,
        "tooltip": true
      },
      "encoding": {
        "x": {
          "field": "values",
          "type": "quantitative"
        },
        "y": {
          "field": "density",
          "type": "quantitative",
          "axis": null
        }
      }
    },
    {
      "description": "USL line",
      "mark": {
        "type": "rule",
        "strokeDash": [20, 10]
      },
      "encoding": {
        "x": {
          "field": "USL",
          "type": "quantitative"
        },
        "color": {"value": "#CE0000"},
        "size": {"value": 2}
      }
    },
    {
      "description": "USL label",
      "mark": {
        "type": "text",
        "align": "center",
        "fontWeight": 100,
        "color": "#CE0000"
      },
      "encoding": {
        "x": {
          "field": "USL",
          "type": "quantitative"
        },
        "y": {"value": -10},
        "text": {"value": "USL"}
      }
    },
    {
      "description": "LSL line",
      "mark": {
        "type": "rule",
        "strokeDash": [20, 10]
      },
      "encoding": {
        "x": {
          "field": "LSL",
          "type": "quantitative"
        },
        "color": {"value": "#CE0000"},
        "size": {"value": 2}
      }
    },
    {
      "description": "LSL label",
      "mark": {
        "type": "text",
        "align": "center",
        "fontWeight": 100,
        "color": "#CE0000"
      },
      "encoding": {
        "x": {
          "field": "LSL",
          "type": "quantitative"
        },
        "y": {"value": -10},
        "text": {"value": "LSL"}
      }
    }
  ],
  "resolve": {
    "scale": {"y": "independent"}
  }
}