Has anyone tried using the visualization example posted on http://neo4j.com/developer/guide-data-visualization/#_howto_graph_visualization_step_by_step ?

[Arvind Upadhyay]

hello guys, this question is more d3 centric than neo4j based. I copied the example from neo4j website for visualization and it does not seem to work.

I am using latest version of d3.js to prototype visualization using neo4j.

 Error seems to be from d3.js library itself

 Uncaught TypeError: Cannot read property 'weight' of undefined d3.min.js:4

here is the code i copied from neo4j site ("dependencyManager" is the id of svg element)

 res = {"nodes":[{name:"Peter",label:"Person",id:1},{name:"Michael",label:"Person",id:2},

           {name:"Neo4j",label:"Database",id:3}],

  "links":[{start:0, end:1, type:"KNOWS", since:2010},{start:0, end:2, type:"FOUNDED"},

           {start:1, end:2, type:"WORKS_ON"}]};

var graph = {"nodes":[{name:"Peter",label:"Person",id:1},{name:"Michael",label:"Person",id:2},

         {name:"Neo4j",label:"Database",id:3}],

"links":[{start:0, end:1, type:"KNOWS", since:2010},{start:0, end:2, type:"FOUNDED"},

         {start:1, end:2, type:"WORKS_ON"}]};

var width = 800, height = 800;

// force layout setup

var force = d3.layout.force()

       .charge(-200).linkDistance(30).size([width, height]);

// setup svg div

var svg = d3.select("#dependencyManager")

       .attr("width", "100%").attr("height", "100%")

       .attr("pointer-events", "all");

// load graph (nodes,links) json from /graph endpoint

  

   force.nodes(graph.nodes).links(graph.links).start();

   // render relationships as lines

   var link = svg.selectAll(".link")

           .data(graph.links).enter()

           .append("line").attr("class", "link");

   // render nodes as circles, css-class from label

   var node = svg.selectAll(".node")

           .data(graph.nodes).enter()

           .append("circle")

           .attr("class", function (d) { return "node "+d.label })

           .attr("r", 10)

           .call(force.drag);

   // html title attribute for title node-attribute

   node.append("title")

           .text(function (d) { return d.title; })

   // force feed algo ticks for coordinate computation

   force.on("tick", function() {

       link.attr("x1", function(d) { return d.source.x; })

               .attr("y1", function(d) { return d.source.y; })

               .attr("x2", function(d) { return d.target.x; })

               .attr("y2", function(d) { return d.target.y; });

       node.attr("cx", function(d) { return d.x; })

               .attr("cy", function(d) { return d.y; });

   });

[Michael Hunger]

Could you try to use the d3 version that we use here:

https://github.com/neo4j-contrib/developer-resources/blob/gh-pages/language-guides/assets/index.html#L87

http://d3js.org/d3.v3.min.js

In action: http://my-neo4j-movies-app.herokuapp.com/

Michael

--
You received this message because you are subscribed to the Google Groups "Neo4j" group.
To unsubscribe from this group and stop receiving emails from it, send an email to neo4j+un...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Arvind Upadhyay]

i checked the version but no luck. I am sure i am missing somthing...not sure whr though?

in my html i have an empty div with dependencyMgmt as the id.

--
You received this message because you are subscribed to a topic in the Google Groups "Neo4j" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/neo4j/REh1ZJnU80s/unsubscribe.
To unsubscribe from this group and all its topics, send an email to neo4j+un...@googlegroups.com.

[Arvind Upadhyay]

One more thing

if you try to override the response from server side in your working app 

var graph = {"nodes":[{name:"Peter",label:"Person",id:1},{name:"Michael",label:"Person",id:2},

         {name:"Neo4j",label:"Database",id:3}],

"links":[{start:0, end:1, type:"KNOWS", since:2010},{start:0, end:2, type:"FOUNDED"},

         {start:1, end:2, type:"WORKS_ON"}]};

you might get the same error. Is this something related to the format of data ?

[Michael Hunger]

can you share your full html document?

M

[Arvind Upadhyay]

This is what i do

i have a jsp with an empty div graph. on the client side(i also use other javascripts library like masonary.js,datatables and jquery), i load the doc, make ajax call get the data (from neo4j in a graphical centric) and then try to display using the code i pasted in previous conversation.

[Michael Hunger]

Please share the HTML of your JSP.

I can't help with vague snippets ...

M

[Arvind Upadhyay]

attached is the index.html and dependency.js (that tries to draw the graph).

div used for graph is dependecyMgmt.

Appreciate your help.

[Arvind Upadhyay]

got a chance to look at the html and js?

[Arvind Upadhyay]

Hi Micheal,

I tried a simpler example w/o using other scripts (only d3 and javascript)..i still see the same problem

Attached is the java script and the html.

"/neopoc/graph" call from frontend returns the following string from server side.

String sample = "{\"nodes\":[{\"name\":\"Peter\",\"label\":\"Person\",\"id\":1},{\"name\":\"Michael\",\"label\":\"Person\",\"id\":2},{\"name\":\"Neo4j\",\"label\":\"Database\",\"id\":3}],\"links\":[{\"start\":0, \"end\":1, \"type\":\"KNOWS\", \"since\":2010},{\"start\":0, \"end\":2, \"type\":\"FOUNDED\"},{\"start\":1, \"end\":2, \"type\":\"WORKS_ON\"}]}";

Error i get is 

 Uncaught TypeError: Cannot read property 'weight' of undefinedd3.v3.min.js:4 ta.layout.force.a.startpoc.js:19 (anonymous function)d3.v3.min.js:1 (anonymous function)d3.v3.min.js:1 td3.v3.min.js:1 u

I tried this long back as well but could not successfully build a poc...any help here would be great.

Thanks

Arvind

[Arvind Upadhyay]

