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

  textFont('Helvetica');

  textSize(10);

  slider = createSliderAt(400,32,0,5700,0);

  // slider.position(0,400)

  // slider.size(600,20)

}

​

function draw() {

  background(bg);

    drawRemappedBarGraphFrom(data,2, -slider.value() + 15,200,0,100,color(255,100,100),3);

    drawRemappedBarGraphFrom(data,4, -slider.value() + 25,200,0,100,color(100,100,200),3);

  drawRemappedBarGraphFrom(data,6,-slider.value() + 35,200,0,100,color(100,255,200),3)

  push();

  textSize(20)

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

  pop();

  fill(255,100,100);

  push();

  noStroke();

  rect(15,400,20,20);

  text('Happiness Index',45,413);

  pop();

  fill(100,100,200);

  push();

  noStroke();

  rect(200,400,20,20);

  text('Social Support', 230,413);

  pop();

  fill(100,255,200);

  push();

  noStroke();

  rect(400,400,20,20);

  text('Freedom of Choice', 430,413);

  pop();

  fill(176,248,255);

}

​

​

function drawRemappedBarGraphFrom(

  theData, theColumnIndex,

  theX, theY,

  theMin, theMax,

  theColor, onOff){

    let barWidth = 10;

    let barGroupSpacing = 40;

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

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

      rect(0,0,barWidth, -value);

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

      push();

      translate(0,20);

      rotate(HALF_PI);

      text(label, 0, 0);

      text(country, 40,0)

      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;

}

​