*** Specification Code ***

{
  "data": {"name": "dataset"},
  "height": {"step": 50},
  "encoding": {
    "x": {
      "type": "quantitative",
      "axis": null
    },
    "opacity": {
          "condition": {
            "test": {
              "field": "__selected__",
              "equal": "off"
            },
            "value": 0.3
          },
          "value": 1
        },
    "y": {
      "field": "Primary_Wonum",
      "sort": {
        "field": "Actual_Dose",
        "op": "sum",
        "order": "descending"
      }
    }
  },
  "params": [
    {
      "name": "bar_color",
      "value": "#aaa"
    }
  ],
  "transform": [
    {
      "calculate": "datum['Dose Delta'] < 0",
      "as": "gap_is_negative"
    },
    {
      "calculate": "datum['gap_is_negative'] ? 'red' : 'green'",
      "as": "gap_color"
    },
    {
      "calculate": "datum['gap_is_negative'] ? bar_color : '#fff'",
      "as": "gap_color_inverse"
    },
    {
      "calculate": "datum['Estimated_Dose'] - (datum['Dose Delta'] / 2)",
      "as": "gap_label_x"
    }
  ],
  "layer": [

    {
      "description": "Main value bar",
      "mark": {
        "type": "bar",
        "tooltip": true,
        "color": {"expr": "bar_color"},
        "height": {"band": 0.4}
      },
      "encoding": {
        "x": {"field": "Actual_Dose"}
      }
    },
    {
      "description": "Target tick",
      "mark": {
        "type": "tick",
        "style": ["target"],
        "height": {
          "expr": "bandwidth('y')"
        }
      },
      "encoding": {
        "x": {"field": "Estimated_Dose"}
        }
    },
    {
      "description": "Value label",
      "mark": {
        "type": "text",
        "style": ["value_label"]
      },
      "encoding": {
        "x": {"datum": "left"},
        "text": {
          "field": "Actual_Dose"
        }
      }
    },
    {
      "description": "Target label",
      "layer": [
        {
          "description": "Target label foreground",
          "mark": {
            "type": "text",
            "style": ["target"],
            "yOffset": -15,
            "color": "blue",
            "align": {
              "expr": "datum['gap_is_negative'] ? 'right' : 'left'"
            },
            "dx": {
              "expr": "datum['gap_is_negative'] ? -10 : 10"
            }
          }
        }
      ],
      "encoding": {
        "x": {"field": "Estimated_Dose"},
        "text": {
          "field": "Estimated_Dose"
        }
      }
    },
    {
      "description": "Gap arrow main layer",
      "encoding": {
        "color": {
          "value": {
            "expr": "datum['gap_color']"
          }
        }
      },
      "layer": [
        {
          "description": "Gap arrow body",
          "mark": {"type": "rule"},
          "encoding": {
            "x": {"field": "Actual_Dose"},
            "x2": {"field": "Estimated_Dose"}
          }
        },
        {
          "description": "Gap arrow head (left)",
          "mark": {
            "type": "point",
            "shape": "triangle-left",
            "xOffset": 3
          },
          "encoding": {
            "x": {
              "value": {
                "expr": "scale('x', datum['gap_is_negative'] ? datum['Estimated_Dose'] : datum['Actual_Dose'])"
              }
            }
          }
        },
        {
          "description": "Gap arrow head (right)",
          "mark": {
            "type": "point",
            "shape": "triangle-right",
            "xOffset": -3
          },
          "encoding": {
            "x": {
              "value": {
                "expr": "scale('x', datum['gap_is_negative'] ? datum['Actual_Dose'] : datum['Estimated_Dose'])"
              }
            }
          }
        },
        {
      "description": "Gap label main layer",
      "encoding": {
        "x": {"field": "gap_label_x"},
        "text": {
          "field": "Dose Delta"
        }
      },
      "layer": [
        
        {
          "description": "Gap label halo (background)",
          "mark": {
            "type": "text",
            "style": "gap_label",
            "yOffset": -15,
            "xOffset": -5
            }
          }
        ]
      }
    ]
    }
  ]
}



**** Config Code ***

{
    "view": {"stroke": "transparent"},
    "font": "Segoe UI",
    "axis": {
      "ticks": false,
      "grid": false,
      "domain": false,
      "title": "",
      "labelColor": "Black",
      "labelFontSize": 12,
      "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
      "titleColor": "#252423",
      "titleFontSize": 16,
      "titleFontWeight": "normal",
      "labelPadding": 30
    },
    "tick": {
      "stroke": "white",
      "strokeWidth": 1,
      "thickness": 3
    },
    "point": {
      "filled": true,
      "size": 50,
      "opacity": 1
    },
    "style": {
      "target": {
        "color": "black",
        "fontWeight": "bold",
        "fontStyle": "italic"
      },
      "value_label": {
        "color": "black",
        "fontWeight": "bold",
        "fontSize": "12",
        "align": "left",
        "dx": 5
      },
      "gap_label": {
        "fontWeight": "bold",
        "fontStyle": "italic",
        "color": {
              "expr": "datum['gap_color']"},
        "dx": 5
      }
    }
  }