d3 random circle practice

forked from adammak137's block: d3 circle practice

forked from adammak137's block: d3 random 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>

<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] ];
  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.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","axis")
      .call(xAxis)
    	.attr("transform", "translate(0,"+ (h-padding)+")");
    
    canvas.append("g")
      .attr("class","axis")
      .call(yAxis)
      .attr("transform","translate(" + padding + ",0)" );
    	
    canvas.selectAll("circle")
    	.data(dataArray)
      .transition()
      .duration(1000)
      .on("start", function ()	{d3.select(this)
      .attr("fill","teal")
      .attr("r",3)
        });
    
   
  </script>
</body>

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