let bg;

let dataLoadedFromFile;

let slider;

let leftAlign = 100;

​

function preload(){

  dataLoadedFromFile = loadTable("2019.csv", "csv", "header");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  data = [];

  data = dataLoadedFromFile.getRows()

  bg = color (50);

  textSize(10);

​

// Create Sliders 

  slider1 = createSliderAt(leftAlign,250,0,33000,0);

  slider2 = createSliderAt(leftAlign,300,0,200,0);

  // slider.position(0,400)

  // slider.size(600,20)

}

​

function draw() {

  background(bg);

// Centre Marker

  push()

  noStroke();

  rect(0,350, windowWidth,2)

  pop()

// Background Grid

  push();

  translate(0,87);

  noStroke();

  fill(200,10);

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

    rect(0,i*21, windowWidth,2);

  }

  pop();

​

// Draw Graph  

  push();

  drawRemappedBarGraphFrom(data,2, -slider1.value() + 440,350,0,200,color(80,170,200,200),1);

    drawRemappedBarGraphFrom(data,4, -slider1.value() + 440, slider2.value() + 150,0,50,color(255,100,100,200),0);

  drawRemappedBarGraphFrom(data,5,-slider1.value() + 440,-slider2.value() + 550,0,25,color(255, 190, 11,200),0)

  pop();

  fill(40,40,40,200);

  push()

// Block Layer

  noStroke();

  rect(leftAlign -30,67, 240,610);

  pop()

// Cyan Titles

  fill(100,255,200);

  push();

  textSize(20)

  text('Measuring Freedom \nX Social Support', leftAlign,40 + 100);

  pop();

​

  push();

  textSize(12)

  text('Scroll to see all Countries', leftAlign,230);

  pop();

  push();

  textSize(12)

  text('Scroll to compare values', leftAlign,280);

  pop();

​

// Legend

  fill(80,170,200);

  push();

  noStroke();

  ellipseMode(CORNER);

  ellipse(leftAlign,436 + 75,20,20);

  text('Happiness Index',leftAlign + 30,449 +75);

  pop();

​

  fill(255,100,100);

  push();

  noStroke();

  ellipseMode(CORNER);

  ellipse(leftAlign,486 + 75,20,20);

  text('Social Support', leftAlign +30,499+ 75);

  pop();

  fill(255, 190, 11);

  push();

  noStroke();

  ellipseMode(CORNER);

  ellipse(leftAlign,536 + 75,20,20);

  text('Freedom of Choice', leftAlign + 30,549 + 75);

  pop();

  fill(100,255,200);

}

​

​

function drawRemappedBarGraphFrom(

  theData, theColumnIndex,

  theX, theY,

  theMin, theMax,

  theColor, onOff){

    let barWidth = 10;

    let barGroupSpacing =220;

    let inputValues = [];

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

      inputValues.push(theData[i].getNum(theColumnIndex));

    }

    //this will find the min and max

    let inputMin = min(inputValues);

    let inputMax = max(inputValues);

    let outputMin = theMin;

    let outputMax = theMax;

    let showLabel = true;

    push();

    translate(theX, theY);

    // blendMode(SCREEN);

    fill(theColor);

    noStroke();

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

      let x = i *barGroupSpacing;

      let value = map(theData[i].getNum(theColumnIndex), inputMin, inputMax, outputMin, outputMax);

      let label = theData[i].getString(theColumnIndex);

      let country = theData[i].getString(1);

      push();

      translate(x,0);

​

      ellipse(0,0, -value);

​

      // Transparentcy of the Label: Below codes

      push();

      translate(0,75);

      let transparency = map(slider2.value(),200,0,0,255);

      textAlign(CENTER);

      fill(255, transparency);

      text(label, 0, -10);

      if(onOff == 1) {

        fill(255);

      } else {

        fill(255,transparency);

      }

      text(country, 0,5)      

      pop();

      pop();

    }

    pop();

    }

function createSliderAt(theX, theY, theMin,theMax, theValue){

  let result = createSlider(theMin, theMax, theValue, 0);

  result.position(theX, theY);

  result.style('width', '100px');

  result.class('mySlider');

  result.style('opacity',1);

  return result;

}

​