Dynamic Circles

<!DOCTYPE html>
<html>

<head>

<style>

h2,h3{
	text-align: center;
}
.button {
	/*width: 50px;*/
	height: 26px;
	display: block;

border-top: 1px solid #96d1f8;
   background: #65a9d7;
   background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#65a9d7));
   background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
   background: -moz-linear-gradient(top, #3e779d, #65a9d7);
   background: -ms-linear-gradient(top, #3e779d, #65a9d7);
   background: -o-linear-gradient(top, #3e779d, #65a9d7);
   padding: 5px 10px;
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   border-radius: 8px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.button:hover {
   border-top-color: #28597a;
   background: #28597a;
   color: #ccc;
   }
.button:active {
   border-top-color: #1b435e;
   background: #1b435e;
   }

.leftDiv {
	
	width: 200;
	height: 200;
	float:left;
	/*border: solid 4px red;*/
}

.rightDiv {
		overflow:hidden;
		padding:3px;
		/*border: solid 4px blue;*/
	
}

.circle_data {
	/*border: solid 4px green;*/
	text-align: left;
	width:auto;
	height:165px;
	overflow: scroll;
}

.wrapper {
	/*border: solid 4px black;*/
	overflow:hidden;
	width:470px;
	padding:5px;
}

li {
	font-size: small;
	text-align: left;
	margin-left:-10px;
}

.selected {
	font-weight: bold;
}

.wrapper {
	margin:auto;
}

</style>

<body>

<div class="container-narrow wrapper">
		<div class="row">
			<h2>Exercise in Circles</h2>
		</div>
		<div class="row">
			<div class="col-md-12"></div>
				<div class="recreate">
					<h3>Circle Regeneration</h3>
				</div>
		</div>
	</div>

var width = 200,
	height = 200;

var body = d3.select("body");

var recreateText = "Clicking inside the rectangle will dynamically create " + 
"cirlces and populate a list with thier x,y,r and color attributes.   Once you have decided " + 
"that enough circles have been created, clicking the 'Recreate All Circles' " +
"button will regenerate those circles in the same order they were originally created"

var wrapper = body.select(".wrapper")

var recreate = d3.select(".recreate")

recreate.append("p").text(recreateText)

var leftDiv = recreate.append('div').attr("class","leftDiv")

var rightDiv = recreate.append('div').attr("class","rightDiv")

var svg = leftDiv.append("svg")
		.attr("class","svg")
    	.attr("width",width)
    	.attr("height",height)
    	.on("mousedown",draw)
    	.append('g')
    	//.attr("transform","translate(1,1)")
    
 svg.append("rect")
	 .attr("x", 0)
	 .attr("y", 0)
	 .attr("height", height)
	 .attr("width", width)
	 .style("stroke", "black")
	 .style("fill", "none")
	 .style("stroke-width", ".5");

var buttons_container = rightDiv.append('div')
buttons_container.append("input")
		.attr("type","button")
		.attr("class","button")
		.attr("value","Recreate All Circles")
		.style("margin-left","40px")
		.on("click",replay);

var circle_data = rightDiv.append('div')
circle_data.attr("class","circle_data")

var ol = circle_data.append("ol")

var circleObj = function (x,y,r,fill) {
	this.x = x;
	this.y = y;
	this.r = r;
	this.fill = fill;
	this.stroke = "black";
	this.opacity = ".2";
};

var allCircles = [];

//replayAll.on('click', replay);

</script>

</body>

</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.10/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js