Skip to content
Vega templates

Force-directed network

Interactive nodes + links with a physics simulation.

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