如何在我的数据可视化项目中使圈子不重叠？ p5.j​​s

Question

For my University project I am making a visual representation of data, specifically population. So far I have it so the top 50 countries are displayed as circles with the size being relative to the population amount. The position of the circles is completely random and because of this the circles cluster and the data unintelligible. What code do I have to add in order to make the circles not overlap. Thanks in advance and I apologise if I missed some details I am beginner in coding.

the code in its current state.

    let population;
//The preload function is executed before initializing the code in setup
//Loads any related data or media files
function preload() {

  population = loadJSON("worldpopulation.json");
}

function setup() {
  console.log(population); //Return all JSON data
  var canvas = createCanvas(1280, 720);

}

function draw(){
  noLoop();
  console.log(population[2].population / 1000000);
  for (let i=0; i<50; i++){
    let newSize = population[i].population / 3000000;
    let newPosX = random(1280);
    let newPosY = random(720);
    var r = newSize;
    fill(random(255), random(255), random(255));
    ellipse(newPosX, newPosY, newSize, newSize);
    fill(0);
    textAlign(CENTER);
    text(population[i].country, newPosX, newPosY-5);
    text(population[i].population, newPosX, newPosY+5);
  }

Answer 1

The simplest approach might be to keep an array of the rendered circles as you create them. Then only add valid (non-overlapping) ones to to the rendering layer.

A circle overlaps with another if the distance between their centers is less than the sum of their radii. In other words, only add Circle2 (with center (x2, y2) and radius r2) if it satisfies the following condition for all pre-existing circles (with centers (x1, y1) and radius r1).

( (x2-x1)^2 + (y2-y1)^2 ) ^ (1/2) > (r1 + r2)

If it doesn't, discard it and try generating another one.