simple way for neo4j visualization

Click here to load reader

Post on 25-May-2015




3 download

Embed Size (px)


Simple Way for Neo4j Visualization


  • 1. Simple Way for Neo4j Visualization Ramazan FIRIN 29.01.2014This document is intended for only AVEA letiim 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 visulation2 3. Why Visulation?To capture knowledge from graphTo understand relationshipsTo see, what you have been missingFor more beatiful viewAvea33R&D /MW Developement 4. How Visulation? - Gephi AveaGephi 44R&D /MW Developement 5. How Visulation? Sigma.jsSigma.js Avea55R&D /MW Developement 6. How Visulation? Processing.jsProcessing.js Avea66R&D /MW Developement 7. How Visulation? D3.jsD3.js Avea77R&D /MW Developement 8. Perfect Blog for AveaFollow this page88R&D /MW Developement 9. We need Ruby?All samples on internet need ruby..We really need it?....Avea99R&D /MW Developement 10. Which component we need?For samples senario, a few component is enough, An html page to Show graphAnd a datasource..(neo4j)A web server for html file (if you want to serve by web)Avea1010R&D /MW Developement 11. Which component we need for html?A graph library to draw graphA library to pull data from server by ajax (jquery is perfect)Avea1111R&D /MW Developement 12. Which properties we need for visulation? For most cases, three components are enough1.Properties of node2.Relations of nodes3.Properties of relationshipAvea1212R&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",}Avea1313R&D /MW Developement 14. Solution Vivagraph.jsSpecial solution for graph visulation SimpleGood examplesOpensource /MW Developement 15. Sample code Show graph CodeOutputfunction 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);;Avea1515R&D /MW Developement 16. Sample Code - Draw Node.. graphics.node(function(node) {$(ui).click(function() {var ui = Viva.Graph.svg('g'),getProperties(, true); });On click event : get all propertiesimg = Viva.Graph.svg('image') .attr('width', nodeSize)$(ui).dblclick(function() { // mouse over.attr('height', nodeSize)getOutRelation(, true);.link('./computer.png');getInRelation(, true);}); ui.append(img);return ui; Draw a Picture to Show nodeAvea})16on double click event: Get incoming and outgoing relations16R&D /MW Developement 17. Sample Code - getOutRelation$.get( out.end, function( dataEnd ) { getOutRelation = function(nodeId, isOn) {//alert(id + "-";// alert("getAllrelation");var name;var out;var localId;var res ; var id ;Get name of node for each relationif ({ 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 listgraph.addLink(nodeId, localId); }); };Create newnode and relation Mercedes-Benz Trk A..17R&D /MW Developement 18. Sample Code - getAllProperties Get all propertie sgetProperties = function(nodeId, isOn) {$('#explanation').html(""); $.get( ""+nodeId+"/properties", function( data ) { for(var key in data) { var val = data[key]; $('#explanation').append(key+"="+val+"
"); } }); };Mercedes-Benz Trk A..Add to div for each properties18R&D /MW Developement 19. OutputYou can check out codes from: Avea1919R&D /MW Developement 20. Thanks20