cancel
Showing results for 
Search instead for 
Did you mean: 

help with neovis.js tool when I use neo4j browser

verachkaverachk
Graph Buddy

Hello dear community, I really need your help to figure out few things.

i'm working on a project and have to understand how to make a visualization of my data in neo4j in a nice way with the neovis.js tool.

for example I have the following graph in neo4j.

i'll explain what we see here:

I have a graph that represent cells the first cells will be from input type and will be connected to a subGraphInstance that in dark green color. each cell(CellInstance) is in orange color. also each cell must have the following properties that i represented in nodes :(The blue node is a CellType(types are all kinds of general type functions we will use- addition,substraction etc), but the specific function to my real cell(orange one), that will be in red, and the variables that my red function uses that will be in green. also when I connect real cell to real cell(orange ones) to transfer results, i use a connection nodes(in beige) that has a node that is called input function variable that also will be in green and with  it I pass the results of the calculation from the previous orange cell and so it goes. in the end all the orangenodes will hold results of calculation from previous orange nodes,

verachkaverachk_0-1657870513638.pngverachkaverachk_1-1657870541948.png

 

My purpose in the visualization is to get only my real nodes(celInstances), the name of the graph and their function, and also try to show maybe on the realtionships instead of connection node and the node of the input function, some variable that is passed to the function or something like that.

I try to use my data to the visualization this way:

I have downloaded the library from github and now I test in from html ,what I see meanwhile is:

verachkaverachk_2-1657871335052.png

 

and what I wrote in vscode is this:

<!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>

    <!-- FIXME: load from dist -->
    <script src="https://unpkg.com/neovis.js@2.0.2"></script>


    <script
            integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
            crossorigin="anonymous"></script>

    <script type="text/javascript">
        // define config car
        // instantiate nodevis object
        // draw

        var viz;

        function draw() {
            var config = {
                containerId: "viz",
                neo4j: {
                    serverUrl: "bolt://localhost:7687",
                    serverUser: "neo4j",
                    serverPassword: "retinax"
                },
                labels: {
                    SubGraphInstance: {
                        label: "name",
                        value: "pagerank",
                        group: "community"
                    },
                    CellInstance: {
                        label: "name",
                        value: "pagerank",
                        group: "community"
                    },
                    // Function: {
                    //  label: "expression",
                    //  value: "pagerank",
                    //  group: "community"
                    // },
                   

                },
               
                relationships: {
                    FROM_GRAPH: {
                    caption: true,
                    thickness: "count",
                   
                },
                FROM_CELL: {
                    caption: true,
                    thickness: "count",
                },
                CELL_TYPE_FUNCTION: {
                    caption: true,
                    thickness: "count",
                },
                FUNCTION_INPUT_VARIABLE: {
                    caption: true,
                    thickness: "count",
                },
                FUNCTIONS_VARS: {
                    caption: true,
                    thickness: "count",
                },
                FUNCTION_INPUT_VARIABLE: {
                    caption: true,
                    thickness: "count",
                },
                TO_CELL: {
                    caption: true,
                    thickness: "count",
                },

                },
                initialCypher: "MATCH (n)-[r]->(m) RETURN n,r,m"
               
            };

            viz = new NeoVis.default(config);
            viz.render();
            console.log(viz);

        }
    </script>
</head>
<body onload="draw()">
<div id="viz"></div>


Cypher query: <textarea rows="4" cols=50 id="cypher"></textarea><br>
<input type="submit" value="Submit" id="reload">
<input type="submit" value="Stabilize" id="stabilize">


</body>

<script>
    $("#reload").click(function () {

        var cypher = $("#cypher").val();

        if (cypher.length > 3) {
            viz.renderWithCypher(cypher);
        } else {
            console.log("reload");
            viz.reload();

        }

    });

    $("#stabilize").click(function () {
        viz.stabilize();
    })

</script>
</html>
 
Please help me understand better how to use this tool.
Vera.
1 REPLY 1

abk-of-neo4j
Community Team
Community Team

Hi @verachkaverachk 

Could you describe a bit more about what is wrong with the neovis graph? Is the data incorrect, or do you want it to be styled differently, or something else?

 

Best,

Andreas

Nodes 2022
Nodes
NODES 2022, Neo4j Online Education Summit

On November 16 and 17 for 24 hours across all timezones, you’ll learn about best practices for beginners and experts alike.