chantalgo/index.html

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

<style type="text/css">

    body {
        font-family: 'arial', sans-serif;
        font-size: 12px;
        width:720px;
        margin: 20px auto;
    }

    svg {
      border:1px solid #f0f;
    }

    circle {
      fill:red;
    }

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

    .axis path {
      display: none;
    }

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

</style>

<body>

</body>

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

<script>

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

var width = 720 - margin.left - margin.right,
   height = 400 - margin.top - margin.bottom;

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

var xScale = d3.scale.linear()
    .range([0, width]);

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("right");

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 + ")");

d3.tsv("quartet.tsv",  ready);

function ready(error, data) {

  if (error) throw error;

	var uniqueGroups = d3.set(data.map(function(d) { return d.group; })).values();

  var buttons = d3.select("body").selectAll(".controller-button")
    .data(uniqueGroups)
    .enter()
    .append("button")
    .attr("class", "controller-button")
    .text(function(d) { return "Group " + d; })
    .on("click", function(d) {
     drawGroup(d);
    });

  // format your data
  data.forEach( function (d) {
      d.x = +d.x;
      d.y = +d.y;
  });


  var initialGroup = data.filter(function(d) { return d.group == "II";});

  xScale.domain(d3.extent(initialGroup, function(d) { return d.x; }));
  yScale.domain(d3.extent(initialGroup, function(d) { return d.y; }));


  //I only want one xAxis and One yAxis

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

  var yAxisGroup = svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + (width) + ",0)")
      .call(yAxis);

  var circleGroupData = svg.selectAll(".circle-group")
      .data(initialGroup);

  var circleGroupEnter = circleGroupData.enter()
    .append("g")
      .attr("class", "circle-group")
      .attr("transform", function(d) {
        return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")";
      });

  var circle = circleGroupEnter.append("circle")
      .attr("r", 5);

  var label = circleGroupEnter.append("text")
      .text(function(d) {
        return d.x + "," + d.y;
      })
      .attr("dx", 5)
      .attr("dy", -5);

  //AND I only want one data set at a time.

  // Make new data join
  // Get rid of old elements
  // Enter new elements
  // append elements as needed
  // update new selection

  function drawGroup(groupId) {
    var thisGroup = data.filter(function(d) { return d.group === groupId; });

    xScale.domain(d3.extent(thisGroup, function(d) { return d.x; }));
    yScale.domain(d3.extent(thisGroup, function(d) { return d.y; }));

    // UPDATE my X axis
    xAxisGroup
        .call(xAxis);

    // UPDATE my Y axis
    yAxisGroup
        .call(yAxis);

    //REDO MY DATA JOIn
    circleGroupData = svg.selectAll(".circle-group")
        .data(thisGroup);

    // enter NEW elements from data join
    circleGroupEnter = circleGroupData.enter()
        .append("g")
        .attr("class", "circle-group");

    // append new circles to this selection
    circleGroupEnter.append("circle")
        .attr("r", 10);

    // append new text elements to this selection
    circleGroupEnter.append("text");

    // now, update my new selection
    circleGroupData = svg.selectAll(".circle-group")
        .transition()
        .duration(400)
        .attr("transform", function(d) {
          return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")";
        });

    circleGroupData.select("text")
      .text(function(d) {
        return d.x + "," + d.y;
      });

}
  // drawGroup("I");

}

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

	body {
	font-family: 'arial', sans-serif;
	font-size: 12px;
	width:720px;
	margin: 20px auto;
	}

	svg {
	border:1px solid #f0f;
	}

	circle {
	fill:red;
	}

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

	.axis path {
	display: none;
	}

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

	</style>

	<body>

	</body>

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

	<script>

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

	var width = 720 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

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

	var xScale = d3.scale.linear()
	.range([0, width]);

	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("right");

	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 + ")");

	d3.tsv("quartet.tsv", ready);

	function ready(error, data) {

	if (error) throw error;

	var uniqueGroups = d3.set(data.map(function(d) { return d.group; })).values();

	var buttons = d3.select("body").selectAll(".controller-button")
	.data(uniqueGroups)
	.enter()
	.append("button")
	.attr("class", "controller-button")
	.text(function(d) { return "Group " + d; })
	.on("click", function(d) {
	drawGroup(d);
	});

	// format your data
	data.forEach( function (d) {
	d.x = +d.x;
	d.y = +d.y;
	});


	var initialGroup = data.filter(function(d) { return d.group == "II";});

	xScale.domain(d3.extent(initialGroup, function(d) { return d.x; }));
	yScale.domain(d3.extent(initialGroup, function(d) { return d.y; }));


	//I only want one xAxis and One yAxis

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

	var yAxisGroup = svg.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + (width) + ",0)")
	.call(yAxis);

	var circleGroupData = svg.selectAll(".circle-group")
	.data(initialGroup);

	var circleGroupEnter = circleGroupData.enter()
	.append("g")
	.attr("class", "circle-group")
	.attr("transform", function(d) {
	return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")";
	});

	var circle = circleGroupEnter.append("circle")
	.attr("r", 5);

	var label = circleGroupEnter.append("text")
	.text(function(d) {
	return d.x + "," + d.y;
	})
	.attr("dx", 5)
	.attr("dy", -5);

	//AND I only want one data set at a time.

	// Make new data join
	// Get rid of old elements
	// Enter new elements
	// append elements as needed
	// update new selection

	function drawGroup(groupId) {
	var thisGroup = data.filter(function(d) { return d.group === groupId; });

	xScale.domain(d3.extent(thisGroup, function(d) { return d.x; }));
	yScale.domain(d3.extent(thisGroup, function(d) { return d.y; }));

	// UPDATE my X axis
	xAxisGroup
	.call(xAxis);

	// UPDATE my Y axis
	yAxisGroup
	.call(yAxis);

	//REDO MY DATA JOIn
	circleGroupData = svg.selectAll(".circle-group")
	.data(thisGroup);

	// enter NEW elements from data join
	circleGroupEnter = circleGroupData.enter()
	.append("g")
	.attr("class", "circle-group");

	// append new circles to this selection
	circleGroupEnter.append("circle")
	.attr("r", 10);

	// append new text elements to this selection
	circleGroupEnter.append("text");

	// now, update my new selection
	circleGroupData = svg.selectAll(".circle-group")
	.transition()
	.duration(400)
	.attr("transform", function(d) {
	return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")";
	});

	circleGroupData.select("text")
	.text(function(d) {
	return d.x + "," + d.y;
	});

	}
	// drawGroup("I");

	}

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