The graph display on using Neovis.js can be more presentable


(Sucheta) #1


As we use the Neo4j desktop or browser version, we get a beautiful output . Like this -

But when i use the browser version , i get an output that is not presentable and neither does the node name appears inside the circle.

Please help. I want the same output as presented in the Neo4j tool to be displayed in the browser.

(William Lyon) #2

Could you clarify what you mean by "not presentable"? What are you expecting that is different from the results?

As for your comment about node name not appearing inside the circle - in neovis.js node captions are positioned below the node. As neovis will scale the size of the node relative to a property value we've found this caption positioning to be the most consistently readable.

(Sucheta) #3

Oh ok. I was referring to the graphs as presented in Neo4j browser/desktop version look more beautiful and has good features as against the Neovis.js represented version.

I thought maybe there is someway to make it look better.

P.S : I apologize for writing it as 'not presentable' .

(Sucheta) #4

Can you point out where in the Neovis.js file can we reduce the size of the relationship names ?

(William Lyon) #5

No need to apologize - I was just trying to determine what styling aspects you thought were most important and could be improved :slight_smile:

In the image you shared it seems like the readability of the captions could be improved by increasing the length of the relationships and spacing nodes further out. This can be accomplished by reducing the "springiness" of the the relationships for the physics simulation that determines layout and can be configured in vis.js (the underlying visualization library used by neovis.js). Unfortunately, we don't expose much of that configuration in neovis.js. There are a few open issues requesting this.

Neovis.js was originally conceived to have all styling optimized and specified by results of graph algorithms (like centralities, community detection, etc) and most generic graph visualization features are currently lacking or not exposed from vis.js. As more folks are using neovis.js for more generic graph visualization and not necessarily to visualize the results of graph algorithms we'll need to update neovis.js to support these use cases - which is something we want to do. In the mean time, you might have better luck using vis.js directly and then you'll have all of the styling / configuration available.

(William Lyon) #6

Default styling is pulled in from here:

You should be able to update styling in that visjs object to overwrite the defaults used by neovis.js.

Errors in code when using Neovis.js with angular2+ template
(Sucheta) #7

Hi William,

I searched through a visjs network diagrams and they have the display as expected. Like i would like to keep an image for nodes instead of the circular figures. it is possible in visjs.

But here minor changes in neovis.js file in visjs JSON is not reflected. Like i changed and added a few more key-value pairs like repulsion, avoidOverlap,central Gravity, nodeDistance and changed the fontsize,damping,inherit,scalefactor,etc-

   visjs: {
        interaction: {
        hover: true,
        hoverConnectedEdges: true,
        selectConnectedEdges: false,
    //        multiselect: true,
        multiselect: 'alwaysOn',
        zoomView: true,
        experimental: { }
     physics: {
        barnesHut: {
            damping: 10.9,
            avoidOverlap: 1,
            centralGravity: 0.2
          nodeDistance: 1000,
      nodes: {
        mass: 4,
        shape: 'neo',
        labelHighlightBold: false,
        widthConstraint: {
            maximum: 40
        heightConstraint: {
            maximum: 40
        size :90,
        font:{color:'#eeeeee', size: 30},
    edges: {
        hoverWidth: 2,
        selectionWidth: 0,
        smooth: {
            type: 'continuous',
            roundness: 0.15
        font: {
            size: 1,
            strokeWidth: 0,
            align: 'top'
        color: {
            inherit: true
        arrows: {
            to: {
                enabled: true,
                type: 'arrow',
                scaleFactor: 0

But nothing seems to reflect in the output.

Please help.
It also gives errors in my angular counterpart but nevertheless it still compiles after giving errors like -


 ERROR in ./src/assets/neovis.js 31333:19
 Module parse failed: Unexpected token (31333:19)
 You may need an appropriate loader to handle this file type.
 |      * to the next pending observer.
 |      */
 >     this.url = url;


  ERROR in ./src/assets/neovis.js 20783:26
 Module parse failed: Unexpected token (20783:26)
 You may need an appropriate loader to handle this file type.
 |      encoding = encoding || state.defaultEncoding;
 |     if (encoding !== state.encoding) {
 >       chunk = bufferShim.f

Can you also suggest if i can integrate another outside vis.js file for a network diagram and integrate it with our neovis.js file. Because even if i put an external angular vis.js file , the database info remains in neovis.js.

Like here is the JSfiddle for a network diagram that we can integrate with our neovis.js -

Thank you for your time and consideration.

(Sucheta) #8

Where are you William ??? Please someone answer.