macdiva · June 24, 2015 01:38
diff --git a/index.html b/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: 10px;
    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": 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},
    {"x": 4, "y": 3.1},
    {"x": 11, "y": 9.26}
  ];

  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([1, 10]);

  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) {
        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: 10px;
	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": 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},
	{"x": 4, "y": 3.1},
	{"x": 11, "y": 9.26}
	];

	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([1, 10]);

	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) {
	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>