baiyanhuang/d3testing.html

## d3testing.html
<html>
<!-- http://d3js.org/ -->
	<head>
		<title> D3 Testing </title>
		<script src="http://d3js.org/d3.v2.js"></script>
		<style type="text/css">
			body {
				background-color: green;
				color: white;
			}
		</style>
	</head>

	<body>
		<script type="text/javascript">
			d3.select("body").append("p").text("New paragraph!");

			//Width and height
			var w = 500;
			var h = 50;

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

			var dataset = [ 5, 10, 15, 20, 25 ];

			var circles = svg.selectAll("circle")
				.data(dataset)
				.enter()
				.append("circle");

			circles.attr("cx", function(d, i) {
						return (i * 50) + 25;
					})
				   .attr("cy", h/2)
				   .attr("r", function(d) {
					return d;
			   });

		</script>
		<svg width="50" height="50">
			<circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/>
		</svg>

	</body>
</html>
	<html>
	<!-- http://d3js.org/ -->
	<head>
	<title> D3 Testing </title>
	<script src="http://d3js.org/d3.v2.js"></script>
	<style type="text/css">
	body {
	background-color: green;
	color: white;
	}
	</style>
	</head>

	<body>
	<script type="text/javascript">
	d3.select("body").append("p").text("New paragraph!");

	//Width and height
	var w = 500;
	var h = 50;

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

	var dataset = [ 5, 10, 15, 20, 25 ];

	var circles = svg.selectAll("circle")
	.data(dataset)
	.enter()
	.append("circle");

	circles.attr("cx", function(d, i) {
	return (i * 50) + 25;
	})
	.attr("cy", h/2)
	.attr("r", function(d) {
	return d;
	});

	</script>
	<svg width="50" height="50">
	<circle cx="25" cy="25" r="22" fill="blue" stroke="gray" stroke-width="2"/>
	</svg>

	</body>
	</html>