An integration of `Sigma.js` with `Neo4j`, with some customs renderers to make parallele curves
npm install neosigAn integration of Sigma.js with Neo4j, with some customs renderers to make parallele curves
* Import the script
``
* Import neo4j-driver
`
* OPTINAL: Import fontawesome if you need to display some icons
`
* Create an object configuration for Neo4j
`
var neo4j = {
url: 'bolt://localhost',
user: 'neo4j',
password: 'admin',
driver: {} // this is the neo4j driver configuration if neede (you can omit it
};
* Create a graph style object :
`
var style = {
labels: {
Person : {
// field to display (if ommit, node's id will be displayed)
label: 'name',
color: '#654321',
size: 10,
icon: {
// the fontawesome unicode
name: 'f007',
color: '#FFF',
scale: 1.0
}
},
Movie : {
label: 'title',
color: '#123456',
size: 10,
icon: {
name: 'f008',
color: '#FFF',
scale: 1.0
}
}
},
edges: {
ACTED_IN: {
color: '#040404',
size:2
},
DIRECTED: {
color: '#040404',
size:2
}
}
};
* Call the Neo4jGraph function to get the result of your query as a graph structure compatible with Sigma.
This function takes 4 attributs :
** The Neo4j configuration object
** The graph style object
** A cypher query
** Parameters of the cypher query
`
Neo4jGraph(neo4j, style, 'MATCH (n)-[r]->(m) RETURN n,r,m LIMIT 20').then( function(result) {
var sig = new sigma({
graph: result,
renderer: {
container: 'graph-container'
},
settings: {
edgeLabelThreshold:1,
drawEdgeLabels:true,
edgeLabelSize:'fixed',
defaultEdgeLabelSize:8,
enableEdgeHovering: true,
edgeHoverExtremities: true
}
});
// enable drag'n'drop
sigma.plugins.dragNodes(sig, sig.renderers[0]);
// start layout
sig.startForceAtlas2();
setTimeout(() => { sig.stopForceAtlas2() }, Math.log(result.nodes.lengthresult.edges.length)1000);
});
`
== Example
If you have a running Neo4j with the movie dataset on your local computer, and if the neo4j user password is admin`, you can test it here : https://sim51.github.io/neosig/