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?

2 Answers 2


Thinking about how to code it is leading you to impractical solutions, I guess. If you abstract the point of how it will be solved in code, that is, taking paper and pencil, there are better options.

For example, in the image, the representation of connections 1 – 1 – 1 are unnecessary since the Main Character is already known to be connected to the rest of the people. This eliminates one step to represent, leaving only:

  1. The connections between people
  2. The groups generated
  3. People belonging to different groups

The representation in the question is a Tree graph, I would explore other types of graphs and representations.

For example, starting from a Rado graph:

enter image description here

there are more possibilities to show the remaining three combinations:

enter image description here

Better in color:

enter image description here

Regarding the zoom, I don't think it's necessary. Zoom is an animated mode of interaction. Zoom is just one option, but within the animated interactions there are hundreds of better solutions.

  • These look good, but I am concerned about the amount of screen real estate required o the connections. I am beginning to think that either a Venn diagram or just a table (which is not so visually appealing), might be the way to go (p.s just curious, how did you generate those diagrams?)
    – Mawg
    Commented Jan 24, 2021 at 23:36
  • 1
    @MawgsaysreinstateMonica you could probably create a matrix-like table that is more appealing. Venn diagrams might be a bit unwieldy once the relationships increase in size (if not complexity due to depth).
    – Michael Lai
    Commented Jan 24, 2021 at 23:50
  • Feel free to post an example of that "matrix-like table" ;-)
    – Mawg
    Commented Jan 24, 2021 at 23:52
  • @Danielillo can you tell us what tool or code you used to genearte those diagrams? Thanks
    – Mawg
    Commented Jan 25, 2021 at 16:56
  • I like the Rado graph listing friends verically. It's sometimes found as arc-diagram in diagramming/charting libraries like d3js.
    – hc_dev
    Commented Feb 15, 2021 at 23:56

What about a dendrogram. It's used to visualize hierarchical information using the tree metaphor..

So you can achieve these goals:

  • starts from the central person in focus (as root of the tree)
  • show all distinct friends (as leaves of the tree)
  • assign a friend to many groups (branches of the tree)
  • cluster the friends into groups and even groups of groups (branches joined on multiple levels)

Imagine following graph where groups are on the top (forming branches of the tree) and the individual friends/members are at the bottom (terminating as leaves of the tree). This allows zooming as the hierarchy levels can unfold (here from top root to bottom leaves). The use of color allows highlighting special relationships.

example of a colored dendrogram

  • You can draw dendrograms with many JavaScript libraries, like d3js
    – hc_dev
    Commented Feb 16, 2021 at 0:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.