Blocks Example of Anscombe's Quartet - Group 3

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

</style>

var margin = {top: 50, right: 50, bottom: 50, left: 50};

var width = 500 - margin.left - margin.right,
	    height = 500 - margin.top - margin.bottom;

var svg = d3.select("body")
		.append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
		.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top +")")

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

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

var xAxis = d3.svg.axis()
		.scale(xScale)
		.ticks(15)
		.tickSize(-height)
		// making the ticks and number display below the axis
		.orient("bottom")

var yAxis = d3.svg.axis()
		.scale(yScale)
		.ticks(15)
		.tickSize(-width)
		// making the ticks and number display to the left of the axis
		.orient("left")

svg.append("g")
		.attr("class", "x axis")
		.attr("transform","translate(0, " + height + ")")
		.call(xAxis)

svg.append("g")
		.attr("class", "y axis")
		.call(yAxis)

// var circles = svg.selectAll(".anscombe-circles")
	// 	.data(data)
	// 	.enter().append("circle")
	// 	.attr("class","anscombe-circles")
	// 	.attr("cx", function(d) {return xScale(d.x) })
	// 	.attr("cy", function(d) {return yScale(d.y) })
	// 	.attr("r", 5);

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

circleGroups.append("text")
		.attr("class", function(d,i) { return i })
		.attr("dx", 5)
		.attr("dy", 5)
		.text(function(d) { return d.x + "," + d.y; })

circleGroups.append("circle")
		.attr("class", function(d,i) { return "anscombe-circles T" + i; })
		.attr("r", 5)	
		.on("mouseover", function() {
			var myClass = d3.select(this).attr("class").split(" ")[1];
			d3.selectAll("." + myClass)
			.style("fill", "#fff")
		})
		.on("mouseleave", function() {
			d3.selectAll("text")
			.style
		})

svg.append("line")
		.attr("x1", 0)
		.attr("x2", width)
		.attr("y1", height)
		.attr("y2", height)				
		.style("stroke", "#000")

</script>

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