Dot plot

{
  "$schema":"https://vega.github.io/schema/vega/v5.json",
  "width":380,"height":260,"padding":10,
  "data":[{"name":"d","values":[
    {"k":"NPS","before":42,"after":58},
    {"k":"Activation","before":38,"after":55},
    {"k":"D7 retention","before":24,"after":31},
    {"k":"D30 retention","before":12,"after":18},
    {"k":"NRR","before":108,"after":121}
  ]}],
  "scales":[
    {"name":"x","type":"linear","range":"width","domain":[0,130]},
    {"name":"y","type":"band","range":"height","padding":0.3,"domain":{"data":"d","field":"k"}}
  ],
  "axes":[{"orient":"bottom","scale":"x"},{"orient":"left","scale":"y"}],
  "marks":[
    {"type":"rule","from":{"data":"d"},
      "encode":{"enter":{"x":{"scale":"x","field":"before"},"x2":{"scale":"x","field":"after"},"y":{"scale":"y","field":"k","band":0.5},"stroke":{"value":"#94a3b8"},"strokeWidth":{"value":2}}}},
    {"type":"symbol","from":{"data":"d"},
      "encode":{"enter":{"x":{"scale":"x","field":"before"},"y":{"scale":"y","field":"k","band":0.5},"fill":{"value":"#fb7185"},"size":{"value":180}}}},
    {"type":"symbol","from":{"data":"d"},
      "encode":{"enter":{"x":{"scale":"x","field":"after"},"y":{"scale":"y","field":"k","band":0.5},"fill":{"value":"#22c55e"},"size":{"value":180}}}}
  ]
}