ClevelandPlot.json

//SPEC
{
  "data": {
    "name": "dataset"
  },
  "title": "Sales Variance by Product",
  "transform": [
    {
      //"calculate": "datum['Total Sales'] *.80","as": "target"
      "calculate": "17000000",
      "as": "target"
    },
    {
      "calculate": "datum['Total Sales'] - datum['target']",
      "as": "variance"
    },
    {
      "calculate": "datum['Total Sales'] - datum['target']",
      "as": "variance"
    },
    {
      "calculate": "20",
      "as": "dx"
    },
    {
      "calculate": "'left'",
      "as": "align"
    },
    {
      "calculate": "datum['variance'] > 0 ? '✅':'🔻'",
      "as": "indicator"
    },
    {
      "calculate": "format(datum['variance'],'.2s') + ' ' + datum.indicator",
      "as": "labelText"
    }
  ],
  "encoding": {
    "x": {
      "field": "variance",
      "type": "quantitative",
      "axis": {
        "grid": false,
        "ticks": false,
        "labels": false,
        "domain": false,
        "title": null
      }
    },
    "y": {
      "field": "Product",
      "type": "nominal",
      "sort": {
        "field": "variance",
        "op": "sum",
        "order": "descending"
      },
      "axis": {
        "title": null,
        "domain": false,
        "ticks": false
      }
    }
  },
  "layer": [
    {
      "mark": "circle",
      "encoding": {
        "color": {
          "condition": {
            "test": "datum['Total Sales'] > datum['target']",
            "value": "#009DDC"
          },
          "value": "#D8D2e1"
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "align": {
          "expr": "datum.align"
        },
        "baseline": "middle",
        "dx": {
          "expr": "datum.dx"
        }
      },
      "encoding": {
        "x": {
          "field": "variance",
          "type": "quantitative"
        },
        "y": {
          "field": "Product",
          "type": "nominal"
        },
        "text": {
          "field": "labelText",
          "type": "nominal"
        }
      }
    }
  ]
}

//CONFIG
{
  "view": {
    "stroke": "transparent"
  },
  "tick": {
    "thickness":3
  },
  "circle":{
    "size":1000
  }
}