Force-directed network
Interactive nodes + links with a physics simulation.
Rendering…
Make it your own.
{
"$schema":"https://vega.github.io/schema/vega/v5.json",
"width":420,"height":300,"padding":10,"autosize":"none",
"signals":[{"name":"cx","update":"width/2"},{"name":"cy","update":"height/2"}],
"data":[
{"name":"node-data","values":[
{"name":"core","group":1},{"name":"auth","group":1},{"name":"db","group":1},
{"name":"web","group":2},{"name":"mobile","group":2},
{"name":"queue","group":3},{"name":"worker1","group":3},{"name":"worker2","group":3}
]},
{"name":"link-data","values":[
{"source":3,"target":0},{"source":4,"target":0},
{"source":0,"target":1},{"source":0,"target":2},
{"source":0,"target":5},{"source":5,"target":6},{"source":5,"target":7}
]}
],
"scales":[{"name":"color","type":"ordinal","domain":{"data":"node-data","field":"group"},"range":{"scheme":"tableau10"}}],
"marks":[
{"name":"nodes","type":"symbol","zindex":1,"from":{"data":"node-data"},
"encode":{"enter":{"fill":{"scale":"color","field":"group"},"size":{"value":300},"stroke":{"value":"white"},"strokeWidth":{"value":1.5},"tooltip":{"field":"name"}}},
"transform":[{"type":"force","iterations":300,"static":true,"signal":"force","forces":[
{"force":"center","x":{"signal":"cx"},"y":{"signal":"cy"}},
{"force":"collide","radius":18},
{"force":"nbody","strength":-40},
{"force":"link","links":"link-data","distance":60}
]}]
},
{"type":"path","from":{"data":"link-data"},"interactive":false,
"encode":{"update":{"stroke":{"value":"#94a3b8"},"strokeWidth":{"value":1.2}}},
"transform":[{"type":"linkpath","require":{"signal":"force"},
"shape":"line","sourceX":"datum.source.x","sourceY":"datum.source.y","targetX":"datum.target.x","targetY":"datum.target.y"}]},
{"type":"text","from":{"data":"nodes"},"interactive":false,
"encode":{"update":{"x":{"field":"x"},"y":{"field":"y"},"dy":{"value":18},"text":{"field":"name"},"align":{"value":"center"},"fontSize":{"value":10},"fill":{"value":"#475569"}}}}
]
}