How best to display a network of friends?

Related How to properly show one’s friends in a graph if the number of friends is large, but 1) I have max two levels of "depth of friendship" and 2) I want to group friends.

I want to show the relationship between people. I have a central character, and others who are separated by one or two degrees (max); think friends and friends of friends.

enter image description here

I would also like to group people (even if it means that one person fits into two groups (is that ok UX? Hmmm, perhaps a Venn diagram?)).

I have coded as far as this:

enter image description here

which is just some demo code to understand how it might look and, more importantly, how much data would fit on the screen.

  • the app will run in a browser on a laptop or desktop – users on smaller devices will lose out, or can wait for an alternative solution later
  • I can’t predict how many nodes would be on the graph, which makes things tricky
  • I can add zoom controls, but strongly prefer that it not zoom so much that text is no longer visible (I would hate to have to fall back on tooltips)
  • I could nest a window in my HTML, with scroll bars, and/or let the user click & drag to explore

I am concerned that too much data will result in bad UX.

Or, should I consider some other way to present the data? Perhaps tabular? That would certainly be much easier to code. Or, diagram until data size is too large, then switch to table?