D3Viz Class 01: Exercise

<!DOCTYPE html>
<meta charset="utf-8">

svg {
		border: 1px solid #C6c;
	}

circle {
		fill: red;
	}

text {
		font-family: "Avenir Next";
		font-size: 10px;
	}

</style>

<body>
	
	<h1>Anscombe's quartet</h1>

</body>

var width = 700,
		height = 400;

var xScale = d3.scale.linear()
		.range([0,width])
		.domain([2,20]);

var yScale = d3.scale.linear()
		.range([height,0])
		.domain([0,15]);

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

var circleGroup = svg.selectAll("g")
		.data(anscombeData)
		.enter()
		.append("g")
		.attr("class", "circle-group")
		.attr("transform", function(d) {
			return "translate("+ xScale(d.x) + "," + yScale(d.y) + ")";
		}
		);

circleGroup.append("circle")
		.attr("r", 5);

circleGroup.append("text")
		.text(function(d){ return d.x +","+ d.y; })
/*
 	var circle = svg.selectAll("circle")
		.data(anscombeData)
		.enter()
		.append("circle")
		.attr("r", 5)
		.attr("cx", function(d) { return xScale(d.x) })
		.attr("cy", function(d) { return yScale(d.y) })
		;

var label = svg.selectAll("text")
		.data(anscombeData)
		.enter()
		.append("text")
		.attr("x", function(d) { return xScale(d.x) })
		.attr("y", function(d) { return yScale(d.y) })
		.text(function(d){ return d.x + "," + d.y; })
		;
*/
</script>

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