Simple Way for Neo4j Visualization
-
Upload
ramazan-firin -
Category
Technology
-
view
1.039 -
download
3
description
Transcript of Simple Way for Neo4j Visualization
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.
Simple Way for Neo4j VisualizationRamazan FIRIN29.01.2014
2
AGENDA
• Why visulation?
• How visulation ?
• Very simple way for Neo4j visulation
3
Why Visulation?
• To capture knowledge from graph
• To understand relationships
• To see, what you have been missing
• For more beatiful view
3R&D /MW DevelopementAvea
4
How Visulation? - Gephi
• Gephi
4R&D /MW DevelopementAvea
5
How Visulation? – Sigma.js
Sigma.js
5R&D /MW DevelopementAvea
6
How Visulation? – Processing.js
Processing.js
6R&D /MW DevelopementAvea
7
How Visulation? – D3.js
D3.js
7R&D /MW DevelopementAvea
8
Perfect Blog for visulation-maxdemarzi.com
8R&D /MW DevelopementAvea
• Follow this page
9
We need Ruby?
• All samples on internet need ruby..
• We really need it?....
9R&D /MW DevelopementAvea
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)
10R&D /MW DevelopementAvea
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)
11R&D /MW DevelopementAvea
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
12R&D /MW DevelopementAvea
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",
}
13R&D /MW DevelopementAvea
14
Solution – Vivagraph.js
Special solution for graph visulation
• Simple
• Good examples
• Opensource
• https://github.com/anvaka/VivaGraphJS
14R&D /MW DevelopementAvea
15
Sample code… Show graph
Code
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();
Output
15R&D /MW DevelopementAvea
16
Sample Code - Draw Node..
graphics.node(function(node) {
var ui = Viva.Graph.svg('g'),
img = Viva.Graph.svg('image')
.attr('width', nodeSize)
.attr('height', nodeSize)
.link('./computer.png');
ui.append(img);
$(ui).click(function() {
getProperties(node.id, true);
});
$(ui).dblclick(function() { // mouse over
getOutRelation(node.id, true);
getInRelation(node.id, true);
});
return ui;
})
16R&D /MW DevelopementAvea
On click event : get all properties
on double click event:Get incoming and outgoing relations
Draw a Picture to Show node
17
Sample Code - getOutRelation
getOutRelation = function(nodeId, isOn) {
// alert("getAllrelation");
var out;
var res ;
var id ;
$.get( "localhost:7474/db/data/node/"+nodeId+"/relationships/out", function( data ) {
for(var index in data) {
out = data[index];
res = out.end.split("/");
id = res[6];
$.get( out.end, function( dataEnd ) {
//alert(id + "-"+dataEnd.data.name);
var name;
var localId;
if (dataEnd.data.name){
name = dataEnd.data.name;
var values = dataEnd.self.split("/");
localId = values[6];
}
graph.addNode(localId,name);
graph.addLink(nodeId, localId);
});
};
R&D /MW DevelopementMercedes-Benz Türk A.Ş.
Get outgoing relation list
Get name of node for each relation
Create new node and relation
18
Sample Code - getAllProperties
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>");
}
});
};
R&D /MW DevelopementMercedes-Benz Türk A.Ş.
Get all properties
Add to div for each properties
19
Output
You can check out codes from:
https://github.com/ramazanfirin/neo4visulationVivagraph/
19R&D /MW DevelopementAvea
20
Thanks