Test

<!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 margin = {top: 20, bottom: 20, left: 20, right: 20};
    
    var h = 500;
    var w = 500;
    
    var dataset = [
      [5,20],
      [3,37],
      [2,41],
      [1,48],
      [18,2],
      [12,20],
      [23,40],
      [9,32],
      [23, 5],
      [12, 12],
      [14, 5],
      [17,18],
      [21, 3],
      [15, 16],
      [13, 19],
      [4,26],
      [16, 2]
    ];
    
    var svg = d3.select("body")
    						.append("svg")
    						.attr("height", h)
    						.attr("width", w);
    
    
    var xScale = d3.scaleLinear()
    								.domain([0, d3.max(dataset,function(d){return d[0];})])
    								.range([margin.left,w - margin.right]);
                             
    var yScale = d3.scaleLinear()
    								.domain([0, d3.max(dataset, function(d){return d[1];})])
    								.range([h - margin.bottom, margin.top]);
    
    var colorScale = d3.scaleLinear()
    								.domain([0, dataset.length])
    								.range([0, 255]);
    
    var colorScaleRev = d3.scaleLinear()
    								.domain([0, dataset.length])
    								.range([255, 0]);
    
    var circles = svg.selectAll("circle")
    								.data(dataset)
    								.enter()
    								.append("circle");
    
    circles.attr("cx", function(d){
      return xScale(d[0]);
    })
    			.attr("cy", function(d){
      return yScale(d[1]);
    })
    			.attr("r", function(d,i){
      return i*2;
    })
    			.attr("fill", function(d,i){
      return d3.rgb(colorScaleRev(i),colorScale(i),colorScale(i));
    });

</script>
</body>

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