D3 Examples - anscombe

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 width = 700;
    var height = 700;
    
    var xScale = d3.scaleLinear()
                        .range([0, width-50]);
    var yScale = d3.scaleLinear()
                        .range([50, height]);
        
    d3.csv("Anscombe2.csv", function(error, dataset) {
      
      dataset.forEach(function(d) {
        d.x = +d.x; // parseFloat(d.frequency)
        d.y = +d.y;
      });
   
      var max_x = d3.max(dataset, function(d) {
        return d.x;
      })
      var max_y = d3.max(dataset, function(d) {
        return d.y;  
      })
      // Set Domain of the scale
      xScale.domain([0, max_x]);
      yScale.domain([0, max_y]);
      
      var chart = d3.select("body")
                                .append("svg")
                                .attr("width", width)
                                .attr("height", height);
      
      var circles = chart.selectAll("circle")
                    .data(dataset);
      
      circles.enter()
        .append("circle")
        .attr("cx", function(d) { return xScale(d.x)})
        .attr("cy", function(d) { return yScale(max_y - d.y)})
        .attr('fill', 'steelblue')
        .attr('stroke', 'red')
        .attr('stroke-width', 2)
        .attr("r", 5);
      
      
    });
​
  </script>
</body>
    