let bg;

let dataLoadedFromFile;

let slider;

​

function preload(){

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

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  data = [];

  data = dataLoadedFromFile.getRows()

  bg = color (50);

  textSize(10);

  slider1 = createSliderAt(400,32,0,18000,0);

  slider2 = createSliderAt(600,32,0,200,0);

// 3rd Slider that collapses the ellipses  

  slider3 = createSliderAt(400,62,0,200,200);

​

}

​

function draw() {

  background(bg);

  push()

// Center Marker

  rect(0,350, windowWidth,2)

  pop()

​

// BackGround Grid

  push();

  translate(0,67);

  noStroke();

  fill(255,10);

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

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

  }

  pop();

​

// Draw Graph

  push();

  drawRemappedBarGraphFrom(data,2, -slider1.value() + 100,350,0,200,slider3.value(),color(100,100,200,200),1);

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

  drawRemappedBarGraphFrom(data,5,-slider1.value() + 100,-slider2.value() + 550,0,20,slider3.value(),color(100,255,200,200),0)

  pop();

​

// Title

  push();

  textSize(20)

  text('Measuring Freedom / Social Support', 20,40);

  pop();

   fill(176,248,255);

}

​

​

function drawRemappedBarGraphFrom(

  theData, theColumnIndex,

  theX, theY,

  theMin, theMax, theSpace,

  theColor, onOff){

    let barWidth = 10;

    let barGroupSpacing =theSpace;

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

      // if (showLabel == true && onOff == 3){

      // Transparentcy of the Label: Below codes

      push();

      translate(0,75);

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

      // let disappear = map(slider3.value(),200,0,0,255);

      // if(slider3.value() == 200) {

      //   fill(255);

      // } else{

      //   fill(255,disappear);

      // }

​

      textAlign(CENTER);

      fill(255, transparency);

      text(label, 0, -10);

      if(onOff == 1) {

        fill(255);

      } else {

        fill(255,transparency);

      }

      text(country, 0,5)      

      pop();

​

      push();

      translate(0,75);

      let disappear = map(slider3.value(),0,200,0,255);

      textAlign(CENTER);

      fill(255, disappear);

      text(label, 0, -10);

​

      if(onOff == 1) {

        fill(255);

      } else {

        fill(255,disappear);

      }

      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;

}

​