//Week 4 assignment - data visualization

//Intro to IM

//https://www.kaggle.com/datasets/whenamancodes/world-population-live-dataset?resource=download

​

//this variable holds the World Population data file loaded

let WP;

let rows, cols;

let abbrev = [];

let country = [];

let population= [];

let lineSize = [];

let centerX, centerY;

let min, max = 0;

​

function preload(){

  WP = loadTable("WP.csv", "csv", "header");

}

​

function setup() {

  createCanvas(700, 700);

  rectMode(CENTER);

  //these methods count the number of rows and columns in the data file

  rows = WP.getRowCount();

  cols = WP.getColumnCount();

​

  //this loop populates the arrays with data fetched from the data file

  for(let row = 0; row < WP.getRowCount(); row++){

    abbrev[row] = WP.getString(row,0);

    country[row] = WP.getString(row,1);

    population[row] = WP.getNum(row,2);

  }

  minMax();

}

​

function draw() {

  background(0);

  centerX = width/2;

  centerY = height/2 + 10;

  let radius = width/10;

  let angle = 360 / rows;

  textAlign(CENTER);

  textSize(25);

  text("World Population Dataset 2022 (000)", width/2, height-50);

  textSize(20);

  text("Hover over data points", width/2, height-20);

//loop plots the data points and fits them on the canvas

  for (let i=0; i<rows; i++){

    lineSize[i] = map(population[i], 1, 1425887, 175, 230);

    let pointx = (lineSize[i] + radius) *cos(radians(angle*i)) + centerX;

    let pointy = (lineSize[i] + radius) *sin(radians(angle*i)) + centerY;

    let cirx = radius * cos(radians(angle*i)) + centerX;

    let ciry = radius * sin(radians(angle*i)) + centerY;

  //condition paints white lines after every 20 points

    if (i % 20 == 0){

      strokeWeight(1);

      stroke("white");

    }

    else{

      strokeWeight(0.3);

      stroke("#F3AA4E");

    }

    line(cirx, ciry, pointx, pointy);

  //calculates distance between pointer and circles

    let distance = dist (mouseX, mouseY, pointx, pointy);

    let circlesize;

  //this condition changes the circles to green when hovered over

    if(distance < 3){

      fill ("green");

      circlesize = 7;

      noStroke();

      circle(pointx, pointy, circlesize);

    //this block prints the countries and populations

      push();

      stroke("white");

      strokeWeight(2);

      noFill();

      translate(width/2, 0)

      rect(0, 0, 300, 200);

      noStroke();

      fill("#F3AA4E");

      textAlign(CENTER);

      textSize(25);

      text(population[i], 0, 90);

      text(country[i], 0, 60);

      text(abbrev[i], 0, 30);

      pop();

    }

    else{

      fill("#F3AA4E");

      circlesize = 3;

      noStroke();

      circle(pointx, pointy, circlesize);

    }

  }

}

​

//this function calculates the minimum and maximum populations from arrays

function minMax(){

  for (let i = 0; i < population.length; i++){

    if(population[i] > max){

      max = population[i];

    }

  }

  min = max;

  for (let i =0; i < population.length; i++){

    if(population[i] < min){

      min = population[i];

    }

  }

}