mikong/index.html

## index.html
<html>
  <head>
  <script src="https://raw.github.com/mbostock/d3/master/d3.js"></script>
  <script src="https://raw.github.com/mbostock/d3/master/d3.geom.js"></script>
  <script src="https://raw.github.com/mbostock/d3/master/d3.layout.js"></script>
    <style>
      #area { background: #ddd; }
      circle { stroke-width: 2px; stroke: #fff; }
    </style>
  </head>
  <body>
    <div id="area" />
    <script>

      function genCircle() {
        return {
          x: Math.random() * 400 + 25,
          y: Math.random() * 400 + 25
        }
      }

      var data = [genCircle(), genCircle(), genCircle(), genCircle()];

      var canvass = d3.select('#area').append('svg:svg')
        .attr('height', 600)
        .attr('width', 960);

      var circles = canvass.selectAll('circle')
        .data(data);

      circles.enter()
        .append('svg:circle')
          .attr('cx', function(d) { return d.x })
          .attr('cy', function(d) { return d.y })
          .attr('r', 20)
          .attr('fill', '#933');

      var force = d3.layout.force()
        .nodes(data)
        .links([])
        .size([400, 400])
        .start()
        .gravity(0.000)
        .charge(-300);

      force.on('tick', function(e) {
        canvass.selectAll('circle')
          .attr('transform', function(d) {
            var newX = d.x + (Math.random() * 3);
            var newY = d.y + (Math.random() * 3);
            return 'translate(' + newX + ',' + newY + ')';
          });

        force.resume();
      });

      setInterval(function() {
        canvass.selectAll('circle').transition()
          .duration(300)
          .attr('r', function() { return Math.random() * 40 + 20; });
      }, 1000);
    </script>
  </body>
</html>
	<html>
	<head>
	<script src="https://raw.github.com/mbostock/d3/master/d3.js"></script>
	<script src="https://raw.github.com/mbostock/d3/master/d3.geom.js"></script>
	<script src="https://raw.github.com/mbostock/d3/master/d3.layout.js"></script>
	<style>
	#area { background: #ddd; }
	circle { stroke-width: 2px; stroke: #fff; }
	</style>
	</head>
	<body>
	<div id="area" />
	<script>

	function genCircle() {
	return {
	x: Math.random() * 400 + 25,
	y: Math.random() * 400 + 25
	}
	}

	var data = [genCircle(), genCircle(), genCircle(), genCircle()];

	var canvass = d3.select('#area').append('svg:svg')
	.attr('height', 600)
	.attr('width', 960);

	var circles = canvass.selectAll('circle')
	.data(data);

	circles.enter()
	.append('svg:circle')
	.attr('cx', function(d) { return d.x })
	.attr('cy', function(d) { return d.y })
	.attr('r', 20)
	.attr('fill', '#933');

	var force = d3.layout.force()
	.nodes(data)
	.links([])
	.size([400, 400])
	.start()
	.gravity(0.000)
	.charge(-300);

	force.on('tick', function(e) {
	canvass.selectAll('circle')
	.attr('transform', function(d) {
	var newX = d.x + (Math.random() * 3);
	var newY = d.y + (Math.random() * 3);
	return 'translate(' + newX + ',' + newY + ')';
	});

	force.resume();
	});

	setInterval(function() {
	canvass.selectAll('circle').transition()
	.duration(300)
	.attr('r', function() { return Math.random() * 40 + 20; });
	}, 1000);
	</script>
	</body>
	</html>