dfalbel/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
forked from anonymous's block: fresh block

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <script>
    var margin = {top: 20, right: 10, bottom: 20, left: 10};
    var width = 960,
    height = 500;

    var nodes = d3.range(33).map(function() { return {radius: Math.random() * 12 + 4}; }),
        root = nodes[0],
        color = d3.scale.category10();

    root.radius = 16;
    root.fixed = false;

    var size = d3.scale.sqrt()
    							.domain([0, d3.max(nodes, function(d) {return d.radius})]);

    var force = d3.layout.force()
        .gravity(0.05)
        .charge(function(d, i) { return 0; })
        .nodes(nodes)
        .size([width, height]);

    force.start();

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

    svg.selectAll("circle")
       	.data(nodes)
      	.enter()
      	.append("circle")
        .attr("r", function(d) { return d.radius; })
        .style("fill", function(d, i) { return color(i % 3); })
    		.call(force.drag);

    force.on("tick", function(e) {
      var q = d3.geom.quadtree(nodes),
          i = 0,
          n = nodes.length;

      while (++i < n) q.visit(collide(nodes[i]));

      svg.selectAll("circle")
          .attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
    });

    function collide(node) {
      var r = node.radius + 16,
          nx1 = node.x - r,
          nx2 = node.x + r,
          ny1 = node.y - r,
          ny2 = node.y + r;
      return function(quad, x1, y1, x2, y2) {
        if (quad.point && (quad.point !== node)) {
          var x = node.x - quad.point.x,
              y = node.y - quad.point.y,
              l = Math.sqrt(x * x + y * y),
              r = node.radius + quad.point.radius;
          if (l < r) {
            l = (l - r) / l * .5;
            node.x -= x *= l;
            node.y -= y *= l;
            quad.point.x += x;
            quad.point.y += y;
          }
        }
        return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1;
      };
   }
  </script>
</body>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	svg { width: 100%; height: 100%; }
	</style>
	</head>

	<body>
	<script>
	var margin = {top: 20, right: 10, bottom: 20, left: 10};
	var width = 960,
	height = 500;

	var nodes = d3.range(33).map(function() { return {radius: Math.random() * 12 + 4}; }),
	root = nodes[0],
	color = d3.scale.category10();

	root.radius = 16;
	root.fixed = false;

	var size = d3.scale.sqrt()
	.domain([0, d3.max(nodes, function(d) {return d.radius})]);

	var force = d3.layout.force()
	.gravity(0.05)
	.charge(function(d, i) { return 0; })
	.nodes(nodes)
	.size([width, height]);

	force.start();

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

	svg.selectAll("circle")
	.data(nodes)
	.enter()
	.append("circle")
	.attr("r", function(d) { return d.radius; })
	.style("fill", function(d, i) { return color(i % 3); })
	.call(force.drag);

	force.on("tick", function(e) {
	var q = d3.geom.quadtree(nodes),
	i = 0,
	n = nodes.length;

	while (++i < n) q.visit(collide(nodes[i]));

	svg.selectAll("circle")
	.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; });
	});

	function collide(node) {
	var r = node.radius + 16,
	nx1 = node.x - r,
	nx2 = node.x + r,
	ny1 = node.y - r,
	ny2 = node.y + r;
	return function(quad, x1, y1, x2, y2) {
	if (quad.point && (quad.point !== node)) {
	var x = node.x - quad.point.x,
	y = node.y - quad.point.y,
	l = Math.sqrt(x * x + y * y),
	r = node.radius + quad.point.radius;
	if (l < r) {
	l = (l - r) / l * .5;
	node.x -= x *= l;
	node.y -= y *= l;
	quad.point.x += x;
	quad.point.y += y;
	}
	}
	return x1 > nx2 \|\| x2 < nx1 \|\| y1 > ny2 \|\| y2 < ny1;
	};
	}
	</script>
	</body>