aliavni · March 28, 2016 03:11
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">

 <style type="text/css">
  .container {
    width: 80%;
    margin: 50px auto;
    font-family: 'Open Sans', sans-serif;
  }

  .data-labels-x text{
    font-size: small;
  }
 </style>



 <body>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
  <link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
  <script>

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

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

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

    var containerSize = d3.select(".container").node().getBoundingClientRect();

    var width = containerSize.width - margin.left - margin.right,
        height = width / 1.62 - margin.top - margin.bottom;

    var svg = container.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 + ")");

    var data = [
      {"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(data, function(d) { return d.x; });
    var xMax = d3.max(data, function(d) { return d.x; });

    var yMin = d3.min(data, function(d) { return d.y; });
    var yMax = d3.max(data, 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([yMin, yMax]);
        // .domain([3, 9.5]);

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

    var yAxis = d3.svg.axis()
        .scale(yScale)
        .tickSize(2)
        .orient("left");

    var rad = 3;

    var circle = svg.selectAll(".anscombe-circle")
        .data(data)
        .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); });

    var dataLabelsX = svg.append("g")
        .attr("class", "data-labels-x");

    dataLabelsX.selectAll(".dlx")
      .data(data)
      .enter()
      .append("text")
      .attr({
        x: function(d) { return xScale(d.x) + 5; },
        y: function(d) { return yScale(d.y) - 5; }
      })
      .text(function(d) { return d.y; });

  </script>

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

	<style type="text/css">
	.container {
	width: 80%;
	margin: 50px auto;
	font-family: 'Open Sans', sans-serif;
	}

	.data-labels-x text{
	font-size: small;
	}
	</style>



	<body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
	<script>

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

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

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

	var containerSize = d3.select(".container").node().getBoundingClientRect();

	var width = containerSize.width - margin.left - margin.right,
	height = width / 1.62 - margin.top - margin.bottom;

	var svg = container.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 + ")");

	var data = [
	{"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(data, function(d) { return d.x; });
	var xMax = d3.max(data, function(d) { return d.x; });

	var yMin = d3.min(data, function(d) { return d.y; });
	var yMax = d3.max(data, 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([yMin, yMax]);
	// .domain([3, 9.5]);

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

	var yAxis = d3.svg.axis()
	.scale(yScale)
	.tickSize(2)
	.orient("left");

	var rad = 3;

	var circle = svg.selectAll(".anscombe-circle")
	.data(data)
	.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); });

	var dataLabelsX = svg.append("g")
	.attr("class", "data-labels-x");

	dataLabelsX.selectAll(".dlx")
	.data(data)
	.enter()
	.append("text")
	.attr({
	x: function(d) { return xScale(d.x) + 5; },
	y: function(d) { return yScale(d.y) - 5; }
	})
	.text(function(d) { return d.y; });

	</script>

	</body>