Draw a neo4j subgraph in a web page

[lx2pwnd]

I'm writing a web app were the goal is to draw a sub-graph of a neo4jdb. Actually I'm using vis.js, but I don't like it so much. Maybe I don't use it in the right way and for that reason the result now is this:

I don't like it this way, because the nodes overlap one over the other, and some of them are too big because the content is too long.

Are there any options that I can set to reduce the size of the nodes or to write the content in an other way in order to avoid the overlapping?

Finally, in your opinion which is the best framework to draw a graph in a js app ? Should I continue with vis.js or it's better to change ?

[jorenvandevonde]

The nodes in this visualization do look odd with their sizes, some possible solutions are:

• Reducing the length of the titles (truncating after x characters)
• Alternative name that reflect the node better in fewer words.
• Move the title to a tooltip (only shows on mouseover, I do not know if this is possible in vis.js), possibly to another field that shows the title when the node is clicked (some javascript required here).
• If the long titles are necessary you can look into word wrapping, though it looks like manual splitting is required in vis.js.

In order to avoid overlapping you can set an 'avoidOverlap' property according to their documentation, however this will not fix nodes overlapping and thus obscuring relations. Increasing the springLength (length of edges) will also give more slack to your nodes to move around.
Both can be found on this page: https://visjs.github.io/vis-network/docs/network/physics.html for each of the possible physic engines

Opinion wise, my personal preference goes to d3.js force directed graphs, but they do have a steep learning curve. If you are okay with (and have time to) getting to learn the API it can provide a good base for graph related visualizations. If you are keeping to simple graph layouts vis.js should suffice.

I hope this will help you.