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