Dumbbell Plot — Before/After
Per-category before/after comparison with connecting lollipops.
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
}