taken from https://github.com/bobbydavid/dag-visualization at 6/22/13.
The algorithm is:
Create a random DAG (topographically sorted).
Determine X-positions. For each node, find it's minimum X-position. Then, in reverse order, find the maximum X-position of nodes that can be moved forward.
Determine Y-positions. For each node, place it as near as possible to the mean Y-position of its parents. Give preference to placing nodes that have a single parent with a single child (a 1-1 relationship), so that these will always be shown in a straight line.
xxxxxxxxxx<html><head> <meta charset="utf-8"> <style> body { background-color: #f5f5f5;} svg { background-color: #fff; border: 1px solid #eee; } .svgHolder { margin: 20px; } .daglink { fill: none; } </style></head><body> <h2>DAG as force graph</h2> <div class='svgHolder' id="force"></div> <div class='svgHolder' id="dag"></div> <footer>Robert Martin</footer> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <script type="text/javascript" src="dag.js"></script></body><html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js