cultofmetatron/gist:5408443

## gistfile1.txt
<!doctype html>
<html>
  <head>
    <title>clock</title>
  <style type="text/css" media="screen">
		.container {
			width: 800px;
			margin: auto;
    }
    .chart {
      width: 800px;
      border: 1px solid black;
    }
	</style>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.min.js" type="text/javascript" charset="utf-8"></script>

  </head>
  <body>
	<div class='container'>
		<div class='chart'>

		</div>
		<script type="text/javascript" language="javascript" charset="utf-8">
      $(function() {
          //draw the objects to the screen
          var paint = d3.select('.chart');
          var canvas = paint.append('svg:svg')
            .attr('width' , 800)
            .attr('height', 400);

          particleGroup = canvas.append('svg:g')
            .attr('transform', 'translate(150, 150)');
          console.log(particleGroup);

          //renders the balls
        window.renderBalls = function(data) {
          //remove all presesnt spheres from the stage
          particleGroup.selectAll('.particle').remove();
          //cerate the particles aray using the data and let it know what to attach to
          //them by classnames
          var particles = particleGroup.selectAll('.particle')
              .data(data);
          //load the circles into the context
            particles.enter()
                .append('svg:circle')
                .attr('r', function(d) {
                  return d;
                })
                .attr('transform', function(d) {
                  return 'translate(' + 150 + ', ' + 15 +')'
                })
                .attr('fill', 'none')
                .attr('class', 'particle')
                .attr('stroke', 'black')
                .attr('stroke-width', 1);
            //on exit, remove the dead weight
            particles.exit().remove();

          }

          //continuously render for great justice!!
          var clear = 50;
          var dataBalls = [50, 20, 10, 15, 40];
          var animateFrame = function() {
            newDataBalls = [];
            dataBalls.forEach(function(item) {
              newDataBalls.push(item + 4);
            });
            dataBalls = newDataBalls;
            console.log(dataBalls);
            renderBalls(dataBalls);
            clear--;
            if (clear > 0) {
              setTimeout(animateFrame, 5);
            } else {
               dataBalls = [50, 20, 10, 15, 40];
               setTimeout(animateFrame, 10);
               clear = 100;
            }
          }
          animateFrame();
      });

    </script>
	</div>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>clock</title>
	<style type="text/css" media="screen">
	.container {
	width: 800px;
	margin: auto;
	}
	.chart {
	width: 800px;
	border: 1px solid black;
	}
	</style>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.min.js" type="text/javascript" charset="utf-8"></script>

	</head>
	<body>
	<div class='container'>
	<div class='chart'>

	</div>
	<script type="text/javascript" language="javascript" charset="utf-8">
	$(function() {
	//draw the objects to the screen
	var paint = d3.select('.chart');
	var canvas = paint.append('svg:svg')
	.attr('width' , 800)
	.attr('height', 400);

	particleGroup = canvas.append('svg:g')
	.attr('transform', 'translate(150, 150)');
	console.log(particleGroup);

	//renders the balls
	window.renderBalls = function(data) {
	//remove all presesnt spheres from the stage
	particleGroup.selectAll('.particle').remove();
	//cerate the particles aray using the data and let it know what to attach to
	//them by classnames
	var particles = particleGroup.selectAll('.particle')
	.data(data);
	//load the circles into the context
	particles.enter()
	.append('svg:circle')
	.attr('r', function(d) {
	return d;
	})
	.attr('transform', function(d) {
	return 'translate(' + 150 + ', ' + 15 +')'
	})
	.attr('fill', 'none')
	.attr('class', 'particle')
	.attr('stroke', 'black')
	.attr('stroke-width', 1);
	//on exit, remove the dead weight
	particles.exit().remove();

	}

	//continuously render for great justice!!
	var clear = 50;
	var dataBalls = [50, 20, 10, 15, 40];
	var animateFrame = function() {
	newDataBalls = [];
	dataBalls.forEach(function(item) {
	newDataBalls.push(item + 4);
	});
	dataBalls = newDataBalls;
	console.log(dataBalls);
	renderBalls(dataBalls);
	clear--;
	if (clear > 0) {
	setTimeout(animateFrame, 5);
	} else {
	dataBalls = [50, 20, 10, 15, 40];
	setTimeout(animateFrame, 10);
	clear = 100;
	}
	}
	animateFrame();
	});

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