d3 circle practice

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

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)
    									.ticks(5)
    
   /* 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", 2 );

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)" );

d3.select("p")
      .on("click", function() {
      const numValues = dataArray.length;
       const maxRange = Math.random()*1000;
       dataArray = [];
      for(i = 0; i < numValues; i++)
      {
  
      	let x = Math.floor(Math.random() * maxRange);
      	let y = Math.floor(Math.random() * maxRange);
        dataArray.push([x,y]);
  
      }
      
			xScale.domain([0, d3.max(dataArray, d => d[0])])
      yScale.domain([0, d3.max(dataArray, d => d[1])]) 
      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);
     }) 
    }) 
        
        
        
        
        
        
 /* 	 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)
    })
  */         
        
	//const dataArray = [ [5, 20], [480,90], [250, 50], [100, 33], [330, 95], [410, 12], 
 //                     [475, 44], [25, 67], [85, 21], [220, 88], [600,150] ];
    
        
 /*   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");
   */ 
      
   
   
  </script>
</body>

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