Dependency tree using Raphael
HTML
<!doctype html>
<html>
<head>
<title>dependency graph</title>
<script type="text/javascript" src="http://dracula.ameisenbar.de/js/raphael-min.js"></script>
<script type="text/javascript" src="http://dracula.ameisenbar.de/js/graffle.js"></script>
<script type="text/javascript" src="http://dracula.ameisenbar.de/js/graph.js"></script>
<style>html,body{padding:0;margin:0;overflow:hidden;}</style>
</head>
<body>
<div id="main"></div>
</body>
</html>
JavaScript
var data = {
"a": ["a", "b", "c", "d"],
"c": ["f", "d"],
"b": ["e", "f"],
"d": ["v","x"]
};
window.width = document.width-10, window.height = document.height-10;
(function(){
var box = document.getElementById("main");
var g = new Graph();
for(var key in data){
if(data.hasOwnProperty(key) && data[key] instanceof Array){
for(var i=data[key].length;i;i--){
g.addEdge(key, data[key][i-1]);
}
}
}
var layouter = new Graph.Layout.Spring(g);
layouter.layout();
var renderer = new Graph.Renderer.Raphael(document.body, g, width, height);
renderer.draw();
})()