Very neat animation. Is it always the same graph, if you reload ? (with different initial random placements, I mean)
In one case, I observed an edge coming to rest just across an unconnected (to that edge) node. Might be hard to detect/work around ...
[Many moons ago, for an exercise, implemented a force-directed placement, with team-mates doing Kernighan-Lin min-cut (also fast) and simulated annealing (slow) ...]
P.S. Two observations:
- You highlight the node on mouse over. If the edges connected directly to that node were also highlighted, it would palliate the false connection problem.
- Adding some edge-edge repulsion ? Sometimes edges cross, and one of them could be flipped to another side for a locally planar solution.
I hit the same problem of crossing edges when doing this a while ago (in Python rather than JavaScript).
Rather than trying to get everything done automatically by the code I added the ability to click and drag a point. So the algorithm gets you close to a good layout and you can then make adjustments to avoid unwanted crossings.
Just remembered this discussion http://news.ycombinator.com/item?id=1218376 also featured a force-directed graph layout algorithm, with brief paper and all. Just in case you missed it.
In one case, I observed an edge coming to rest just across an unconnected (to that edge) node. Might be hard to detect/work around ...
[Many moons ago, for an exercise, implemented a force-directed placement, with team-mates doing Kernighan-Lin min-cut (also fast) and simulated annealing (slow) ...]
P.S. Two observations:
- You highlight the node on mouse over. If the edges connected directly to that node were also highlighted, it would palliate the false connection problem.
- Adding some edge-edge repulsion ? Sometimes edges cross, and one of them could be flipped to another side for a locally planar solution.