kpq/index.html

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

<style type="text/css">
  /*css to go here*/
  svg {
    border: 1px solid #f0f;
  }

  circle {
    fill: red;
    stroke: steelblue;
    stroke-width: 3;
  }

  .tick line {
    stroke: red;
    stroke-width: 3;
  }

  .domain {
    fill: none;
    stroke: steelblue;

  }

/*  svg {
    overflow: visible;
  }*/

</style>

<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 width = 600,
    height = 300;

  var body = d3.select("body");

  body
      .append("h1")
      .text("Ancombe’s Quartet Group II");

  var container = body.append("div")
      .attr("class", "container");

  var svg = container.append("svg")
      .attr("width", width)
      .attr("height", height);

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

  var xMin = d3.min(quartet, function(d) { return d.x; });
  var xMax = d3.max(quartet, function(d) { return d.x; });

  var yExt = d3.extent(quartet, function(d) { return d.y; });

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

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

      .domain(yExt);

  var xAxis = d3.svg.axis()
      .scale(xScale)
      .tickSize(height)
      .orient("bottom");

  var svg = d3.select("svg");

  var rad = 3;

  //adding circles
  var circle = svg.selectAll(".anscombe-circle")
      .data(quartet)
      .enter()
      .append("circle")
      .attr("class", "anscombe-circle")
      .attr("r", rad )
      .attr("cx", function(d) { return xScale(d.x); })
      .attr("cy", function(d) { return yScale(d.y); });

  svg.append("g")
      .call(xAxis);

</script>

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

	<style type="text/css">
	/css to go here/
	svg {
	border: 1px solid #f0f;
	}

	circle {
	fill: red;
	stroke: steelblue;
	stroke-width: 3;
	}

	.tick line {
	stroke: red;
	stroke-width: 3;
	}

	.domain {
	fill: none;
	stroke: steelblue;

	}

	/* svg {
	overflow: visible;
	}*/

	</style>

	<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 width = 600,
	height = 300;

	var body = d3.select("body");

	body
	.append("h1")
	.text("Ancombe’s Quartet Group II");

	var container = body.append("div")
	.attr("class", "container");

	var svg = container.append("svg")
	.attr("width", width)
	.attr("height", height);

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

	var xMin = d3.min(quartet, function(d) { return d.x; });
	var xMax = d3.max(quartet, function(d) { return d.x; });

	var yExt = d3.extent(quartet, function(d) { return d.y; });

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

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

	.domain(yExt);

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.tickSize(height)
	.orient("bottom");

	var svg = d3.select("svg");

	var rad = 3;

	//adding circles
	var circle = svg.selectAll(".anscombe-circle")
	.data(quartet)
	.enter()
	.append("circle")
	.attr("class", "anscombe-circle")
	.attr("r", rad )
	.attr("cx", function(d) { return xScale(d.x); })
	.attr("cy", function(d) { return yScale(d.y); });

	svg.append("g")
	.call(xAxis);

	</script>

	</body>