Skip to content
Vega templates

Chord diagram

Circular flows between categories.

Template previewVega
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"}
      }}}
  ]
}