Chord diagram
Circular flows between categories.
Rendering…
Make it your own.
{
"$schema":"https://vega.github.io/schema/vega/v5.json",
"width":360,"height":360,"padding":5,"autosize":"none",
"data":[
{"name":"flows","values":[
{"a":"A","b":"B","v":40},{"a":"A","b":"C","v":15},
{"a":"A","b":"D","v":25},{"a":"B","b":"C","v":30},
{"a":"B","b":"D","v":10},{"a":"C","b":"D","v":20}
]},
{"name":"nodes","source":"flows","transform":[
{"type":"aggregate","groupby":["a"]}
]}
],
"scales":[
{"name":"a","type":"point","range":{"signal":"[-PI,PI]"},"padding":0.5,"domain":["A","B","C","D"]},
{"name":"color","type":"ordinal","domain":["A","B","C","D"],"range":{"scheme":"set2"}}
],
"marks":[
{"type":"text","from":{"data":"nodes"},
"encode":{"enter":{
"x":{"signal":"160*cos(scale('a',datum.a))+width/2"},
"y":{"signal":"160*sin(scale('a',datum.a))+height/2"},
"text":{"field":"a"},"align":{"value":"center"},"baseline":{"value":"middle"},"fontSize":{"value":14},"fontWeight":{"value":600}
}}},
{"type":"path","from":{"data":"flows"},
"encode":{"enter":{
"path":{"signal":"'M' + (140*cos(scale('a',datum.a))+width/2) + ',' + (140*sin(scale('a',datum.a))+height/2) + ' Q ' + (width/2) + ',' + (height/2) + ' ' + (140*cos(scale('a',datum.b))+width/2) + ',' + (140*sin(scale('a',datum.b))+height/2)"},
"stroke":{"scale":"color","field":"a"},"strokeWidth":{"field":"v"},"strokeOpacity":{"value":0.4},"fill":{"value":"none"}
}}}
]
}