mhawksey/force.json

## force.json
{
  "nodes": [
     paste your vertices data here
  ],
  "links": [
     paste your edges data here
  ]
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Force-Directed Layout</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
    <style type="text/css">

path.link {
  fill: none;
  stroke: #666;
  stroke-width: 1.5px;
}

marker#licensing {
  fill: green;
}

path.link.licensing {
  stroke: green;
}

path.link.resolved {
  stroke-dasharray: 0,2 1;
}

circle {
  fill: #ccc;
  stroke: #333;
  stroke-width: 1.5px;
}

text {
  font: 10px sans-serif;
  pointer-events: none;
}

text.shadow {
  stroke: #fff;
  stroke-width: 3px;
  stroke-opacity: .8;
}

    </style>
  </head>
  <body>
<script type="text/javascript">

var w = 962,
    h = 502;

d3.json("force.json", function(json) {
  var force = d3.layout.force()
      .charge(-220)
      .linkDistance(80)
      .nodes(json.nodes)
      .links(json.links)
      .size([w, h])
      .on("tick", tick)
      .start();

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

// Per-type markers, as they don't inherit styles.
svg.append("svg:defs").selectAll("marker")
    .data(force.nodes())
  .enter().append("svg:marker")
    .attr("id", function(d) { return "suit"+d.id; })
    .attr("viewBox", "0 -5 10 10")
    .attr("refX", function(d) { return d.nodeSize*3*2 || 5; })
    .attr("refY", -1.5)
    .attr("markerWidth", 6)
    .attr("markerHeight", 6)
    .attr("orient", "auto")
  .append("svg:path")
    .attr("d", "M0,-5L10,0L0,5");

var path = svg.append("svg:g").selectAll("path")
    .data(force.links())
  .enter().append("svg:path")
    .attr("class", function(d) { return "link suit"; })
    .attr("marker-end", function(d) { return "url(#suit"+d.target.id+")"; });

var circle = svg.append("svg:g").selectAll("circle.node")
    .data(force.nodes())
    .enter().append("svg:circle")
    .attr("r", function(d) { return d.nodeSize*3 || 5; })
    .on("click", function(d) { window.open(d.url);})
    .call(force.drag);

var text = svg.append("svg:g").selectAll("g")
    .data(force.nodes())
  .enter().append("svg:g");

// A copy of the text with a thick white stroke for legibility.
text.append("svg:text")
    .attr("x", 8)
    .attr("y", ".31em")
    .attr("class", "shadow")
    .text(function(d) { return d.name; });

text.append("svg:text")
    .attr("x", 8)
    .attr("y", ".31em")
    .text(function(d) { return d.name; });

// Use elliptical arc path segments to doubly-encode directionality.
function tick() {
  path.attr("d", function(d) {
    var dx = d.target.x - d.source.x,
        dy = d.target.y - d.source.y,
        dr = Math.sqrt(dx * dx + dy * dy);
    return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
  });

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

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


});
</script>
  </body>
</html>
	{
	"nodes": [
	paste your vertices data here
	],
	"links": [
	paste your edges data here
	]
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Force-Directed Layout</title>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script>
	<style type="text/css">

	path.link {
	fill: none;
	stroke: #666;
	stroke-width: 1.5px;
	}

	marker#licensing {
	fill: green;
	}

	path.link.licensing {
	stroke: green;
	}

	path.link.resolved {
	stroke-dasharray: 0,2 1;
	}

	circle {
	fill: #ccc;
	stroke: #333;
	stroke-width: 1.5px;
	}

	text {
	font: 10px sans-serif;
	pointer-events: none;
	}

	text.shadow {
	stroke: #fff;
	stroke-width: 3px;
	stroke-opacity: .8;
	}

	</style>
	</head>
	<body>
	<script type="text/javascript">

	var w = 962,
	h = 502;

	d3.json("force.json", function(json) {
	var force = d3.layout.force()
	.charge(-220)
	.linkDistance(80)
	.nodes(json.nodes)
	.links(json.links)
	.size([w, h])
	.on("tick", tick)
	.start();

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

	// Per-type markers, as they don't inherit styles.
	svg.append("svg:defs").selectAll("marker")
	.data(force.nodes())
	.enter().append("svg:marker")
	.attr("id", function(d) { return "suit"+d.id; })
	.attr("viewBox", "0 -5 10 10")
	.attr("refX", function(d) { return d.nodeSize32 \|\| 5; })
	.attr("refY", -1.5)
	.attr("markerWidth", 6)
	.attr("markerHeight", 6)
	.attr("orient", "auto")
	.append("svg:path")
	.attr("d", "M0,-5L10,0L0,5");

	var path = svg.append("svg:g").selectAll("path")
	.data(force.links())
	.enter().append("svg:path")
	.attr("class", function(d) { return "link suit"; })
	.attr("marker-end", function(d) { return "url(#suit"+d.target.id+")"; });

	var circle = svg.append("svg:g").selectAll("circle.node")
	.data(force.nodes())
	.enter().append("svg:circle")
	.attr("r", function(d) { return d.nodeSize*3 \|\| 5; })
	.on("click", function(d) { window.open(d.url);})
	.call(force.drag);

	var text = svg.append("svg:g").selectAll("g")
	.data(force.nodes())
	.enter().append("svg:g");

	// A copy of the text with a thick white stroke for legibility.
	text.append("svg:text")
	.attr("x", 8)
	.attr("y", ".31em")
	.attr("class", "shadow")
	.text(function(d) { return d.name; });

	text.append("svg:text")
	.attr("x", 8)
	.attr("y", ".31em")
	.text(function(d) { return d.name; });

	// Use elliptical arc path segments to doubly-encode directionality.
	function tick() {
	path.attr("d", function(d) {
	var dx = d.target.x - d.source.x,
	dy = d.target.y - d.source.y,
	dr = Math.sqrt(dx * dx + dy * dy);
	return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
	});

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

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


	});
	</script>
	</body>
	</html>