How to increase the thickness of relationship line in Neo4j

Hi All,

I am looking for help to customize the relationship line between the nodes. I have two nodes and each nodes I have given common label "Username" and it has a properties one node is having Sender & other node is having Receiver. In my data set, there are multiple records with same Sender-Receiver combination. Currently when i generate the graph, there are multiple lines traversing from sender to receiver. Now my requirement is to have a one single line between sender and receiver, but the thickness of the line has to vary depending on the number of sender-receiver combination available in the data set.

To make it clear, assume sender xyz@gmail.com receiver abc@gmail.com and there are 50 records in the data set, with the same combination.

In the graph, relationship line between sender and receiver has to thicker, when compared to another set of sender & receiver combination which has only 5 records in the data set.

Can we able to achieve this kind of relationship line in Neo4j?

Please let me know your thoughts and share any documentation.

Below is the Query I tried to build the relationship with the subject property,

LOAD CSV WITH HEADERS FROM "file:///result.csv" AS csvLine

MERGE (p1:Username {Property: csvLine.Receiver})

MERGE (p2:Username {Property: csvLine.Sender})

MERGE (p3)-[:SENT_TO {subject: csvLine.Subject} ]-(p1)

Attached the sample graph for reference,

In the above graph the sender Vishal is sent data to Suraj thrice with different subjects and I want to increase the thickness of the relationship line between the Vishal & Suraj.

Thanks,
Ganeshbabu R

1 Like

You would need to use a visualization library like neovis for that.

Here is an article that explains how to use neovis in a bit more detail.

Hi @michael.hunger,

Thanks for sharing the link !!!

I read the neovis.js documentation and try to reproduce the example and in my browser I am getting the below response and in which node edges are not connected with arrow.

Below is the code I tried,

<!doctype html>
<html>
    <head>
        <title>Neovis.js Simple Example</title>
        <style type="text/css">
            html, body {
                font: 16pt arial;
            }
    
            #viz {
                width: 900px;
                height: 700px;
                border: 1px solid lightgray;
                font: 22pt arial;
            }
        </style>
		<script src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js"></script>
    </head>
	<script type="text/javascript">

        var viz;

        function draw() {
            var config = {
                container_id: "viz",
                server_url: "bolt://localhost:7687",
                labels: {
                    "Character": {
                        "caption": "name",
                        "size": "pagerank",
                        "community": "community"
                    }
                },
                relationships: {
                    "INTERACTS": {
                        "thickness": "weight",
                        "caption": false
                    }
                },
                initial_cypher: "MATCH (n)-[r:INTERACTS]->(m) RETURN * LIMIT 100"
            };

            viz = new NeoVis.default(config);
            viz.render();
        }
    </script>	
    <body onload="draw()">
        <div id="viz"></div>
    </body>    
</html>

Please correct me If I am doing anything wrong and let me know your thoughs.

Regards,
Ganeshbabu R

You just need to set arrows: true in the config object. The default is false: GitHub - neo4j-contrib/neovis.js: Neo4j + vis.js = neovis.js. Graph visualizations in the browser with data from Neo4j.

1 Like