Anscombe's Circles Group 2 with SVG Titles

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

svg {
    /*border:1px solid #f0f;*/
  }

.axis text {
    font-size: 12px;
    fill: #777;
  }

.axis path {
    display: none;
  }

.axis line {
    stroke-width:1px;
    stroke: #ccc;
    stroke-dasharray: 2px 2px;
  }

.anscombe-circle-group text {
    fill: #aaa;
    font-size: 11px;
  }

.anscombe-circle-group circle {
    fill: #FF355E;
    stroke: #fff;
    stroke-width:1px;

}

</style>

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

var width = 720 - margin.left - margin.right,
   height = 400 - 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([2,16])
	.range([0, width]);

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

var xAxis = d3.svg.axis()
	.scale(xScale)
	.tickSize(-height)
    .tickPadding(8)
	.orient("bottom");

var yAxis = d3.svg.axis()
	.scale(yScale)
	.tickSize(-width)
    .tickPadding(8)
	.orient("left");

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

svg.append("g")
 .attr("class","y axis")
 .attr("transform","translate(" + margin.left + ",0)")
 .call(yAxis);

var circleGroup = 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) + ")"; });

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

circleGroup.append("svg:title")
    .text(function(d) { return "(" + d.x + "," + d.y + ")"; })
    .attr("dx", 6);

</script>

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