Test

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

/*svg {
      outline: 1px solid #f0f;
  }*/

.axis line {
    stroke: white;
    stroke-dasharray: 2px 2px;
  }

.bg-screen {
    fill:#d0d0d0;
  }

path.domain {
  display: none;
  };

</style>

<body>

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

</body>

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

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

console.log("data", data);

//filter will iterate every element in the array

var subset2 = data.filter(function(d) {
    return d.group == "II"; //return everything match II;
  })

drawData(subset2);
}

// var anscomeData  = [
//     {"x": 14, "y": 8.1},
//     {"x": 13, "y": 8.74},
//     {"x": 12, "y": 9.13},
//     {"x": 11, "y": 9.26},
//     {"x": 10, "y": 9.14},
//     {"x": 9, "y": 8.77},
//     {"x": 8, "y": 8.14},
//     {"x": 7, "y": 7.26},
//     {"x": 6, "y": 6.13},
//     {"x": 5, "y": 4.74},
//     {"x": 4, "y": 3.1}
// ];

function drawData(data) {
// very important
var margin = {top: 5, right: 5, bottom: 20, left: 30};

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

// no index on svg

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

// selectAll: I am going to create them
    // svg.selectAll(".dot-label")
    //   .data(anscomeData)
    //   .enter()
    //   .append("text")
    //   .attr("class", "dot-label")
    //
    //   .attr("x", function(d) {
    //     return xscale(d.x);
    //   })
    //   .attr("y", function(d) {
    //     return yscale(d.y);
    //   })
    //   .text(function(d) {
    //     return d.x;
    //   });

svg.append("rect")
        .attr("x",0)
        .attr("y",0)
        .attr("width", w)
        .attr("height", h)
        .attr("class", "bg-screen")
        .attr("color", "red");

var xscale = d3.scaleLinear()
    .domain([0,20])
    .range([0,w]);

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

var xaxis = d3.axisBottom()
    .scale(xscale)
    .tickSize(-h);

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

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

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

// be semantic!
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", 8)
      .attr("dy", -8);
    }

//if I want each value to be differet, iterate a function
    // if I want them to be constant, use constant

//javascript substitution

// .attr("r", 5)
    // .attr("cx", function(d) {
    //   return xscale(d.x);
    // })
    // .attr("cy", function(d) {
    //   return yscale(d.x);
    // })

// svg.selectAll("circle")
//     .data(anscomeData)
//     .enter()
//     .append("circle")
//     .attr("r", 5)
//     .attr("cx", function(d) {
//         return xscale(d.x);
//     })
//     .attr("cy", function(d) {
//         return yscale(d.y);
//     });

//JS to go here
</script>

https://d3js.org/d3.v4.min.js