Visualizing and modifying Graph data on the Frontend

Hi everyone.

I'm going to build a single-page Angular web-app capable of visualizing graph-data exposed by my Spring service, which in turn is talking to a Neo4j database.

To be clear I have some familiarity with TypeScript and Angular, but mostly I'm doing Java, and variety of graph-visualization libraries on GitHub looks intimidating, hence looking for expert advice on that topic.
Not seeking for an out-of-the-box solution, but for a professional opinion that would allow to limit the possible choices. Pretty sure there are some front-end experts here who have experience with graph-visualization.


The graph consists of multiple clusters, and each cluster can be represented as an N-ary Tree data structure of an arbitrary depth.

I'm thinking a graphical interface that would allow to traverse those Trees, examining only one node (with its children nodes) at a time.

Here's a typical example of how one step of traversal can be visualized (and that almost exactly as I wish the visualization to look like):

Front-end _ traversal-step

So everything is "flat" and simple, no need to involve animation, positions of the nodes are fixed.

The main mechanism of traversal:

  • click on a child node expands it;
  • click on the parent node reveals its parent and siblings.

And there has to be a possibility to add/modify/delete nodes while traversing the tree.

I would greatly appreciate suggestions regarding the tools that can be used to implement what I've described above (preferably in TypeScript, also Ease of use and good documentation matters since I'm not a frontend-developer).