saumyasuhagiya/VisualizeRubberBalls.html

## VisualizeRubberBalls.html
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
</head>
<body onload="addCircle()">
	<input type="button" onclick="addCircle()" value="Click here to add balls"></input>
    <div id="viz"></div>
    <script type="text/javascript">
	var width=1000;
	var height=700;
	var rad=20;
	var count=0;
    var sampleSVG = d3.select("#viz")
        .append("svg")
        .attr("width", width)
        .attr("height", height);

	function animate(){
		d3.select(this)
		  .transition()
			.duration(2000)
			.ease("elastic")
			.attr("cx", 89)
			.attr("cy",300);

	};
	function updateCircles(){
		var dataArray=[];
		var x;
		var y;
		var data;
		for(var i=0;i<count;i++)
		{
			data=[];
			x=Math.floor((Math.random() * width) + 1);
			y=Math.floor((Math.random() * height) + 1);
			data.push(x);
			data.push(y);
			dataArray.push(data);

			d3.select("#circle_"+i)
			.transition()
			.duration(1000)
			.ease("elastic")
			.attr("transform", "translate("+x+","+y+")");
		}
	}
	function addCircle(){
		var x=Math.floor((Math.random() * width) + 1);
		var y=Math.floor((Math.random() * height) + 1);

		var circleGroup=sampleSVG.append("g")
		.attr("id","circle_"+count)
		.attr("transform","translate("+ x +","+ y +")");

		circleGroup.append("circle")
		.attr("cx",rad)
		.attr("cy",rad)
		.attr("r", rad)
		.attr("stroke","blue");

		circleGroup.append("text")
		.text(""+count)
		.attr("x",0)
		.attr("y",0)

		count++;
	}
	var auto_refresh = setInterval("updateCircles()", 1000);
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	</head>
	<body onload="addCircle()">
	<input type="button" onclick="addCircle()" value="Click here to add balls"></input>
	<div id="viz"></div>
	<script type="text/javascript">
	var width=1000;
	var height=700;
	var rad=20;
	var count=0;
	var sampleSVG = d3.select("#viz")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	function animate(){
	d3.select(this)
	.transition()
	.duration(2000)
	.ease("elastic")
	.attr("cx", 89)
	.attr("cy",300);

	};
	function updateCircles(){
	var dataArray=[];
	var x;
	var y;
	var data;
	for(var i=0;i<count;i++)
	{
	data=[];
	x=Math.floor((Math.random() * width) + 1);
	y=Math.floor((Math.random() * height) + 1);
	data.push(x);
	data.push(y);
	dataArray.push(data);

	d3.select("#circle_"+i)
	.transition()
	.duration(1000)
	.ease("elastic")
	.attr("transform", "translate("+x+","+y+")");
	}
	}
	function addCircle(){
	var x=Math.floor((Math.random() * width) + 1);
	var y=Math.floor((Math.random() * height) + 1);

	var circleGroup=sampleSVG.append("g")
	.attr("id","circle_"+count)
	.attr("transform","translate("+ x +","+ y +")");

	circleGroup.append("circle")
	.attr("cx",rad)
	.attr("cy",rad)
	.attr("r", rad)
	.attr("stroke","blue");

	circleGroup.append("text")
	.text(""+count)
	.attr("x",0)
	.attr("y",0)

	count++;
	}
	var auto_refresh = setInterval("updateCircles()", 1000);
	</script>
	</body>
	</html>