How to Create a Dot Map Using JS

Question

How do I create a high-density dot map? I've tinkered with some basic algorithms for spreading dots around a rectangle, like this:

 var createOrangeDots = function () {  
  for (var i = 0; i <=orangeNum; i++) {
    context.beginPath();
    var rand_x = Math.random(i) * horz_max;
    var rand_y = Math.random(i) * vertical_max;
    context.arc(rand_x, rand_y, radius, 1, 2*Math.PI);
    context.fillStyle ="orange";
    context.fill();
    context.closePath();
    }
  }

... which creates ... I've also had help in finding code that makes dots around a "target":

var createOrangeDotsCircle = function () {
  for (var i = 0; i <= orangeCircleNum; i++) {
    context.beginPath();
    const dist = (Math.random() ** centripetal) * distFromCenter;
    const angle = Math.random() * Math.PI * 2;
    var rand_x = dist * Math.cos(angle) + centerOrange.x;
    var rand_y = dist * Math.sin(angle) + centerOrange.y;
    context.arc(rand_x, rand_y, radius, 1, 2 * Math.PI);
    context.fillStyle ="orange";
    context.fill();
    context.closePath();
  }  
}
createOrangeDotsCircle();

... which produces ...

But I'm wondering if there is any JS code that creates random shapes of dots with varying densities to the point that it might actually resemble a real segregation map of a city? Something like this:

... but using just two colors and with no map background (i.e. just dots).

I know this is complex, so just looking for ideas / tips / points-in-direction here from more experienced coders. Thanks in advance for any help.