danse/force.html

## force.html
<!DOCTYPE html>
<html>
  <head>
    <title>Force-Directed Graph</title>
    <!--
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
    -->
    <script type="text/javascript" src="d3.v3.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">

var w = 960,
    h = 500,
    nodes = [];

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

var force = d3.layout.force()
    .nodes(nodes)
    .charge(function(d){return - 7 * d.size;})
    .size([w, h]);

force.on("tick", function(e) {
  vis.selectAll("g")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});

function start(){

  // Add a new random shape.
  for (var i=0; i<50; i++){
  nodes.push({
    size: i
  });
  }

  // Start the layout.
  force.start();

  var enter = vis.selectAll("g")
      .data(nodes)
      .enter().append("g")
      .call(force.drag);
  enter
      .append('circle')
      .attr('r', function(d) { return d.size; })
      .style("fill", "steelblue");
  enter
      .append('text')
      .text(function(d){return d.size;})

}
window.onload = start;

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Force-Directed Graph</title>
	<!--
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js"></script>
	-->
	<script type="text/javascript" src="d3.v3.min.js"></script>
	</head>
	<body>
	<script type="text/javascript">

	var w = 960,
	h = 500,
	nodes = [];

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

	var force = d3.layout.force()
	.nodes(nodes)
	.charge(function(d){return - 7 * d.size;})
	.size([w, h]);

	force.on("tick", function(e) {
	vis.selectAll("g")
	.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
	});

	function start(){

	// Add a new random shape.
	for (var i=0; i<50; i++){
	nodes.push({
	size: i
	});
	}

	// Start the layout.
	force.start();

	var enter = vis.selectAll("g")
	.data(nodes)
	.enter().append("g")
	.call(force.drag);
	enter
	.append('circle')
	.attr('r', function(d) { return d.size; })
	.style("fill", "steelblue");
	enter
	.append('text')
	.text(function(d){return d.size;})

	}
	window.onload = start;

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