drzax/README.md

## README.md

      
    Raw
  

              README.md
            
          
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.node {
  stroke-width: 1.5px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="index.js"></script>

## index.js


var width = 512,
    height = 512,
    svg,
    gA,
    gB,
    total = 1000,
    radius = 1,
    limit = total,
    gravity = 10,
    // charge = 0.01,
    nodes,
    color,
    force;
in
nodes = d3.range(total).map(function() { return {}; });

var reversed = false;
setTimeout(function () {
  setInterval(function () {
    if (reversed) {
      if (limit < total) {
        limit++;
      } else {
        reversed = false;
      }
    } else {
      if (limit > 0) {
        limit--;
      } else {
        reversed = true;
      }
    }
  },10);
  setInterval(function () {
    force.alpha(0.01); // keep alive
  },1000);
}, 3000);

force = d3.layout.force()
    .gravity(gravity)
    // .charge(function(d, i) { return i < limit ? charge : charge * 3; })
    .nodes(nodes)
    .size([width, height]);

force.start();

svg = d3.select("body").append("svg")
    .attr('viewBox', '0 0 ' + width + ' ' + height);

svg.selectAll("circle")
    .data(nodes)
  .enter().append("circle")
    .attr("r", radius);

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

  while (++i < n) quadtree.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;
  };
}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.node {
	stroke-width: 1.5px;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="index.js"></script>


	var width = 512,
	height = 512,
	svg,
	gA,
	gB,
	total = 1000,
	radius = 1,
	limit = total,
	gravity = 10,
	// charge = 0.01,
	nodes,
	color,
	force;
	in
	nodes = d3.range(total).map(function() { return {}; });

	var reversed = false;
	setTimeout(function () {
	setInterval(function () {
	if (reversed) {
	if (limit < total) {
	limit++;
	} else {
	reversed = false;
	}
	} else {
	if (limit > 0) {
	limit--;
	} else {
	reversed = true;
	}
	}
	},10);
	setInterval(function () {
	force.alpha(0.01); // keep alive
	},1000);
	}, 3000);

	force = d3.layout.force()
	.gravity(gravity)
	// .charge(function(d, i) { return i < limit ? charge : charge * 3; })
	.nodes(nodes)
	.size([width, height]);

	force.start();

	svg = d3.select("body").append("svg")
	.attr('viewBox', '0 0 ' + width + ' ' + height);

	svg.selectAll("circle")
	.data(nodes)
	.enter().append("circle")
	.attr("r", radius);

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

	while (++i < n) quadtree.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;
	};
	}