simongle/index.html

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

<style type="text/css">
  /*css to go here*/

	svg {
		border: 2px solid #000;
	}

	.axis path,
	.axis line {
		fill: none;
		stroke: black;
		shape-rendering: crispEdges;
	}

	.axis text {
	    font-family: sans-serif;
	    font-size: 11px;
	}


</style>

<body>

</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

<script>
  //JS to go here

	var groupNum = function() {
		return "II";
	};

	var margin = {top: 20, right: 10, bottom: 50, 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([3, 15])
		.range([0, width]);

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

	var xAxis = d3.svg.axis()
		.scale(xScale)
		.orient("bottom")
		.tickSize(4, 8)
		.tickPadding(6);

	d3.tsv("quartet.tsv", function(error, groups) {

		if (error) throw error;

		data = groups.filter(function(d) {return d.group == groupNum()});

		var dots = d3.select("body").select("svg")
			.selectAll("circle")
			.data(data)
			.enter().append("circle")
			.attr("r", 10)
			.attr("cx", function(d) {return xScale(d.x); })
			.attr("cy", function(d) {return yScale(d.y); });

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

	});

</script>

## 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>
	<meta charset="utf-8">

	<style type="text/css">
	/css to go here/

	svg {
	border: 2px solid #000;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}


	</style>

	<body>

	</body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>

	<script>
	//JS to go here

	var groupNum = function() {
	return "II";
	};

	var margin = {top: 20, right: 10, bottom: 50, 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([3, 15])
	.range([0, width]);

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

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.tickSize(4, 8)
	.tickPadding(6);

	d3.tsv("quartet.tsv", function(error, groups) {

	if (error) throw error;

	data = groups.filter(function(d) {return d.group == groupNum()});

	var dots = d3.select("body").select("svg")
	.selectAll("circle")
	.data(data)
	.enter().append("circle")
	.attr("r", 10)
	.attr("cx", function(d) {return xScale(d.x); })
	.attr("cy", function(d) {return yScale(d.y); });

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

	});

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