circles

<!DOCTYPE html>
<html lang = 'en'>
	<head>
		<meta charset = 'utf-8'>
		<title>D3 Circles Test</title>
		<script type = 'text/javascript' src = 'd3/d3.v3.js'></script>
		<style type = 'text/css'>
			div.bar {
				display: inline-block;
				width: 20px;
				height: 75px;
				background-color: teal;
				margin-right: 2px;
			}
			.axis path,
			.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
		</style>
	</head>
	<body>
		<script type = 'text/javascript'>
			var w = 800;
			var h = 600;
			var padding = 0.15*w;
			
			var dataset = [];
			var n = 100;
			for (var i = 0; i < n; i++) {
				dataset.push(i*w/n);
			}
			var svg = d3.select('body')
						.append('svg')
						.attr('width', w)
						.attr('height',h)
						;
			var circles = svg.selectAll('circle')
				.data(dataset)
				.enter()
				.append('circle')
				.attr('cx', function(d) {return d;})
				.attr('cy', '50%')
				.attr('r', function(d,i) {return ((Math.sin(i/5) + 1.1)*3)+ '%';})
				.attr('fill','hsl('+(Math.random()*360)+',100%,50%)')
				;
			// var j = 0
			// while (j < 1) {
			// 	var move = function() {
			// 		d3.selectAll('circle')
			// 			.transition()
			// 			.delay(function(d,i) {return i*50;})
			// 			.duration(3000)
			// 		    .attr('r', function(d,i) {return ((Math.sin(i/5) + 1.1)*3)+ '%';})
			// 			.attr('cy', j + '%')
			// 			.attr('fill','hsl('+(Math.random()*360)+',100%,50%)')
			// 			.each('end', move)
			// 			j+=0.1
			// 			;
			// 		};
			// 	move();
			// 	};
			
			wave = function() {
				d3.selectAll('circle')
					.transition()
					.duration(3000)
					.delay(function(d,i) {return i*50;})
					.attr('cy','25%')
					.attr('fill','hsl('+(Math.random()*360)+',100%,50%)')
					.each('end', function() {
						d3.selectAll('circle')
							.transition()
							.delay(function(d,i) {return i*50;})
							.duration(3000)
							.attr('cy', '75%')
							.attr('fill','hsl('+(Math.random()*360)+',100%,50%)')
							.each('end', wave)
							;
					});
			};
			d3.selectAll('circle')
				.transition()
				.delay(function(d,i) {return i*50;})
				.duration(3000)
				.attr('cy','75%')
				.attr('fill','hsl('+(Math.random()*360)+',100%,50%)')
				.each('end', wave)
		</script>
	</body>
</html>