chantalgo/index.html

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

<style type="text/css">

	svg {
		border: 1px solid #C6c;
	}

	circle {
		fill: red;
	}

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

</style>

<body>

	<h1>Anscombe's quartet</h1>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

<script>
  //JS to go here

	var anscombeData = [
	   {"x": 10, "y": 8.04},
	   {"x": 8, "y": 6.95},
	   {"x": 13, "y": 7.58},
	   {"x": 9, "y": 8.81},
	   {"x": 11, "y": 8.33},
	   {"x": 14, "y": 9.96},
	   {"x": 6, "y": 7.24},
	   {"x": 4, "y": 4.26},
	   {"x": 12, "y": 10.84},
	   {"x": 7, "y": 4.82},
	   {"x": 5, "y": 5.68}
	 ];

	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>
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style type="text/css">

	svg {
	border: 1px solid #C6c;
	}

	circle {
	fill: red;
	}

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

	</style>

	<body>

	<h1>Anscombe's quartet</h1>

	</body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

	<script>
	//JS to go here

	var anscombeData = [
	{"x": 10, "y": 8.04},
	{"x": 8, "y": 6.95},
	{"x": 13, "y": 7.58},
	{"x": 9, "y": 8.81},
	{"x": 11, "y": 8.33},
	{"x": 14, "y": 9.96},
	{"x": 6, "y": 7.24},
	{"x": 4, "y": 4.26},
	{"x": 12, "y": 10.84},
	{"x": 7, "y": 4.82},
	{"x": 5, "y": 5.68}
	];

	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>