Signal Pulse through D3 Force Graph

[Sean Gonzalez]

Is it possible to send a "signal pulse" through specific links in a force graph? I would like to simulate something that looks like a neural impulse, or an electrical pulse through a circuit. Here is an example of a neural impulse that I'd like to emulate: http://youtu.be/dSkxlpNs3tU

Sincere thanks,

Sean

[Wes Mitchell]

Impressive video. I don't know how he did the graphics.

This is an interesting problem, so let's start simple.

You need a data structure to hold nodes and links, so an adjacency list graph will
work fine. The adjacency list for a node is just the set of neighbors for the node, and
a node M is a neighbor of a node N iff there is a link from N to M (note directionality).

This data structure should also have O(1) lookup for a given node, which you can
accomplish by having each node have a unique id, and using a JS object, which
is really just a hash map.

You'll need a way to visit each node, given a starting point. Since graphs might well
have cycles, this algorithm must detect whether you have already visited a particular
neighbor. Kind of like classic mark-and-sweep gc.

You'll need a simple way to highlight visited nodes. Assigning/clearing a CSS class is
a good way to do it, since it won't force a redraw of the entire graph.

Finally, you'll need a way to run each step of the graph traversal on a timer loop. d3
provides good ways to do that, for example, that's how they do the force layout. I think
there are lots of other examples of using timers.

Good luck!

[Sean Gonzalez]

Wes,

Simplifying the problem to just two nodes and one link, one approach to creating a 'pulse' across that link could be to use the 'bilinks' concept from Mike's Curved Links example here:

http://bl.ocks.org/mbostock/4600693

Upon inspection, a force directed graph has a link whose DOM element looks like this:

<line class="link" x1="404.52570668054443" y1="373.7792866810728" x2="442.9147549677033" y2="317.54965460182785" style="stroke-width: 1px;"></line>

However, in the curved links example, from the 'bilinks' variable D3 creates this DOM element:

<path class="link" d="M477.2230581370574,286.5001820255783S444.30420653429763,319.2468905008609 409.5105774561883,331.38266511478247"></path>

The difference here is the use of the SVG path element, which in this case is calculated using Bezier. Here is a great description of Bezier curves:

http://www.jasondavies.com/animated-bezier/

Unfortunately, D3 provides one path DOM element and doesn't make any intermediate bilinks selectable, which would allow us to change their css and put on timers. 

We could use path transitions to show a sine curve propagating through the line, similar to this example, but that's a bit of a hack.

Alternatively, we could calculate entirely separate set of invisible nodes that permanently lie between the visible ones, but that introduces additional problems of ensuring those nodes update with each 'tick' properly as the visible nodes move around.

Here is an example of "Transitions Along a Path". In our case we would have to create some object, then transition it along the path, then destroy it on the other end. I think this last approach may work, playing with it now.

Sean

“If I had asked people what they wanted, they would have said faster horses."
-- Henry Ford

202.656.7811 GVoice

609.923.3179 Cell
http://www.linkedin.com/in/seanmooregonzalez

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

[Wes Mitchell]

Wow, thanks for the response. I've done similar things in my own work,
where I really needed to manipulate the path elements themselves.
Cool trick of putting an empty node in the middle. Ah, I see he modifies things
at a lower level in the tick handler.

Anyway, thanks. This stuff gets addictive.

//w

[Kai Chang]

Here's Mike's point-along-path example (same as what's described in the delimited blog post):

http://bl.ocks.org/mbostock/1313857

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