thomasdunn/d3-demo-1

## d3-demo-1
<html>
<head>
  <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script language="javascript" src="http://d3js.org/d3.v3.min.js?3.0.0rc1"></script>
<body>
	<h1>D3 Demo 1</h1>

	<!-- layout with twitter bootstrap or other layout project? -->
	Random colored balls from 20-color series, drawn at random position,
	drop off of the screen and fade. [STILL IN THE WORKS!!!]

	<div id="paper">
	</div>

	<script language="javascript">
		var dim = {height: 600, width: 800},
			maxRadius = 30,
			colors = d3.scale.category20c(),
			colorIdx = 0;

		var svg = d3.select("#paper").append("svg")
		    .attr("width", dim.width)
		    .attr("height", dim.height);

		function randomCircles() {
			var circles = [];
			// something out of underscore.js to improve this?
			for (var i = 0; i < 100; i++) {
				circles.push({
					x: Math.random() * dim.width,
					y: Math.random() * dim.height,
					r: Math.random() * maxRadius
				});
			}
			return circles;
		}

		svg.selectAll('not-there')
		 	.data(randomCircles())
		 	.enter()
		 		.append('circle')
		 			.attr('cx', function(c) { return c.x; })
		 			.attr('cy', function(c) { return c.y; })
		 			.attr('r', function(c) { return c.r; })
		 			.attr('fill', colors(colorIdx++));


	</script>

</body>
</html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script language="javascript" src="http://d3js.org/d3.v3.min.js?3.0.0rc1"></script>
	<body>
	<h1>D3 Demo 1</h1>

	<!-- layout with twitter bootstrap or other layout project? -->
	Random colored balls from 20-color series, drawn at random position,
	drop off of the screen and fade. [STILL IN THE WORKS!!!]

	<div id="paper">
	</div>

	<script language="javascript">
	var dim = {height: 600, width: 800},
	maxRadius = 30,
	colors = d3.scale.category20c(),
	colorIdx = 0;

	var svg = d3.select("#paper").append("svg")
	.attr("width", dim.width)
	.attr("height", dim.height);

	function randomCircles() {
	var circles = [];
	// something out of underscore.js to improve this?
	for (var i = 0; i < 100; i++) {
	circles.push({
	x: Math.random() * dim.width,
	y: Math.random() * dim.height,
	r: Math.random() * maxRadius
	});
	}
	return circles;
	}

	svg.selectAll('not-there')
	.data(randomCircles())
	.enter()
	.append('circle')
	.attr('cx', function(c) { return c.x; })
	.attr('cy', function(c) { return c.y; })
	.attr('r', function(c) { return c.r; })
	.attr('fill', colors(colorIdx++));


	</script>

	</body>
	</html>