shtratos/graph.json

## graph.json
{"nodes":[{"group":1,"name":"A"},{"group":1,"name":"C"},{"group":1,"name":"B"},{"group":1,"name":"E"},{"group":1,"name":"D"},{"group":1,"name":"G"},{"group":1,"name":"F"},{"group":1,"name":"I"},{"group":1,"name":"H"},{"group":1,"name":"K"},{"group":1,"name":"J"},{"group":1,"name":"M"},{"group":1,"name":"L"},{"group":1,"name":"O"},{"group":1,"name":"N"},{"group":1,"name":"Q"},{"group":1,"name":"P"},{"group":1,"name":"S"},{"group":1,"name":"R"},{"group":1,"name":"U"},{"group":1,"name":"T"},{"group":1,"name":"W"},{"group":1,"name":"V"},{"group":1,"name":"Y"},{"group":1,"name":"X"}],"links":[{"source":13,"target":16,"value":1},{"source":8,"target":13,"value":1},{"source":19,"target":2,"value":1},{"source":22,"target":7,"value":1},{"source":7,"target":0,"value":1},{"source":18,"target":3,"value":1},{"source":16,"target":19,"value":1},{"source":9,"target":23,"value":1},{"source":3,"target":24,"value":1},{"source":3,"target":21,"value":1},{"source":10,"target":13,"value":1},{"source":14,"target":4,"value":1},{"source":18,"target":19,"value":1},{"source":12,"target":20,"value":1},{"source":3,"target":0,"value":1},{"source":19,"target":11,"value":1},{"source":1,"target":18,"value":1},{"source":5,"target":7,"value":1},{"source":0,"target":14,"value":1},{"source":17,"target":15,"value":1},{"source":3,"target":14,"value":1},{"source":14,"target":20,"value":1},{"source":0,"target":12,"value":1},{"source":7,"target":9,"value":1},{"source":6,"target":3,"value":1},{"source":6,"target":18,"value":1},{"source":24,"target":0,"value":1},{"source":17,"target":8,"value":1},{"source":15,"target":19,"value":1},{"source":19,"target":3,"value":1},{"source":13,"target":22,"value":1},{"source":13,"target":7,"value":1},{"source":11,"target":2,"value":1},{"source":0,"target":9,"value":1}]}

## index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
<style type="text/css">
.link { stroke: #ccc; }
.nodetext { pointer-events: none; font: 10px sans-serif; }
</style>
</head>
<body>
<script type="text/javascript">

var w = 960,
    h = 500

var vis = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h);

d3.json("graph.json", function(json) {
    var force = self.force = d3.layout.force()
        .nodes(json.nodes)
        .links(json.links)
        .gravity(.05)
        .distance(100)
        .charge(-100)
        .size([w, h])
        .start();

    var link = vis.selectAll("line.link")
        .data(json.links)
        .enter().append("svg:line")
        .attr("class", "link")
        .attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    var node_drag = d3.behavior.drag()
        .on("dragstart", dragstart)
        .on("drag", dragmove)
        .on("dragend", dragend);

    function dragstart(d, i) {
        force.stop() // stops the force auto positioning before you start dragging
    }

    function dragmove(d, i) {
        d.px += d3.event.dx;
        d.py += d3.event.dy;
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        tick(); // this is the key to make it work together with updating both px,py,x,y on d !
    }

    function dragend(d, i) {
        d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
        tick();
        force.resume();
    }


    var node = vis.selectAll("g.node")
        .data(json.nodes)
      .enter().append("svg:g")
        .attr("class", "node")
        .call(node_drag);

    node.append("svg:image")
        .attr("class", "circle")
        .attr("xlink:href", "https://github.com/favicon.ico")
        .attr("x", "-8px")
        .attr("y", "-8px")
        .attr("width", "16px")
        .attr("height", "16px");

    node.append("svg:text")
        .attr("class", "nodetext")
        .attr("dx", 12)
        .attr("dy", ".35em")
        .text(function(d) { return d.name });

    force.on("tick", tick);

    function tick() {
      link.attr("x1", function(d) { return d.source.x; })
          .attr("y1", function(d) { return d.source.y; })
          .attr("x2", function(d) { return d.target.x; })
          .attr("y2", function(d) { return d.target.y; });

      node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
    };


});

</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
	<style type="text/css">
	.link { stroke: #ccc; }
	.nodetext { pointer-events: none; font: 10px sans-serif; }
	</style>
	</head>
	<body>
	<script type="text/javascript">

	var w = 960,
	h = 500

	var vis = d3.select("body").append("svg:svg")
	.attr("width", w)
	.attr("height", h);

	d3.json("graph.json", function(json) {
	var force = self.force = d3.layout.force()
	.nodes(json.nodes)
	.links(json.links)
	.gravity(.05)
	.distance(100)
	.charge(-100)
	.size([w, h])
	.start();

	var link = vis.selectAll("line.link")
	.data(json.links)
	.enter().append("svg:line")
	.attr("class", "link")
	.attr("x1", function(d) { return d.source.x; })
	.attr("y1", function(d) { return d.source.y; })
	.attr("x2", function(d) { return d.target.x; })
	.attr("y2", function(d) { return d.target.y; });

	var node_drag = d3.behavior.drag()
	.on("dragstart", dragstart)
	.on("drag", dragmove)
	.on("dragend", dragend);

	function dragstart(d, i) {
	force.stop() // stops the force auto positioning before you start dragging
	}

	function dragmove(d, i) {
	d.px += d3.event.dx;
	d.py += d3.event.dy;
	d.x += d3.event.dx;
	d.y += d3.event.dy;
	tick(); // this is the key to make it work together with updating both px,py,x,y on d !
	}

	function dragend(d, i) {
	d.fixed = true; // of course set the node to fixed so the force doesn't include the node in its auto positioning stuff
	tick();
	force.resume();
	}


	var node = vis.selectAll("g.node")
	.data(json.nodes)
	.enter().append("svg:g")
	.attr("class", "node")
	.call(node_drag);

	node.append("svg:image")
	.attr("class", "circle")
	.attr("xlink:href", "https://github.com/favicon.ico")
	.attr("x", "-8px")
	.attr("y", "-8px")
	.attr("width", "16px")
	.attr("height", "16px");

	node.append("svg:text")
	.attr("class", "nodetext")
	.attr("dx", 12)
	.attr("dy", ".35em")
	.text(function(d) { return d.name });

	force.on("tick", tick);

	function tick() {
	link.attr("x1", function(d) { return d.source.x; })
	.attr("y1", function(d) { return d.source.y; })
	.attr("x2", function(d) { return d.target.x; })
	.attr("y2", function(d) { return d.target.y; });

	node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
	};


	});

	</script>
	</body>
	</html>