let cricketX;

let cricketYear;

let cricketY;

let newMap

let value = 0;

let conflict;

let conflictX;

let conflictYear;

let diff1;

let diff2;

​

function preload() {

  cricket = loadJSON("cricket.json")

  conflict = loadJSON("Conflict.json")

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  diff1 = 2021 - 1952

  diff2 = width-50-50

// print(cricket[0])

​

}

​

function draw() {

  background(0);

   for (let j = 50; j < width-40; j = j+(diff2/diff1)){

       strokeWeight(0.1)

    stroke(255)

    line(j, 0, j, height)

   }

     //print(cricket)

  for(let val in cricket) {

    // console.log(cricket[val].Year)

    cricketYear= cricket[val].Year

     cricketX = map(cricketYear, 1952, 2021, 50, width-50)

    if (cricket[val].Location == "India") {

      fill(0, 0, 255, 25)

      cricketY = height/2 + 10

    } else if (cricket[val].Location == "Pakistan") {

            fill(0, 255, 0, 25)

      cricketY = height/2 - 10

    } else {

       fill(255, 255, 0, 25)

      cricketY = height/2

    }

 // fill(255, 25)

  noStroke()

  ellipse(cricketX, cricketY, 10)

    // text(cricket[0].Year, 35, height/2 - 15)

    // text(cricket[199].Year, 1135, height/2 - 15)

    //newMap = map(value, 0, 69, 50, 1150)

​

  }

  for(let val in conflict) {

     conflictYear= conflict[val].Year

     conflictX = map(conflictYear, 1952, 2021, 50, width-50)

    fill(255, 100)

     noStroke()

  ellipse(conflictX, height/2-50, 10)

  }

​

}