Simple Way for Neo4j Visualization
Ramazan FIRIN
29.01.2014

This document is intended for only AVEA İletişim Hizmetleri A...
AGENDA
•

Why visulation?

•

How visulation ?

•

Very simple way for Neo4j visulation

2
Why Visulation?

•

To capture knowledge from graph

•

To understand relationships

•

To see, what you have been missing...
How Visulation? - Gephi

•
Avea

Gephi
4

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

Sigma.js
Avea

5

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

Processing.js
Avea

6

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

D3.js
Avea

7

7R&D /MW Developement
Perfect Blog for visulation-maxdemarzi.com
•

Avea

Follow this page

8

8R&D /MW Developement
We need Ruby?

•

All samples on internet need ruby..

•

We really need it?....

Avea

9

9R&D /MW Developement
Which component we need?

For samples senario, a few component is enough,
•

An html page to Show graph

•

And a datasour...
Which component we need for html?

•

A graph library to draw graph

•

A library to pull data from server by ajax (jquery...
Which properties we need for visulation?
•

For most cases, three components are enough

1.

Properties of node

2.

Relat...
How can we pull properties from Neo4j?
İf you have id of node, you can pull all data by Rest..
"outgoing_relationships"

:...
Solution – Vivagraph.js

Special solution for graph visulation
•

Simple

•

Good examples

•

Opensource

•

https://gith...
Sample code… Show graph
Code

Output

function main () {
// Step 1. We create a graph object.

var graph = Viva.Graph.grap...
Sample Code - Draw Node..
graphics.node(function(node) {

$(ui).click(function() {

var ui = Viva.Graph.svg('g'),

getProp...
Sample Code - getOutRelation

$.get( out.end, function( dataEnd ) {
getOutRelation = function(nodeId, isOn) {

//alert(id ...
Sample Code - getAllProperties
Get all
propertie
s

getProperties = function(nodeId, isOn) {

$('#explanation').html("");
...
Output

You can check out codes from:

https://github.com/ramazanfirin/neo4visulationVivagraph/
Avea

19

19R&D /MW Develo...
Thanks

20
Upcoming SlideShare
Loading in …5
×

Simple Way for Neo4j Visualization

2,405 views

Published on

Simple Way for Neo4j Visualization

Published in: Technology
  • Be the first to comment

Simple Way for Neo4j Visualization

  1. 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. 2. AGENDA • Why visulation? • How visulation ? • Very simple way for Neo4j visulation 2
  3. 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. 4. How Visulation? - Gephi • Avea Gephi 4 4R&D /MW Developement
  5. 5. How Visulation? – Sigma.js Sigma.js Avea 5 5R&D /MW Developement
  6. 6. How Visulation? – Processing.js Processing.js Avea 6 6R&D /MW Developement
  7. 7. How Visulation? – D3.js D3.js Avea 7 7R&D /MW Developement
  8. 8. Perfect Blog for visulation-maxdemarzi.com • Avea Follow this page 8 8R&D /MW Developement
  9. 9. We need Ruby? • All samples on internet need ruby.. • We really need it?.... Avea 9 9R&D /MW Developement
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 19. Output You can check out codes from: https://github.com/ramazanfirin/neo4visulationVivagraph/ Avea 19 19R&D /MW Developement
  20. 20. Thanks 20

×