Search code examples
powerbivega-litedeneb

Vega-Lite (Deneb/PowerBI): Is it possible to calculate a dividing "symmetry" line? (different to Regression Line)


This is more a question of curiosity. In PowerBI, in the analytics pane, you can apply the following dividing lines/areas:

For the question, my PBIX file

  • Symmetry Line
  • Ratio Line
  • Trend Line

See example:

PowerBI Vizshowing dividing analytical lines

I noticed a post from a Tableau user, where they were able to create the dividing symmetry line. This doesn't appear possible in PBI, only the line between the two shaded areas:

Tablaeu VizTableau viz showing symmetry line

In Deneb, I was only able to achieve the regression / trend line, but I'm wondering if it's possible to also calculate the symmetry and ratio lines?

Deneb/PBI vizDeneb viz showing regression/trend line

Here is the link to my PBIX file - any help or guidance is greatly appreciated :)

{
  "data": {"name": "dataset"},
  "encoding": {
    "x": {
      "field": "Actual",
      "type": "quantitative",
      "scale": {"zero": false},
      "axis": {
        "format": "0%",
        "formatType": "pbiFormat"
      }
    },
    "y": {
      "field": "Estimate",
      "type": "quantitative",
      "scale": {"zero": false},
      "axis": {
        "format": "0%",
        "formatType": "pbiFormat"
      }
    },
    "color": {
      "field": "Sign",
      "type": "nominal",
      "scale": {
        "range": ["black", "red", "blue"]
      },
      "legend": null
    }
  },
  "layer": [
    {"mark": {"type": "point"}},
    {
      "mark": {
        "type": "line",
        "color": "firebrick"
      },
      "transform": [
        {
          "regression": "Estimate",
          "on": "Actual"
        }
      ],
      "encoding": {
        "x": {
          "field": "Actual",
          "type": "quantitative"
        },
        "y": {
          "field": "Estimate",
          "type": "quantitative"
        }
      }
    }
  ]
}

I've searched the internet for documentation, but I've not seen anything on this topic, so I'm wondering now if it's even possible?

I think this might demonstrate what I need - I'll do some more thinking: [Vega-lite Linear Regression][1]


Solution

  • I believe the symmetry shade in PBI is just a line that splits the chart in half when the x and y axis are the same. How does this look?

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "data": {
        "values": [
          {"ID": 1, "Actual": 0.2, "Estimate": 0.19, "Sign": "A"},
          {"ID": 2, "Actual": 0.5, "Estimate": 0.55, "Sign": "B"},
          {"ID": 3, "Actual": 0.3, "Estimate": 0.29, "Sign": "C"},
          {"ID": 4, "Actual": 0.25, "Estimate": 0.26, "Sign": "A"},
          {"ID": 5, "Actual": 0.22, "Estimate": 0.23, "Sign": "B"},
          {"ID": 6, "Actual": 0.13, "Estimate": 0.12, "Sign": "C"},
          {"ID": 7, "Actual": 0.18, "Estimate": 0.17, "Sign": "A"},
          {"ID": 8, "Actual": 0.16, "Estimate": 0.16, "Sign": "B"},
          {"ID": 9, "Actual": 0.31, "Estimate": 0.3, "Sign": "C"},
          {"ID": 10, "Actual": 0.12, "Estimate": 0.11, "Sign": "A"},
          {"ID": 11, "Actual": 0.14, "Estimate": 0.14, "Sign": "B"},
          {"ID": 12, "Actual": 0.67, "Estimate": 0.27, "Sign": "C"},
          {"ID": 13, "Actual": 0.24, "Estimate": 0.43, "Sign": "A"},
          {"ID": 14, "Actual": 0.21, "Estimate": 0.2, "Sign": "B"},
          {"ID": 15, "Actual": 0.68, "Estimate": 0.49, "Sign": "C"},
          {"ID": 16, "Actual": 0.22, "Estimate": 0.21, "Sign": "A"},
          {"ID": 17, "Actual": 0.17, "Estimate": 0.18, "Sign": "B"},
          {"ID": 18, "Actual": 0.19, "Estimate": 0.2, "Sign": "C"},
          {"ID": 19, "Actual": 0.23, "Estimate": 0.22, "Sign": "A"},
          {"ID": 20, "Actual": 0.15, "Estimate": 0.45, "Sign": "B"},
          {"ID": 21, "Actual": 0.29, "Estimate": 0.28, "Sign": "C"},
          {"ID": 22, "Actual": 0.3, "Estimate": 0.31, "Sign": "A"},
          {"ID": 23, "Actual": 0.28, "Estimate": 0.27, "Sign": "B"},
          {"ID": 24, "Actual": 0.26, "Estimate": 0.25, "Sign": "C"},
          {"ID": 25, "Actual": 0.62, "Estimate": 0.33, "Sign": "A"},
          {"ID": 26, "Actual": 0.35, "Estimate": 0.34, "Sign": "B"},
          {"ID": 27, "Actual": 0.33, "Estimate": 0.32, "Sign": "C"},
          {"ID": 28, "Actual": 0.37, "Estimate": 0.38, "Sign": "A"},
          {"ID": 29, "Actual": 0.39, "Estimate": 0.4, "Sign": "B"},
          {"ID": 30, "Actual": 0.7, "Estimate": 0.7, "Sign": "C"}
        ]
      },
      "width": 400,
      "height": 400,
      "encoding": {
        "x": {
          "field": "Actual",
          "type": "quantitative",
          "scale": {"zero": false},
          "axis": {"format": "0%", "title": "Actual %","grid": false}
        },
        "y": {
          "field": "Estimate",
          "type": "quantitative",
          "scale": {"zero": false},
          "axis": {"format": "0%", "title": "Estimate %","grid": false}
        },
        "color": {
          "field": "Sign",
          "type": "nominal",
          "scale": {"range": ["black", "red", "blue"]},
          "legend": null
        }
      },
      "layer": [
        {
          "data": {"values": [{"ID": 1, "Start": 0}, {"ID": 2, "Start": 1}]},
          "encoding": {
            "y": {
              "field": "Start",
              "type": "quantitative",
              "axis": {"format": "0%", "title": ""}
            },
            "x": {
              "field": "Start",
              "type": "quantitative",
              "axis": {"format": "0%", "title": ""}
            }
          },
          "layer": [{"mark": {"type": "area", "fill": "#ffcccc"}}]
        },
        {"mark": {"type": "circle", "tooltip": true}},
        {
          "mark": {"type": "line", "color": "firebrick"},
          "transform": [{"regression": "Estimate", "on": "Actual"}],
          "encoding": {
            "opacity": {"value": 0.4},
            "x": {"field": "Actual", "type": "quantitative"},
            "y": {"field": "Estimate", "type": "quantitative"}
          }
        }
      ],
      "config": {"view": {"fill": "#bfe5b6"}}
    }
    

    enter image description here