This sketch takes in all the population density and total pop data and displays an infographic based on that.

Each country is represented by a circle, with randomly distributed spots in it for population density, and an adjacent circle whose size denotes total population.

The density effect is created by generating spots randomly over an area, but the number of spots created is controlled by the population density associated with that circle/country.

​

Note : When playing with it, delete most countries and keep only 3-5, and keep canvas large enough before adding all data

*/

/*

TO DO - 

- Grid positions are still off - calculate manually and compare

- Better colours !

- Pop circle on different pGraphics layer to make things simpler

*/

​

​

let radDen; //dia of population density circle

let denScl; //scale factor for pop density to no. of dots

let popScl; //scale factor for total popln to popln circle dia

let popData = []; //array to contain all country data

let xFac, yFac, spX, spY; //variables to manage the grid and spacing

​

function setup() {

  createCanvas(600, 800);

  background(240);

​

  radDen = 100;

  denScl = 0.1;

  popScl = 0.0000003;

​

  spX = 10; //spacing in X and Y directions

  spY = 20;

​

  xFac = width / (radDen + spX); //no of country circles in X and Y direction

  yFac = height / (radDen + spY);

​

  translate(radDen / 2, radDen / 2 + 5); //shift to prevent circles crossing canvas edge

​

  textSize(12);

  textAlign(CENTER);

​

  // popData[1] = new Country(1, "Monaco", 38300, 18960);

  // popData[2] = new Country(3, "ParleG", 3300, 1960);

  // popData[1].display();

  // popData[2].display();

  popData[0] = new Country(1, " Monaco ", 38300.00, 18960.40);

  popData[1] = new Country(2, " Singapore ", 5703600.00, 7894.26);

  popData[2] = new Country(3, " Bahrain ", 1543300.00, 1982.91);

  popData[3] = new Country(4, " Malta ", 514564.00, 1633.54);

  popData[4] = new Country(5, " Maldives ", 374775.00, 1257.63);

  popData[5] = new Country(6, " Bangladesh ", 169103300.00, 1174.00);

  popData[6] = new Country(7, " Vatican City ", 453.00, 924.49);

  popData[7] = new Country(8, " Lebanon ", 6855713.00, 672.06);

  popData[8] = new Country(9, " Barbados ", 287025.00, 667.50);

  popData[9] = new Country(10, " Mauritius ", 1265577.00, 620.38);

  popData[10] = new Country(11, " San Marino ", 34641.00, 567.89);

  popData[11] = new Country(12, " Nauru ", 11200.00, 533.33);

  popData[12] = new Country(13, " South Korea ", 51780579.00, 516.72);

  popData[13] = new Country(14, " Rwanda ", 12374397.00, 469.83);

  popData[14] = new Country(15, " Comoros ", 873724.00, 469.49);

  popData[15] = new Country(16, " Netherlands ", 17496531.00, 421.00);

  popData[16] = new Country(17, " Israel ", 9234735.00, 418.00);

  popData[17] = new Country(18, " Haiti ", 11263077.00, 416.15);

  popData[18] = new Country(19, " India ", 1352642280.00, 411.48);

  popData[19] = new Country(20, " Burundi ", 11215578.00, 403.21);

  popData[20] = new Country(21, " Tuvalu ", 10300.00, 396.15);

  popData[21] = new Country(22, " Belgium ", 11524454.00, 375.52);

  popData[22] = new Country(23, " Philippines ", 109008759.00, 363.00);

  popData[23] = new Country(24, " Japan ", 126010000.00, 333.38);

  popData[24] = new Country(25, " Sri Lanka ", 21803000.00, 332.31);

  popData[25] = new Country(26, " El Salvador ", 6704864.00, 318.67);

  popData[26] = new Country(27, " Grenada ", 108825.00, 316.35);

  popData[27] = new Country(28, " Marshall Islands ", 55900.00, 308.84);

  popData[28] = new Country(29, " Saint Lucia ", 180454.00, 292.47);

  popData[29] = new Country(30, " Vietnam ", 96208984.00, 290.48);

​

  //calling the display function for every country object

  //done from the end to beginning of array for better visual

  //so countries at the beginning do not get overlapped by later ones, but vice-versa

​

  for (let i = popData.length - 1; i >= 0; i--) {

    popData[i].display();

  }

​

​

}

//since it's a one time generation, draw function is not needed

// function draw() {

//   background(220);

// }

​

class Country {

  constructor(rank, name, pop, den) {

    this.rank = rank;

    this.name = name;

    this.pop = pop;

    this.den = den;

​

    //     this.x_ = (rank * (radDen + 20)) % width;

    //     this.y_ = int((rank * (radDen + 40) / width));

​

    //     this.xPos = this.x_;

    //     this.yPos = this.y_ * radDen;

​

    this.x_ = floor((rank - 1) % xFac);

    this.y_ = floor((rank - 1) / yFac);

​

    this.xPos = this.x_ * (radDen + spX);

    this.yPos = this.y_ * (radDen + spY);

​

​

    this.denMod = this.den * denScl;          //scaled numbers for density and population

    this.popMod = this.pop * popScl;

    if (this.popMod < 5) {

      this.popMod = 5;

    }

​

    print(this.rank, this.x_, this.xPos, this.y_, this.yPos, this.name);

  }

​

  display() {

    push();

    translate(this.xPos, this.yPos); //move to position where pop-den circ to be created

​

    fill(255, 0, 0, 200);

    noStroke();

    circle(radDen / 2, radDen / 4, this.popMod);  //population circle

​

​

    fill(128);

    stroke(50);

    circle(0, 0, radDen);                        //density circle fill

​

    fill(240);

    noStroke();

    for (let i = 0; i < this.denMod; i++) {      //density circle spot generation

      //       let kr = random(radDen / 2);

      //       let kt = random(0, 2 * PI);

​

      //       let kx = kr * cos(kt);

      //       let ky = kr * sin(kt);

​

​

      let kx = random(-radDen / 2, radDen / 2);

      let ky = random(-radDen / 2, radDen / 2);

      circle(kx, ky, 3);

    }

    fill(128);

    textSize(12);

    text(this.name, 0, radDen / 2 + 15);        //country name label

​

    noFill();

    stroke(50);

    circle(0, 0, radDen);                      //density circle outer stroke

​

    pop();

​

  }

​

​

}