title: SVG / Raphael, how does one implement the DOT algorithm in javascript? (Graph organization)
body: <p>My fiddle: <a href="http://jsfiddle.net/G5mTx/10/" rel="nofollow">http://jsfiddle.net/G5mTx/10/</a></p>
  
  <p>As you can see, the current way I'm organizing the nodes does no balancing, and there is some overlap when parent nodes have more than 1 child node.</p>
  
  <p>For those not familiar with the DOT algorithm, a brief, vague explanation can be found here: <a href="http://www.ece.uci.edu/~jhahn/pdf/dot.pdf" rel="nofollow">http://www.ece.uci.edu/~jhahn/pdf/dot.pdf</a></p>
  
  <p>Basically, DOT organizes the nodes such that the graph is optimal, which means that it is concise, has minimal line crossing, and is balanced. </p>
  
  <p>I've heard of some people running the DOT algorithm server side before sending it to the client... which would be consistantly faster... but I need each of the nodes to have hover and click states, as I plan on allowing the user to re-assign where the arrows / lines point. </p>
  
  <p>I mean, I COULD do the SVG generation server-side.. but then how would I hook up hover / click events to the nodes, and have the tell the server which Model the node represents upon line re-assignment?</p>
  
  <p>Note: My server runs Ruby on Rails 2.3.8</p>