Old school D3 from simpler times

All examples By author By category About

K-Du

Full window Github gist

anscombe

Built with blockbuilder.org

<!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>

https://d3js.org/d3.v4.min.js