Annulus Sampling I

This animation demonstrates the perils of naïve annulus sampling. If the radius and angle are chosen with random uniformity, the sample density will be higher where the radius is smaller, and thus points will be concentrated around the inner edge of the annulus. See corrected sampling.

<!DOCTYPE html>
<meta charset="utf-8">
<canvas width="960" height="500"></canvas>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var canvas = d3.select("canvas"),
    canvasNode = canvas.node(),
    context = canvasNode.getContext("2d");

var numSamplesPerFrame = 50,
    numSamples = 0;

var width = canvasNode.width,
    height = canvasNode.height,
    outerRadius = (Math.min(width, height) - 5) / 2,
    innerRadius = outerRadius / 4;

context.translate(width / 2, height / 2);

context.save();
context.beginPath();
context.arc(0, 0, outerRadius, 0, 2 * Math.PI);
context.moveTo(innerRadius, 0);
context.arc(0, 0, innerRadius, 2 * Math.PI, 0);
context.fillStyle = "rgba(0,0,0,.2)";
context.fill("evenodd");
context.restore();

context.fillStyle = "rgba(0,0,0,.5)";
d3.timer(function() {
  for (var i = 0; i < numSamplesPerFrame; ++i) {
    var r = innerRadius + Math.random() * (outerRadius - innerRadius),
        a = Math.random() * 2 * Math.PI,
        x = r * Math.cos(a),
        y = r * Math.sin(a);
    context.beginPath();
    context.arc(x, y, 1, 0, 2 * Math.PI);
    context.fill();
  }
  return ++numSamples > 1000;
});

</script>

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