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

Data from Wikipedia, formated in Excel. Please NOTE, ranking and sorting done in Excel, not implemented here !

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 

- Pop circle on different pGraphics layer to make things simpler ?

Done :

Grid positions managed

Aligned pop circles and density circles at base

Tweaked Pop circle transparency

Filtered spillout spots, + maintained numerical accuracy by rolling back the loop

Better colours !

​

*/

​

​

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

​

let spotCol;

let popDenFCol;

let popDenSCol;

let popFCol;

let popSCol;

​

function setup() {

  createCanvas(550, 800);

  background(240);

​

  spotCol = color(65, 69, 53);

  popDenFCol = color(242, 227, 188);

  popDenSCol = color(193, 152, 117);

  popFCol = color(150, 187, 187,100);

  popSCol = color(97, 137, 133,150);

​

​

  radDen = 100;

  denScl = 0.1;

  popScl = 0.0000003;

​

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

  spY = 20;

​

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

  yFac = floor(height / (radDen + spY));

​

  print(xFac, yFac);

​

​

  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

​

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

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

    popData[i].display();

  }

​

​

}

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

//an active draw loop can be used to animate the pop-density circles

​

function draw() {

  background(240);

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

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

    popData[i].display();

  }

}

​

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) / xFac);

​

    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.y_, this.xPos, this.yPos, this.name);

  }

​

  display() {

    push();

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

​

    fill(popFCol);

    // noStroke();

    // stroke(255,20,20);

    strokeWeight(1);

    stroke(popSCol);

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

​

    strokeWeight(1);

    fill(popDenFCol);

    stroke(popDenSCol);

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

​

    fill(spotCol);

    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);

​

      if (kx * kx + ky * ky <= radDen / 2 * radDen / 2) //filter condition for spots beyond circle

      {

        circle(kx, ky, 3);

      } else //maintains correct number of spots

      {

        i--;

      }

    }

    fill(0);

    textSize(12);

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

​

    noFill();

    strokeWeight(2);

    stroke(popDenSCol);

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

    strokeWeight(0.5);

    line(0,radDen/2,radDen/2,radDen/2);

​

    pop();

​

  }

​

​

}