sarandafl/graphFile.json

## graphFile.json
{
  "nodes":[
		{"name":"HANE0002","group":1,"id":"HANE0002"},
		{"name":"HANE0003","group":1,"id":"HANE0003"},
		{"name":"AANE0002","group":2,"id":"AANE0002"}
	],
	"links":[
		{"source":"AANE0002","target":"HANE0002","weight":1},
		{"source":"AANE0002","target":"HANE0003","weight":1}
	]
}

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
<style>

.link {
  stroke: #aaa;
}

.node text {
stroke:#333;
cursos:pointer;
}

.node circle{
stroke:#fff;
stroke-width:3px;
fill:#555;
}

</style>
<body>
<script>

var width = 960,
    height = 500

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

var force = d3.layout.force()
    .gravity(.05)
    .distance(100)
    .charge(-100)
    .size([width, height]);

d3.json("graphFile.json", function(json) {
  force
      .nodes(json.nodes)
      .links(json.links)
      .start();

  var link = svg.selectAll(".link")
      .data(json.links)
    .enter().append("line")
      .attr("class", "link")
    .style("stroke-width", function(d) { return Math.sqrt(d.weight); });

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

  node.append("circle")
      .attr("r","5");

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

  force.on("tick", function() {
    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>
	{
	"nodes":[
	{"name":"HANE0002","group":1,"id":"HANE0002"},
	{"name":"HANE0003","group":1,"id":"HANE0003"},
	{"name":"AANE0002","group":2,"id":"AANE0002"}
	],
	"links":[
	{"source":"AANE0002","target":"HANE0002","weight":1},
	{"source":"AANE0002","target":"HANE0003","weight":1}
	]
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script>
	<style>

	.link {
	stroke: #aaa;
	}

	.node text {
	stroke:#333;
	cursos:pointer;
	}

	.node circle{
	stroke:#fff;
	stroke-width:3px;
	fill:#555;
	}

	</style>
	<body>
	<script>

	var width = 960,
	height = 500

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

	var force = d3.layout.force()
	.gravity(.05)
	.distance(100)
	.charge(-100)
	.size([width, height]);

	d3.json("graphFile.json", function(json) {
	force
	.nodes(json.nodes)
	.links(json.links)
	.start();

	var link = svg.selectAll(".link")
	.data(json.links)
	.enter().append("line")
	.attr("class", "link")
	.style("stroke-width", function(d) { return Math.sqrt(d.weight); });

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

	node.append("circle")
	.attr("r","5");

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

	force.on("tick", function() {
	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>