mikong/gist:1947753

## gistfile1.txt
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js?2.8.0"></script>
  </head>
  <body>
    <div id="chart"></div>
    <script type="text/javascript">
      var width = 400,
          height = 300;

      var color = d3.scale.category20();

      var force = d3.layout.force()
          .charge(-120)
          .linkDistance(30)
          .size([width, height]);

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

      var json = {"nodes":
            [{"name":"Myriel","group":1},
             {"name":"Napoleon","group":1},
             {"name":"Mlle.Baptistine","group":1},
             {"name":"Mme.Magloire","group":1}],
          "links":
            [{"source":1,"target":0,"value":1},
             {"source":2,"target":1,"value":1},
             {"source":3,"target":0,"value":1},
             {"source":4,"target":0,"value":1}]
        }

      force
        .nodes(json.nodes)
        .links(json.links)
        .start();

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

      var node = svg.selectAll("circle.node")
          .data(json.nodes)
        .enter().append("circle")
          .attr("class", "node")
          .attr("r", 5)
          .style("fill", function(d) { return color(d.group); })
          .call(force.drag);

      node.append("title")
          .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("cx", function(d) { return d.x; })
            .attr("cy", function(d) { return d.y; });
      });

    </script>
  </body>
</html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js?2.8.0"></script>
	</head>
	<body>
	<div id="chart"></div>
	<script type="text/javascript">
	var width = 400,
	height = 300;

	var color = d3.scale.category20();

	var force = d3.layout.force()
	.charge(-120)
	.linkDistance(30)
	.size([width, height]);

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

	var json = {"nodes":
	[{"name":"Myriel","group":1},
	{"name":"Napoleon","group":1},
	{"name":"Mlle.Baptistine","group":1},
	{"name":"Mme.Magloire","group":1}],
	"links":
	[{"source":1,"target":0,"value":1},
	{"source":2,"target":1,"value":1},
	{"source":3,"target":0,"value":1},
	{"source":4,"target":0,"value":1}]
	}

	force
	.nodes(json.nodes)
	.links(json.links)
	.start();

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

	var node = svg.selectAll("circle.node")
	.data(json.nodes)
	.enter().append("circle")
	.attr("class", "node")
	.attr("r", 5)
	.style("fill", function(d) { return color(d.group); })
	.call(force.drag);

	node.append("title")
	.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("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; });
	});

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