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/
><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/
<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
> Am 24.02.2015 um 17:48 schrieb Samantha Zeitlin <[email protected]>:
>
> 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
>> <[email protected] <mailto:[email protected]>>:
>>
>>>
>>> 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
>>>> <[email protected] <javascript:>>:
>>>>
>>>>
>>>> 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; });
>>>> });
>>>>
>>>> --
>>>> 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 [email protected] <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 [email protected]
>>> <mailto:[email protected]>.
>>> 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
>> [email protected]
>> <mailto:[email protected]>.
>> For more options, visit 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 [email protected]
> <mailto:[email protected]>.
> 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 [email protected].
For more options, visit https://groups.google.com/d/optout.
