let gap = 25; 

​

let gapO = 70; 

​

function preload() {

  js = loadJSON("csvjson (1).json")

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  textSize(20)

}

​

function draw() {

  background(12, 52, 62);

​

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

      fill(255)

    noStroke()

      text (js[i].Month, 10, (i * 50)+gap-(i*10))

    text("Gasoline", 70, 850)

      text("Energy", 170, 850)

     text("Medical", 250, 850)

     text("Electricity",340, 850)

     text("Services", 440, 850)

     text("ShelterBase", 535, 850)

     text("Food", 655, 850)

     text("Ed.&comm.", 720, 850)

    text("Natural", 840, 850)

     text("NewVehicles", 920, 850)

    text("Apparel", 1050, 850)

    noFill()

    stroke(255)

    strokeWeight(1)

   ellipse(70+30,(i * 50)+gap-(i*10), js[i].Gasoline/10)

    ellipse(170+30,(i * 50)+gap-(i*10), js[i].Energy/10)

     ellipse(250+30,(i * 50)+gap-(i*10), js[i].Medical/10)

     ellipse(340+30,(i * 50)+gap-(i*10), js[i].Electricity/10)

    ellipse(440+30,(i * 50)+gap-(i*10), js[i].Services/10)

     ellipse(535+30,(i * 50)+gap-(i*10), js[i].Shelter/10)

     ellipse(655+30,(i * 50)+gap-(i*10), js[i].Food/10)

     ellipse(720+30,(i * 50)+gap-(i*10), js[i].Education/10)

     ellipse(840+30,(i * 50)+gap-(i*10), js[i].Natural/10)

    ellipse(920+30,(i * 50)+gap-(i*10), js[i].Vehicles/10)

   ellipse(1050+30,(i * 50)+gap-(i*10), js[i].Apparel/10)

          stroke(0, 255, 255)

     ellipse(70+30,(i * 50)+gap-(i*10), 1)

     ellipse(170+30,(i * 50)+gap-(i*10), 1)

     ellipse(250+30,(i * 50)+gap-(i*10), 1)

     ellipse(340+30,(i * 50)+gap-(i*10), 1)

    ellipse(440+30,(i * 50)+gap-(i*10), 1)

     ellipse(535+30,(i * 50)+gap-(i*10), 1)

     ellipse(655+30,(i * 50)+gap-(i*10), 1)

     ellipse(720+30,(i * 50)+gap-(i*10), 1)

     ellipse(840+30,(i * 50)+gap-(i*10), 1)

    ellipse(920+30,(i * 50)+gap-(i*10), 1)

   ellipse(1050+30,(i * 50)+gap-(i*10), 1)

//    console.log((i * 50)+gap-(i*10))

  }

}