Basic exercise with one data set of Anscombe's Quartet

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

svg{
  	border: 1px solid #f0f;
  }

circle{
  	fill:blue;
  }

text{
  	font-family: arial;
  	font-size: 10px;
  	fill:gray;
  }

</style>

<body>
	
	<h1 class="header">Anscombe's Quartet</h1>
</body>

// var sentence = d3.select("body")
	// 				.selectAll("p")
	// 				.data(parts)
 //    				.enter()
 //      				.append("p")
 //      				.text(function(d) { return d; });
 	var width = 720;
 	var height = 400;

var data = [{"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 svg = d3.select("body")
  				.append("svg")
  				.attr("width",width)
  				.attr("height",height);

var scaleX = d3.scale.linear()
    			.range([0, width])
    			.domain([2,20]);
    			//.domain([d3.min(data.x),d3.max(data.x)]);

var scaleY = d3.scale.linear()
    				.range([height,0])
    				.domain([0,15]);
    				//.domain([d3.min(data.y),d3.max(data.y)]);

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

circleGroup.append("circle")
  	// 	.attr("cx",function(d){return scaleX(d.x);})
  	// 	.attr("cy",function(d){return scaleY(d.y);})
  		.attr("r",5)
  		.attr("class","anscombe-circle");

circleGroup.append("text")
  		// .attr("x",function(d){return scaleX(d.x)-20;})
  		// .attr("y",function(d){return scaleY(d.y)-7;})
  			.text(function(d){return "("+d.x+" , "+d.y+")";});

</script>

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