powerbivisualizationpowerbi-desktopvega-litedeneb

How to add a vertical line in a Deneb/VegaLite dumbbell plot

I'm creating a dumbbell plot in Deneb in Power BI, and I'm wanting to add a vertical line to represent the average of all the values. I followed suggestions for doing something similar with column charts here, but what I'm getting is a series of horizontal lines showing the mean, rather than one vertical line showing the mean:

enter image description here

So what I want to see is one vertical line representing the overall average at 0.73.

Here is a simple data set to reproduce this issue:

Row ID Categories Factor Value Grand Mean
1 Category 1 One 0.5 0.73
2 Category 2 One 0.75 0.73
3 Category 1 Two 0.7 0.73
4 Category 2 Two 0.9 0.73

And here is the code I used to generate this image:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Dumbbell chart with labels",
  "data":  {"name": "dataset"},
    "transform": [
    {"joinaggregate": [{
      "op": "mean", "field": "Grand Mean", "as": "Grand Mean"
    }]
    }],
  "encoding": {
    "x": {
      "field": "Value",
      "type": "quantitative",
      "title": "Factor Value"//,
    },
    "y": {
      "field": "Categories",
      "type": "nominal",
      "title": null//,
    }
  },
  "layer": [
        {
      "mark": "line",
      "encoding": {
        "detail": {
          "field": "Categories",
          "type": "nominal"
        },
        "color": {"value": "gray"}
      }
    },

    {
      "mark": {
        "type": "point",
        "filled": true
      },
      "encoding": {
        "color": {
          "field": "Factor",
          "type": "ordinal",
           "legend": {
                 "title": null,
                 "offset": 0
            },
          "scale": {
            "domain": ["One", "Two"],
            "range": ["#6ba5cd", "#8e946a"]
          },
          "title": "Legend"
        },
        "size": {"value": 300},
        "opacity": {"value": 1}
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "bottom",
        "dy": -15
      },

      "encoding": {
        "detail": {
          "field": "Categories",
          "type": "nominal"
        },
        "text": {
          "field": "Factor",
          "type": "ordinal"
        }
      }
    },

    // adding in a red line:
   {"mark": {"type": "rule", "color": "red"
   }, 
    "encoding": {
      "x": {
        "field": "Grand Mean", "type": "quantitative"}
        }
    }
  ]
}

Where have I gone wrong?

Solution

  • Try this:

    enter image description here

    {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Dumbbell chart with labels",
  "data": {
    "name": "dataset"
  },
  "encoding": {
    "x": {
      "field": "Value",
      "type": "quantitative",
      "title": "Factor Value" //,
    },
    "y": {
      "field": "Categories",
      "type": "nominal",
      "title": null //,
    }
  },
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "detail": {
          "field": "Categories",
          "type": "nominal"
        },
        "color": {
          "value": "gray"
        }
      }
    },
    {
      "mark": {
        "type": "point",
        "filled": true
      },
      "encoding": {
        "color": {
          "field": "Factor",
          "type": "ordinal",
          "legend": {
            "title": null,
            "offset": 0
          },
          "scale": {
            "domain": [
              "One",
              "Two"
            ],
            "range": [
              "#6ba5cd",
              "#8e946a"
            ]
          },
          "title": "Legend"
        },
        "size": {
          "value": 300
        },
        "opacity": {
          "value": 1
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "center",
        "baseline": "bottom",
        "dy": -15
      },
      "encoding": {
        "detail": {
          "field": "Categories",
          "type": "nominal"
        },
        "text": {
          "field": "Factor",
          "type": "ordinal"
        }
      }
    },
    // adding in a red line:
    {
      "mark": {
        "type": "rule",
        "color": "red"
      },
      "encoding": {
        "x": {
          "field": "Grand Mean",
          "type": "quantitative",
          "aggregate": "min"
        },
        "y": {}
      }
    }
  ]
}