All charts/Network

A circle of friends

The force layout pulls linked nodes together.

1 The data _data/friends.json json

[
  { "person": "Ann",   "friend": "Bob"   },
  { "person": "Ann",   "friend": "Cas"   },
  { "person": "Ann",   "friend": "Dirk"  },
  { "person": "Bob",   "friend": "Cas"   },
  { "person": "Cas",   "friend": "Dirk"  },
  { "person": "Dirk",  "friend": "Eva"   },
  { "person": "Eva",   "friend": "Fay"   },
  { "person": "Eva",   "friend": "Gus"   },
  { "person": "Fay",   "friend": "Gus"   },
  { "person": "Gus",   "friend": "Hanna" },
  { "person": "Hanna", "friend": "Ivo"   },
  { "person": "Ivo",   "friend": "Gus"   },
  { "person": "Jet",   "friend": "Ann"   },
  { "person": "Jet",   "friend": "Kees"  }
]

2 The chart tag network/friends.pad pad

{chart 'network', data='friends', source='person', target='friend', title='Who is friends with whom', width=640, height=420}

3 The result inline SVG · no JavaScript