scale sqrt vs scale linear

Square Root vs. Linear Scale

On the left are circles sized using d3.scaleSqrt and the right are circles sized using d3.scaleLinear.

The same data (the numbers 20, 50, 150, 300) is used for each group of circles, but using a square root scale allows for mapping each data value to a circle's area, which is more perceptively correct for visualization purposes.

Built with blockbuilder.org

<!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>
    
    // adjust these values
    var data = [20, 50, 150, 300];
    
    var domain = [0, data[data.length - 1]];
    var range = [0, 25];
    
    var margin = {
      top: 120,
      left: 120,
      right: 60,
      bottom: 30
    };

var svg = d3.select("body").append("svg")
      .attr("width", 500)
      .attr("height", 500);
    
    var height = svg.attr("height") - margin.top - margin.bottom;
    var width = svg.attr("width") - margin.left - margin.right;
    
    var sqrt = d3.scaleSqrt()
    	.range(range)
    	.domain(domain);
    
    var linear = d3.scaleLinear()
    	.range(range)
    	.domain(domain);
    
    var g = svg.append("g")
    	.attr("transform", `translate(${margin.left}, ${margin.top})`);
    
    g.selectAll(".sqrt")
    	.data(data)
    	.enter()
    	.append("circle")
    	.classed("sqrt", true)
    	.attr("cx", d => 0)
    	.attr("cy", d => -sqrt(d))
    	.attr("r", d => sqrt(d))
    	.attr("fill", "none")
    	.attr("stroke", "#000")
    	.attr("stroke-width", 0.7);
    
    g.selectAll(".linear")
    	.data(data)
    	.enter()
    	.append("circle")
    	.classed("linear", true)
    	.attr("cx", d => 120)
    	.attr("cy", d => -linear(d))
    	.attr("r", d => linear(d))
    	.attr("fill", "none")
    	.attr("stroke", "#000")
    	.attr("stroke-width", 0.7);

</script>
</body>

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