Html code here in case not clear in the attachment

<html>

<head>

  <title>Home</title>

  <script type="text/javascript"  src="http://d3js.org/d3.v3.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>

  <script type="text/javascript"  src="/neopoc/static/js/poc.js"></script>

  <link rel="stylesheet" href="/neopoc/static/css/poc.css" />

</head>

<body>

<div id="brs_header">

  <div id="brs_red_block"></div>

  <div id="brs_gradient"></div>

  <div id="brs_space"></div>

</div>

<div class="graphContainer" id="graph">

</div>

<div id="brs_footer">

  <div id="app_footer"></div>

  <div id="common_footer"></div>

</div>

</body>

</html>

[Michael Hunger]

sorry, my bad,

you have to change the source graph to look like this:

{"nodes":[{"name":"Peter","label":"Person","id":1},{"name":"Michael","label":"Person","id":2},{"name":"Neo4j","label":"Database","id":3}],"links":[{"source":0, "target":1, "type":"KNOWS", "since":2010},{"source":0, "target":2, "type":"FOUNDED"},{"source":1, "target":2, "type":"WORKS_ON"}]};

change for the links:

start -> source

end -> target

I'll update it on the site. Thanks for being persistent with that and sorry for not responding earlier.

Michael

[Arvind Upadhyay]

Thanks.

How to fix the same problem while using json response coming from neo4j?

[Michael Hunger]

That's a bit more involved but you can see it for the different languages in the implementations of http://neo4j.com/developer/language-guides

Michael

[Samantha Zeitlin]

I'd like to try something similar, but I want to be able to change the colors (nodes and/or relationships, whatever is easiest) and animate that (slowly enough that a human can actually watch it go). Do you have any examples where you've done that? I can imagine that it should be doable with d3. 

[Michael Hunger]

Coloring can be done in d3 via svg attributes or vis css (static)

What exactly do you want to animate? From where to where?

Von meinem iPhone gesendet

[Samantha Zeitlin]

any path or paths, starting from any node and spreading, either to all nodes or a limited set of nodes.

First, I want to visualize when one attribute is changed on one node,  traversing all the connected nodes to propagate that same change.
Second, I want to do the same thing but be able to limit it to a certain number of connected nodes.

I was wondering if it would be possible to do this by using cypher to add or modify an attribute, which could be used to specify some display property (like color)? Then I was wondering whether it makes sense to iterate over updating the display each time a node is modified, to show how this proceeds node by node, through the graph.

sam





Michael Hunger wrote:

Coloring can be done in d3 via svg attributes or vis css (static)

What exactly do you want to animate? From where to where?

Von meinem iPhone gesendet

Am 24.02.2015 um 02:12 schrieb Samantha Zeitlin

<samanth...@gmail.com <mailto:samanth...@gmail.com>>:

I'd like to try something similar, but I want to be able to change
the colors (nodes and/or relationships, whatever is easiest) and
animate that (slowly enough that a human can actually watch it go).
Do you have any examples where you've done that? I can imagine that
it should be doable with d3.

On Tuesday, February 3, 2015 at 2:40:42 PM UTC-8, Michael Hunger wrote:

    Could you try to use the d3 version that we use here:

    https://github.com/neo4j-contrib/developer-resources/blob/gh-pages/language-guides/assets/index.html#L87
    <https://github.com/neo4j-contrib/developer-resources/blob/gh-pages/language-guides/assets/index.html#L87>
    http://d3js.org/d3.v3.min.js

    In action: http://my-neo4j-movies-app.herokuapp.com/
    <http://my-neo4j-movies-app.herokuapp.com/>

    Michael

    Am 03.02.2015 um 21:29 schrieb Arvind Upadhyay

    <arvind.c...@gmail.com <javascript:>>:

    it, send an email to neo4j+un...@googlegroups.com <javascript:>.

    For more options, visit https://groups.google.com/d/optout

    <https://groups.google.com/d/optout>.

--
You received this message because you are subscribed to the Google
Groups "Neo4j" group.
To unsubscribe from this group and stop receiving emails from it,
send an email to neo4j+un...@googlegroups.com

<mailto:neo4j+un...@googlegroups.com>.

For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the
Google Groups "Neo4j" group.

To unsubscribe from this topic, visit
https://groups.google.com/d/topic/neo4j/REh1ZJnU80s/unsubscribe.
To unsubscribe from this group and all its topics, send an email to
neo4j+un...@googlegroups.com

<mailto:neo4j+un...@googlegroups.com>.

[Michael Hunger]

You can do both,

either update your data in Neo4j with cypher and update the visualization.

But you can also just run the color spreading only in the viz.

the two d3 styles that you would want to change dynamically are fill and stroke (node outline and relationship-line-color).

Something like this.

    // render relationships as lines
    var link = svg.selectAll(".link")
            .data(graph.links).enter

()
            .append("line").style("stroke", function(d) { return d.color; });

    

// render nodes as circles, css-class from label
    var node = svg.selectAll(".node")
            .data(graph.nodes).enter()
            .append("circle"

)
            .style("fill", function (d) { return d.color; })
 

From here: http://neo4j.com/developer/guide-data-visualization/

I also link: http://www.coppelia.io/2014/07/an-a-to-z-of-extra-features-for-the-d3-force-layout/

which contains a ton of info on d3 graph-viz.

Michael

To unsubscribe from this group and stop receiving emails from it, send an email to neo4j+un...@googlegroups.com.

[Samantha Zeitlin]

Thanks!

Yes I know about fill and stroke, and I saw some stuff about using force layout.

I haven't played around with animating(!) changes yet.

I'll let you know how it goes! :0

Sam


Michael Hunger wrote:

To unsubscribe from this group and all its topics, send an email to neo4j+un...@googlegroups.com.