Simple Way for Neo4j Visualization

1. Simple Way for Neo4j Visualization
Ramazan FIRIN
29.01.2014
This document is intended for only AVEA İletişim Hizmetleri A.Ş.("AVEA"), its dealers, employees and/or others specifically authorised. The contents of this document are
confidential and any disclosure, copying, distribution and/or taking any action in reliance with the content of this document is prohibited. AVEA is not liable for the transmission
of this document in any manner to any third parties that are not authorised to receive.

2. AGENDA
•
Why visulation?
•
How visulation ?
•
Very simple way for Neo4j visulation
2

3. Why Visulation?
•
To capture knowledge from graph
•
To understand relationships
•
To see, what you have been missing
•
For more beatiful view
Avea
3
3R&D /MW Developement

4. How Visulation? - Gephi
•
Avea
Gephi
4
4R&D /MW Developement

5. How Visulation? – Sigma.js
Sigma.js
Avea
5
5R&D /MW Developement

6. How Visulation? – Processing.js
Processing.js
Avea
6
6R&D /MW Developement

7. How Visulation? – D3.js
D3.js
Avea
7
7R&D /MW Developement

8. Perfect Blog for visulation-maxdemarzi.com
•
Avea
Follow this page
8
8R&D /MW Developement

9. We need Ruby?
•
All samples on internet need ruby..
•
We really need it?....
Avea
9
9R&D /MW Developement

10. Which component we need?
For samples senario, a few component is enough,
•
An html page to Show graph
•
And a datasource..(neo4j)
•
A web server for html file (if you want to serve by web)
Avea
10
10R&D /MW Developement

11. Which component we need for html?
•
A graph library to draw graph
•
A library to pull data from server by ajax (jquery is perfect)
Avea
11
11R&D /MW Developement

12. Which properties we need for visulation?
•
For most cases, three components are enough
1.
Properties of node
2.
Relations of nodes
3.
Properties of relationship
Avea
12
12R&D /MW Developement

13. How can we pull properties from Neo4j?
İf you have id of node, you can pull all data by Rest..
"outgoing_relationships"
: "http://localhost:7474/db/data/node/284/relationships/out",
"traverse"
: "http://localhost:7474/db/data/node/284/traverse/{returnType}",
"all_typed_relationships"
: "http://localhost:7474/db/data/node/284/relationships/all/{-list|&|types}",
"property"
: "http://localhost:7474/db/data/node/284/properties/{key}",
"all_relationships"
: "http://localhost:7474/db/data/node/284/relationships/all",
"self«
: "http://localhost:7474/db/data/node/284",
"properties"
: "http://localhost:7474/db/data/node/284/properties",
"outgoing_typed_relationships"
: "http://localhost:7474/db/data/node/284/relationships/out/{-list|&|types}",
"incoming_relationships«
: "http://localhost:7474/db/data/node/284/relationships/in",
"incoming_typed_relationships« : "http://localhost:7474/db/data/node/284/relationships/in/{-list|&|types}",
"create_relationship"
: "http://localhost:7474/db/data/node/284/relationships",
"data"
:{
"properties-returnCodes" : "0, 9998, 9999",
}
Avea
13
13R&D /MW Developement

14. Solution – Vivagraph.js
Special solution for graph visulation
•
Simple
•
Good examples
•
Opensource
•
https://github.com/anvaka/VivaGraphJS
Avea
14
14R&D /MW Developement

15. Sample code… Show graph
Code
Output
function main () {
// Step 1. We create a graph object.
var graph = Viva.Graph.graph();
graph.addNode(1);
graph.addNode(2);
graph.addLink(1, 2);
// Step 3. Render the graph.
var renderer = Viva.Graph.View.renderer(graph);
renderer.run();
Avea
15
15R&D /MW Developement

16. Sample Code - Draw Node..
graphics.node(function(node) {
$(ui).click(function() {
var ui = Viva.Graph.svg('g'),
getProperties(node.id, true);
});
On click event :
get all properties
img = Viva.Graph.svg('image')
.attr('width', nodeSize)
$(ui).dblclick(function() { // mouse over
.attr('height', nodeSize)
getOutRelation(node.id, true);
.link('./computer.png');
getInRelation(node.id, true);
});
ui.append(img);
return ui;
Draw a Picture
to Show node
Avea
})
16
on double click event:
Get incoming and
outgoing relations
16R&D /MW Developement

17. Sample Code - getOutRelation
$.get( out.end, function( dataEnd ) {
getOutRelation = function(nodeId, isOn) {
//alert(id + "-"+dataEnd.data.name);
// alert("getAllrelation");
var name;
var out;
var localId;
var res ;
var id ;
Get name of
node for each
relation
if (dataEnd.data.name){
name = dataEnd.data.name;
$.get( "localhost:7474/db/data/node/"+nodeId+"/relationships/out", function(
data ) {
var values = dataEnd.self.split("/");
localId = values[6];
}
for(var index in data) {
out = data[index];
res = out.end.split("/");
id = res[6];
graph.addNode(localId,name);
Get outgoing
relation list
graph.addLink(nodeId, localId);
});
};
Create new
node and
relation
Mercedes-Benz Türk A.Ş.
17
R&D /MW Developement

18. Sample Code - getAllProperties
Get all
propertie
s
getProperties = function(nodeId, isOn) {
$('#explanation').html("");
$.get( "http://10.248.68.88:7474/db/data/node/"+nodeId+"/properties", function( data ) {
for(var key in data) {
var val = data[key];
$('#explanation').append(key+"="+val+"<br></br>");
}
});
};
Mercedes-Benz Türk A.Ş.
Add to div for
each properties
18
R&D /MW Developement

19. Output
You can check out codes from:
https://github.com/ramazanfirin/neo4visulationVivagraph/
Avea
19
19R&D /MW Developement

20. Thanks
20