d3 circles

<!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; }
    .axis path,
    .axis line {
      stroke: teal;
      shape-rendering: crispEdges;
    }
    .axis text{
      font-family: Optima, Futura, sans-serif;
      font-weight: bold;
      font-size: 14px;
      fill:teal;
    }
  </style>
</head>

<p> Click here for now data points <p>
<body>
  <script>
    
	//const dataArray = [ [5, 20], [480,90], [250, 50], [100, 33], [330, 95], [410, 12], 
 //                     [475, 44], [25, 67], [85, 21], [220, 88], [600,150] ];
    
  	let dataArray = [];
    const numDataPoints = 50;
    var xRange = Math.random() * 1000;
    var yRange = Math.random() * 1000;
    
    for(i = 0; i < numDataPoints; i++){
      let x = Math.floor(Math.random() * xRange);
      let y = Math.floor(Math.random() * yRange);
      dataArray.push([x,y]);
    }
    
  	const w = 500, h = 300, padding = 30;
    
    const canvas = d3.select("body")
                      .append("svg")
                      .attr("width", w)
                      .attr("height",h);
    
    const xScale = d3.scaleLinear() 
    								 .domain([0, d3.max(dataArray, d => d[0])])
    								 .range([0 + padding , w - padding * 2]);
    const yScale = d3.scaleLinear()
                     .domain([0, d3.max(dataArray, d => d[1])])
                     .range([h - padding, padding]);
    const rScale = d3.scaleSqrt()
                      .domain([0, d3.max(dataArray, d => d[1])])
                      .range([0,10]);
    const xAxis = d3.axisBottom(xScale)
    									.ticks(5)
    const yAxis = d3.axisLeft(yScale)
    								
    
   /* canvas.selectAll("circle")
    			.data(dataArray)
    			.enter()
            .append("circle")
            .attr("cx", d => xScale(d[0]))
            .attr("cy", d => yScale(d[1]))
            .attr("r", d=> rScale(d[1]) );
    */
     canvas.append("clipPath")
    			.attr("id","chart-area")
    			.append("rect")
    			.attr("x",padding)
					.attr("y",padding)
    			.attr("width",w-padding*3)
    			.attr("height", h-padding*2);
    
    canvas.append("g")
    			.attr("id",("circles"))
    			.attr("clip-path","url(#chart-area)")
    			.selectAll("circle")
   			 .data(dataArray)
    			.enter()
            .append("circle")
            .attr("cx", d => xScale(d[0]))
            .attr("cy", d => yScale(d[1]))
            .attr("r", d=> rScale(d[1]) );
    
    
   /* canvas.selectAll("text")
      .data(dataArray)
      .enter()
      .append("text")
      .text((d) => {return d[0]  + "," + d[1]})
      .attr("x",d=> xScale(d[0]))
      .attr("y",d=> yScale(d[1]))
    	.attr("font-family", "sans-serif")
    	.attr("font-size", "11px")
    	.attr("fill", "red");
    */
    canvas.append("g")
      .attr("class","x axis")
      .call(xAxis)
    	.attr("transform", "translate(0,"+ (h-padding)+")");
    
    canvas.append("g")
      .attr("class","y axis")
      .call(yAxis)
      .attr("transform","translate(" + padding + ",0)" );
    	
  	newPoints = canvas.selectAll("circle")
    	.data(dataArray)
      .transition()
      .duration(1000)
      .on("start", function ()	{d3.select(this)
      .attr("fill","teal")
      .attr("r",3)
        })
    	.attr("cx", d => xScale(d[0]))
    	.attr("cy", d => yScale(d[1]))
    .on("end", function(){
      d3.select(this)
      .attr("fill","black")
      .attr("r",2)
    })
   
    d3.select("p")
      .on("click", function() {
    	for(i = 0; i < numDataPoints; i++)
      {
      let x = Math.floor(Math.random() * xRange);
      let y = Math.floor(Math.random() * yRange);
      dataArray.unshift([x,y]);
      dataArray.pop();}
      canvas.selectAll("circle")
     	.data(dataArray)
    	.transition()
      .duration(250)
            .attr("cx", d => xScale(d[0]))
            .attr("cy", d => yScale(d[1]))
            .attr("r", d=> rScale(d[1]) )
      			.attr("fill","magenta")
      canvas.select(".x.axis")
      			.transition()
      			.duration(1000)
      			.call(xAxis)
      canvas.select(".y.axis")
      			.transition()
      			.duration(1000)
      			.call(yAxis)
     .on("end", function() {
      d3.selectAll("circle")
      .transition()
      .duration(1000)
      .attr("fill","black")
      .attr("r",2);
      
    }) 
    })   
   
   
  </script>
</body>

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