Skip to content
Vega-Lite templates

Dumbbell Plot — Before/After

Per-category before/after comparison with connecting lollipops.

Template previewVega-Lite
Rendering…

Make it your own.

{
  "$schema":"https://vega.github.io/schema/vega-lite/v5.json",
  "data":{"values":[
    {"cat":"Region A","when":"2024","v":42},{"cat":"Region A","when":"2025","v":58},
    {"cat":"Region B","when":"2024","v":61},{"cat":"Region B","when":"2025","v":55},
    {"cat":"Region C","when":"2024","v":28},{"cat":"Region C","when":"2025","v":40},
    {"cat":"Region D","when":"2024","v":75},{"cat":"Region D","when":"2025","v":82},
    {"cat":"Region E","when":"2024","v":36},{"cat":"Region E","when":"2025","v":48}
  ]},
  "layer":[
    { "mark":{"type":"line","color":"#94a3b8","strokeWidth":3},
      "encoding":{
        "y":{"field":"cat","type":"nominal","title":""},
        "x":{"field":"v","type":"quantitative","title":"Score"},
        "detail":{"field":"cat"}
      }
    },
    { "mark":{"type":"point","filled":true,"size":160},
      "encoding":{
        "y":{"field":"cat","type":"nominal"},
        "x":{"field":"v","type":"quantitative"},
        "color":{"field":"when","type":"nominal","scale":{"range":["#dc2626","#3666ff"]}}
      }
    }
  ],
  "width":520,"height":260
}