mapsam/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3 practice</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
body {
	padding:0;
	margin:0;
}
#container {
	display:block;
	margin:20px auto;
	width:900px;
}
.circles {
	fill:rgba(0,0,0,0.0);
	stroke:#000;
}
</style>
</head>
<body>

<script>

var data = [],
	objects = 10,
	radius = 100,
	iter = radius/objects,
	w = 960,
	h = 500,
	circley = h/2,
	circlex = w/2;

for(var i=0; i < objects; i++){
	data.push(radius);
	radius = radius-iter;
}

var svgContainer = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h);

var circles = svgContainer.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.on('mousedown', firstCircle);


var circleAttributes = circles
	.attr("cx", circlex)
	.attr("cy", circley)
	.attr("r", function (d) { return d; })
	.style('fill', 'steelblue')
	.style('opacity', 0.2)
	.style('stroke', 'black')
	.style('stroke-width', '0');

function firstCircle(){
	d3.select(this)
		.transition()
			.delay(0)
			.duration(1000)
			.attr('cx', 650)
			.each('end', secondCircle);
};
function secondCircle(){
	d3.select(this)
		.transition()
			.duration(1000)
			.attr('cx', 250)
			.style('fill', 'black')
			.each('end', thirdCircle);
}
function thirdCircle(){
	d3.select(this)
		.transition()
			.duration(5000)
			.attr('cx', circlex)
			.each('end', fourthCircle);
}
function fourthCircle(){
	d3.select(this)
		.transition()
			.duration(3000)
			.style('fill', 'steelblue');
}

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>d3 practice</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style>
	body {
	padding:0;
	margin:0;
	}
	#container {
	display:block;
	margin:20px auto;
	width:900px;
	}
	.circles {
	fill:rgba(0,0,0,0.0);
	stroke:#000;
	}
	</style>
	</head>
	<body>

	<script>

	var data = [],
	objects = 10,
	radius = 100,
	iter = radius/objects,
	w = 960,
	h = 500,
	circley = h/2,
	circlex = w/2;

	for(var i=0; i < objects; i++){
	data.push(radius);
	radius = radius-iter;
	}

	var svgContainer = d3.select("body").append("svg")
	.attr("width", w)
	.attr("height", h);

	var circles = svgContainer.selectAll("circle")
	.data(data)
	.enter()
	.append("circle")
	.on('mousedown', firstCircle);


	var circleAttributes = circles
	.attr("cx", circlex)
	.attr("cy", circley)
	.attr("r", function (d) { return d; })
	.style('fill', 'steelblue')
	.style('opacity', 0.2)
	.style('stroke', 'black')
	.style('stroke-width', '0');

	function firstCircle(){
	d3.select(this)
	.transition()
	.delay(0)
	.duration(1000)
	.attr('cx', 650)
	.each('end', secondCircle);
	};
	function secondCircle(){
	d3.select(this)
	.transition()
	.duration(1000)
	.attr('cx', 250)
	.style('fill', 'black')
	.each('end', thirdCircle);
	}
	function thirdCircle(){
	d3.select(this)
	.transition()
	.duration(5000)
	.attr('cx', circlex)
	.each('end', fourthCircle);
	}
	function fourthCircle(){
	d3.select(this)
	.transition()
	.duration(3000)
	.style('fill', 'steelblue');
	}

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