7 ms·
Force directed graph layout in JavaScript
- jackrusher 17y agoNice! I did the same thing a couple weeks ago <http://github.com/jackrusher/jssvggraph> http://github.com/jackrusher/jssvggraph> to help explain the simplicity of the algorithm to a friend. Mine paints SVG directly rather than using Raphael, so it only works with browsers that support that standard. One thing this brought to my attention is that the WebKit SVG implementation is much, much faster than Gecko's.
- eru 17y agoIf you want to click, use http://github.com/jackrusher/jssvggraph http://github.com/jackrusher/jssvggraph
- jackrusher 17y agoThanks! I wasn't familiar with HN's post formatting.
- eru 17y agoNormal parens (like this) seem to work with URLs on HN.
- dhotson 17y agoThanks for sharing Jack. For this demo I was really focusing on simplicity and getting the basics right. I just wanted dots and lines but was too lazy to figure SVG DOM manipulation. Raphael makes it really easy.
- dhotson 17y agoDirect link to demo: http://dhotson.github.com/springy.html http://dhotson.github.com/springy.html
- ableal 17y agoVery 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.
- dhotson 17y agoYep, it's currently the same hardcoded graph each time. The node starting positions are random so you get a slightly different layout each time. I was thinking about making edges repel nodes in some way to avoid the problem you mentioned. I'll have to experiment some more..
- jonp 17y agoThat's really neat. 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. It reminds me of an old HN comment "think cyborg, not robot" (http://news.ycombinator.com/item?id=164833 http://news.ycombinator.com/item?id=164833).
- est 17y agoI thought it was drag drop until I realized the animation on Chrome is too quick.
- adriand 17y agoThe best force-directed graph I've seen - that is really interactive and extensible, although it is Flash - is http://www.creativesynthesis.net/blog/?page_id=60 http://www.creativesynthesis.net/blog/?page_id=60 Demo: http://www.creativesynthesis.net/recycling/graphgeardemo/ http://www.creativesynthesis.net/recycling/graphgeardemo/
- ratsbane 17y agoVery nice. I'm thinking of an interactive editor for directed acyclic graphs with labeled nodes and wondering if there's anything out there already. This is clear and simple enough to be a good starting point.
- ableal 17y agoYou may find something useful here: http://news.ycombinator.com/item?id=1218376 http://news.ycombinator.com/item?id=1218376 (If you have a Mac, check the included Grapher tool mentioned in that discussion - may not have edge labels)
- chrislloyd 17y agoLook at the Github network charts as Git basically uses directed acyclic graphs. http://github.com/blog/621-bye-bye-flash-network-graph-is-now-canvas http://github.com/blog/621-bye-bye-flash-network-graph-is-no... and http://raphaeljs.com/github/demo.html http://raphaeljs.com/github/demo.html
- deleted 17y ago[deleted]
- ahi 17y agohttp://code.google.com/p/jsviz/ http://code.google.com/p/jsviz/ It might be dead, but either way it's kind of cool as well.