D3 Examples - d3 circle practice

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; }
    .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>
​
    