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;
  }

  text {
    font-family: arial;
    font-size: 12px;
    fill: #aaa;
  }

</style>

<body>
  <h1>Anscombe's Quartet!</h1>

</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 anscombeData = [
    {"x": 10, "y": 8.04},
    {"x": 8, "y": 6.95},
    {"x": 13, "y": 7.58},
    {"x": 9, "y": 8.81},
    {"x": 11, "y": 8.33},
    {"x": 14, "y": 9.96},
    {"x": 6, "y": 7.24},
    {"x": 4, "y": 4.26},
    {"x": 12, "y": 10.84},
    {"x": 7, "y": 4.82},
    {"x": 5, "y": 5.68}
  ];

  var width = 720,
    height = 400;

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

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

  var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);

  var circleGroup = svg.selectAll("g")
      .data(anscombeData)
      .enter()
      .append("g")
      .attr("class", "circle-group")
      .attr("transform", function(d) {
        // translate(320,185.60000000000002)
        return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")";
      }
        );

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

  circleGroup.append("text")
      .text(function(d) { return d.x + "," + d.y; });


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

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

	svg {
	border: 1px solid #f0f;
	}

	circle {
	fill:red;
	}

	text {
	font-family: arial;
	font-size: 12px;
	fill: #aaa;
	}

	</style>

	<body>
	<h1>Anscombe's Quartet!</h1>

	</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 anscombeData = [
	{"x": 10, "y": 8.04},
	{"x": 8, "y": 6.95},
	{"x": 13, "y": 7.58},
	{"x": 9, "y": 8.81},
	{"x": 11, "y": 8.33},
	{"x": 14, "y": 9.96},
	{"x": 6, "y": 7.24},
	{"x": 4, "y": 4.26},
	{"x": 12, "y": 10.84},
	{"x": 7, "y": 4.82},
	{"x": 5, "y": 5.68}
	];

	var width = 720,
	height = 400;

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

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

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var circleGroup = svg.selectAll("g")
	.data(anscombeData)
	.enter()
	.append("g")
	.attr("class", "circle-group")
	.attr("transform", function(d) {
	// translate(320,185.60000000000002)
	return "translate(" + xScale(d.x) + "," + yScale(d.y) + ")";
	}
	);

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

	circleGroup.append("text")
	.text(function(d) { return d.x + "," + d.y; });



	</script>