timproDev/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="style.css" >
		<style type="text/css">
			svg {
				outline: 1px solid #f0f;
			}

			.axis line {
				stroke: #ffffff;
				stroke-dasharray: 5;
			}

			path.domain {
				display: none;
			}

			.bg {
				fill: #ececec;
			}
		</style>
	</head>
	<body>
		<h1>Anscombe's Quartet II</h1>
  	</body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script type="text/javascript">

  	// declare a margin object for scalable reference
	var margin = {
		top:20,
		left:20,
		right:20,
		bottom:20
	};

	// base the dimensions of viz off margin
	var w = 500 - margin.left - margin.right,
		h = 400 - margin.top - margin.bottom;

	// append main svg element
	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 +")");

	// load data through 'ready' function
	d3.tsv("quartet.tsv", ready);

	// pull all data related code into this function
	function ready(error, data) {
		if (error) throw "error: not loading data";

		// data manipulation
		data = data.filter(function(d){
			return d.group == "I";
		});

		// x scale generator / function
		var xscale = d3.scaleLinear()
						.domain([0,20])
						.range([0,w]);

		// y scale generator / function
		var yscale = d3.scaleLinear()
						.domain([0,10])
						.range([h,0]);

		// x axis commands / function
		var xaxis = d3.axisBottom()
						.scale(xscale)
						.tickSize(-h);

		// y axis commands / function
		var yaxis = d3.axisLeft()
						.scale(yscale)
						.tickSize(-w);

		// background color
		svg.append("rect")
			.attr("class","bg")
			.attr("width",w)
			.attr("height",h);

		// append x axis
		svg.append("g")
			.attr("class","axis")
			.call(xaxis)
			.attr("transform","translate(0," + h + ")");

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

		// create a group variable
		var agroup = svg.selectAll("g.a-group")
			.data(data)
			.enter()
			.append("g")
			.attr("class","a-group")
			.attr("transform", function(d){ return "translate(" + xscale(d.x) +","+ yscale(d.y) +")" ; });

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

		agroup.append("text")
				.text(function(d){ return d.x + "," + d.y; })
				.attr("dx", 10)
				.attr("dy", 10);
	} // end ready func

  </script>
</html>

## quartet.tsv

          
            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
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="style.css" >
	<style type="text/css">
	svg {
	outline: 1px solid #f0f;
	}

	.axis line {
	stroke: #ffffff;
	stroke-dasharray: 5;
	}

	path.domain {
	display: none;
	}

	.bg {
	fill: #ececec;
	}
	</style>
	</head>
	<body>
	<h1>Anscombe's Quartet II</h1>
	</body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script type="text/javascript">

	// declare a margin object for scalable reference
	var margin = {
	top:20,
	left:20,
	right:20,
	bottom:20
	};

	// base the dimensions of viz off margin
	var w = 500 - margin.left - margin.right,
	h = 400 - margin.top - margin.bottom;

	// append main svg element
	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 +")");

	// load data through 'ready' function
	d3.tsv("quartet.tsv", ready);

	// pull all data related code into this function
	function ready(error, data) {
	if (error) throw "error: not loading data";

	// data manipulation
	data = data.filter(function(d){
	return d.group == "I";
	});

	// x scale generator / function
	var xscale = d3.scaleLinear()
	.domain([0,20])
	.range([0,w]);

	// y scale generator / function
	var yscale = d3.scaleLinear()
	.domain([0,10])
	.range([h,0]);

	// x axis commands / function
	var xaxis = d3.axisBottom()
	.scale(xscale)
	.tickSize(-h);

	// y axis commands / function
	var yaxis = d3.axisLeft()
	.scale(yscale)
	.tickSize(-w);

	// background color
	svg.append("rect")
	.attr("class","bg")
	.attr("width",w)
	.attr("height",h);

	// append x axis
	svg.append("g")
	.attr("class","axis")
	.call(xaxis)
	.attr("transform","translate(0," + h + ")");

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

	// create a group variable
	var agroup = svg.selectAll("g.a-group")
	.data(data)
	.enter()
	.append("g")
	.attr("class","a-group")
	.attr("transform", function(d){ return "translate(" + xscale(d.x) +","+ yscale(d.y) +")" ; });

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

	agroup.append("text")
	.text(function(d){ return d.x + "," + d.y; })
	.attr("dx", 10)
	.attr("dy", 10);
	} // end ready func

	</script>
	</html>
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