kpq · May 8, 2017 22:40
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <style type="text/css">

 	body {
 		font: 10px arial sans;
 	}

 	h1 {
 		font-family: arial;
 	}

  .axis line  {
  	stroke: #fff;
  }

  path.domain {
  	display: none;
  }

  .bg-screen {
  	fill: #f0f0f0;
  }

 </style>

 <body>
 	<h1>Anscombe's Quartet II</h1>
 </body>

 <script src="https://d3js.org/d3.v4.min.js"></script>

 <script>

 // margin conventions gives us "bumpers"
 // http://bl.ocks.org/binaworks/9dce0a385915e8953a45cc6be7fbde42
 var margin = {top: 5, right: 8, bottom: 20, left: 30};

 var w = 500 - margin.left - margin.right,
    h = 400 - margin.top - margin.bottom;

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

 // d3.tsv loads external files asynchronously.
 // everything that needs to know about data must be in the ready function.
 d3.tsv("quartet.tsv", ready);

 function ready(err, data) {
 	if (err) throw "error loading data";

 	// filter out just the group you want.
 	var groupII = data.filter(function(d) {
 		return d.group == "II";
 	});

 	// x and y scales give you a function to change from data into pixels. you'll almost always need scales.
 	var xscale = d3.scaleLinear()
 		.domain([0,20])
 		.range([0,w]);

 	var yscale = d3.scaleLinear()
 		.domain([0,10])
 		.range([h,0]);

 	// xaxis and yaxis functions.
 	// these don't "do" anything; they just are functions that create axes whenever you call them.
 	var xaxis = d3.axisBottom()
 		.scale(xscale)
 		.tickSize(h);

 	var yaxis = d3.axisLeft()
 		.scale(yscale)
 		.tickSize(-w);

 	// the background "screen"
 	svg.append("rect")
 		.attr('class', 'bg-screen')
 		.attr("width", w)
 		.attr("height", h);

 	// "calling" axes on a selection renders out all the axis ticks and labels
 	svg.append("g")
 		.attr("class", "axis")
 		.call(xaxis);

 	svg.append("g")
 		.attr("class", "axis")
 		.call(yaxis);

 	// this is the data join.
 	// more here: https://bost.ocks.org/mike/join/
 	// even more: https://bl.ocks.org/mbostock/3808218

 	// we make gs first and translate them once.
 	var agroup = svg.selectAll("g.a-group")
 		.data(groupII)
 		.enter()
 		.append("g")
 		.attr("class", "a-group")
 		.attr("transform", function(d) {
 			return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")";
 		});

 	// then we add child nodes to the g; note we dont need to reposition them.
 	agroup.append("circle")
 		.attr('r', 4)
 		.style("fill", "#000");

 	agroup.append("text")
 		.text(function(d) {
 			return d.x + "," + d.y;
 		})
 		.attr("dx", 8)
 		.attr("dy", -8);

 }

 </script>


diff --git a/quartet.tsv b/quartet.tsv
	<!DOCTYPE html>
	<meta charset="utf-8">

	<style type="text/css">

	body {
	font: 10px arial sans;
	}

	h1 {
	font-family: arial;
	}

	.axis line {
	stroke: #fff;
	}

	path.domain {
	display: none;
	}

	.bg-screen {
	fill: #f0f0f0;
	}

	</style>

	<body>
	<h1>Anscombe's Quartet II</h1>
	</body>

	<script src="https://d3js.org/d3.v4.min.js"></script>

	<script>

	// margin conventions gives us "bumpers"
	// http://bl.ocks.org/binaworks/9dce0a385915e8953a45cc6be7fbde42
	var margin = {top: 5, right: 8, bottom: 20, left: 30};

	var w = 500 - margin.left - margin.right,
	h = 400 - margin.top - margin.bottom;

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

	// d3.tsv loads external files asynchronously.
	// everything that needs to know about data must be in the ready function.
	d3.tsv("quartet.tsv", ready);

	function ready(err, data) {
	if (err) throw "error loading data";

	// filter out just the group you want.
	var groupII = data.filter(function(d) {
	return d.group == "II";
	});

	// x and y scales give you a function to change from data into pixels. you'll almost always need scales.
	var xscale = d3.scaleLinear()
	.domain([0,20])
	.range([0,w]);

	var yscale = d3.scaleLinear()
	.domain([0,10])
	.range([h,0]);

	// xaxis and yaxis functions.
	// these don't "do" anything; they just are functions that create axes whenever you call them.
	var xaxis = d3.axisBottom()
	.scale(xscale)
	.tickSize(h);

	var yaxis = d3.axisLeft()
	.scale(yscale)
	.tickSize(-w);

	// the background "screen"
	svg.append("rect")
	.attr('class', 'bg-screen')
	.attr("width", w)
	.attr("height", h);

	// "calling" axes on a selection renders out all the axis ticks and labels
	svg.append("g")
	.attr("class", "axis")
	.call(xaxis);

	svg.append("g")
	.attr("class", "axis")
	.call(yaxis);

	// this is the data join.
	// more here: https://bost.ocks.org/mike/join/
	// even more: https://bl.ocks.org/mbostock/3808218

	// we make gs first and translate them once.
	var agroup = svg.selectAll("g.a-group")
	.data(groupII)
	.enter()
	.append("g")
	.attr("class", "a-group")
	.attr("transform", function(d) {
	return "translate(" + xscale(d.x) + "," + yscale(d.y) + ")";
	});

	// then we add child nodes to the g; note we dont need to reposition them.
	agroup.append("circle")
	.attr('r', 4)
	.style("fill", "#000");

	agroup.append("text")
	.text(function(d) {
	return d.x + "," + d.y;
	})
	.attr("dx", 8)
	.attr("dy", -8);

	}

	</script>
group	x	y
I	10	8.04
I	8	6.95
I	13	7.58
I	9	8.81
I	11	8.33
I	14	9.96
I	6	7.24
I	4	4.26
I	12	10.84
I	7	4.82
I	5	5.68
II	10	9.14
II	8	8.14
II	13	8.74
II	9	8.77
II	11	9.26
II	14	8.1
II	6	6.13
II	4	3.1
II	12	9.13
II	7	7.26
II	5	4.74
III	10	7.46
III	8	6.77
III	13	12.74
III	9	7.11
III	11	7.81
III	14	8.84
III	6	6.08
III	4	5.39
III	12	8.15
III	7	6.42
III	5	5.73
IV	8	6.58
IV	8	5.76
IV	8	7.71
IV	8	8.84
IV	8	8.47
IV	8	7.04
IV	8	5.25
IV	19	12.5
IV	8	5.56
IV	8	7.91
IV	8	6.89