Team Changes - Diverging Bar Chart

diverging_bar_chart.vl.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Bar chart with text labels. Apply scale padding to make the frame cover the labels.",
  "data": {
    "values": [
      {"a": "Avengers", "b": -0.5},
      {"a": "Masters of the Universe", "b": 0.6},
      {"a": "X-Men", "b": 0.0}
    ]
  },
  "encoding": {
    "y": {"field": "a", "type": "nominal", "axis": null},
    "x": {"field": "b", "type": "quantitative", "axis": {"format": ",%", "title": "Change"},"scale": {"domain": [-1,1]}}
  },
  "layer": [{
    "mark": "bar"
  }, {
    "mark": {
      "type": "text",
      "align": {"expr": "datum.b < 0 ? 'right' : 'left'"},
      "baseline": "middle",
      "dx": {"expr": "datum.b < 0 ? -5 : 5"}
    },
    "encoding": {
      "text": {"field": "a", "type": "nominal"}
    }
  }],
  "config": {
    "view": {"stroke": 0}
  }
}

diverging_bar_chart_right_text.vl.json

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "description": "Bar chart with text labels. Apply scale padding to make the frame cover the labels.",
  "data": {
    "values": [
      {"a": "Avengers", "b": -0.5},
      {"a": "Masters of the Universe", "b": 0.6},
      {"a": "X-Men", "b": 0.0}
    ]
  },
  "encoding": {
    "y": {"field": "a", "type": "nominal", "axis": null},
    "x": {"field": "b", "type": "quantitative", "axis": {
      "format": ",%",
      "title": "Change",
      "gridColor": {
        "condition": {"test": "datum.value === 0", "value": "black"},
        "value": "#ddd"
      }
      },"scale": {"domain": [-1,1], "padding": 10}}
  },
  "layer": [{
    "mark": "bar"
  }, {
    "transform": [
      {"calculate": "datum.b < 0 ? 0 : datum.b", "as": "b"}
    ],
    "mark": {
      "type": "text",
      "limit": 100,
      "align": "left",
      "baseline": "middle",
      "dx": 5
    },
    "encoding": {
      "text": {"field": "a", "type": "nominal"}
    }
  }],
  "config": {
    "view": {"stroke": 0}
  }
}