D3 Examples - Anscombe's Quartet Scatter Plot

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <script>
     var m = {
       'left': 30,
       'right': 20,
       'top': 20,
       'bottom': 20
     }
     var width = 450 - m.left - m.right;
     var height = 450 - m.top - m.bottom;
     var x = d3.scaleLinear()
                        .range([0, width])
                        .domain([0,17]);
     var y = d3.scaleLinear()
                            .range([height, 0])
                        .domain([0, 15]);
     var xAxis = d3.axisBottom()
        .scale(x)
        .tickSize(-height)
        .tickPadding(8);
​
     var yAxis = d3.axisLeft()
        .scale(y)
        .tickSize(-width)
        .tickPadding(8);
     
    d3.csv('D3_pair_data.csv', function(error, dataset){
      
      dataset.forEach(function(d) {
        d.x = +d.x;
        d.y = +d.y;
      });
      
​
      
      var chart = d3.select('body')
                                .append('svg')
                                .attr('width', width+m.left+m.right)
                                .attr('height', height+m.top+m.bottom)
                                .append('g')
                                    .attr("transform", 
                                        "translate(" 
                            + m.left + "," 
                            + m.top + ")" );
        chart.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + (height) + ")")
        .call(xAxis);
​
        chart.append("g")
        .attr("class", "y axis")
        .call(yAxis);
​
      var circles = chart.selectAll('circle')
                            .data(dataset);
      
            circles.enter()
        .append('circle')
        .attr('cy', function(d) {return y(d.y);})
        .attr('cx', function(d) {return x(d.x);})
        .attr('r', 5);
      
    });
 
  </script>
</body>
​
    