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,
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:
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
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.
NODES 2022, Neo4j Online Education Summit
All the sessions of the conference are now available online
