let myShippingData;

let myStateData;

let myVehicleData;

let literal;

​

let circleone;

let circletwo;

let circlethree;

let circlefour;

let lowershape;

let purplecircle1;

let purplecircle2;

let purplecircle3;

let purplecircle4;

let purplecircle5;

​

​

function preload(){

  literal = loadFont('FONTS/Montserrat-Regular.otf');

  myFlightData = loadJSON('JSONS/flightdata.json');

  myShippingData = loadJSON('JSONS/shippingdata.json');

  myStateData = loadJSON('JSONS/statedata.json');

  myVehicleData = loadJSON('JSONS/vehicledata.json');

}

​

function setup() {

  createCanvas(600, 600);

  circleone = new CircleOne();

  circletwo = new CircleTwo();

  circlethree = new CircleThree();

  circlefour = new CircleFour();

  lowershape = new LowerShape();

  purplecircle1 = new PurpleCircle1();

  purplecircle2 = new PurpleCircle2();

  purplecircle3 = new PurpleCircle3();

  purplecircle4 = new PurpleCircle4();

  purplecircle5 = new PurpleCircle5();

}

​

function draw() {

  background(165, 167, 170);

  angleMode(DEGREES);

  circlefour.dataset();

  circlethree.dataset();

  circleone.dataset();

  circletwo.dataset();

  lowershape.dataset();

  purplecircle1.dataset();

  purplecircle2.dataset();

  purplecircle3.dataset();

  purplecircle5.dataset();

  purplecircle4.dataset();

  push();

  noStroke();

  rotate(-40);

  fill(255);

  textSize(10);

  text('Private', 35, 150);

  text('Public', 300, 300);

  text('Flight', 260, 130);

  text('Shipping', 80, 300);

  text('34%', 205, 225);

  text('Transportation', 180, 205);

  noFill();

  stroke(255);

  ellipse(210,210,80,80);

  stroke(0);

  ellipse(350,460,80,80);

  noStroke();

  fill(0);

  text('Electricity', 330, 455);

  text('Home', 100, 465);

  text('Business', 545, 535);

  text('Industry', 550, 220);

  text('32%', 345, 475);

  pop();

}

​

​

class CircleOne {

  dataset(){

  noStroke();

  fill(0, 173, 141);

  ellipse(130, 160, myVehicleData.data.attributes.carbon_lb*2.5, 240)

  }

}

​

class CircleTwo {

  dataset(){

  noStroke();

  fill(0, 179, 215);

  ellipse(180, 270, myShippingData.data.attributes.carbon_g*6, 165)

  }

}

​

class CircleThree {

  dataset(){

  noStroke();

  fill(255, 141, 76);

  ellipse(200, 150, myFlightData.data.attributes.carbon_kg/7, 160)

  }

}

​

class CircleFour {

  dataset(){

  noStroke();

  fill(241, 102, 143);

  ellipse(240, 260, 150, 260);

  }

}

​

class LowerShape {

  dataset(){

  noStroke();

  fill(255, 249, 124);

  beginShape();

  vertex(570,250);

  vertex(530,430);

  vertex(530,470);

  vertex(570,570);

  vertex(390,540);

  vertex(320,580);

  vertex(290,570);

  vertex(260,590);

  vertex(180,580);

  vertex(30,570);

  vertex(35,480);

  vertex(100,520);

  vertex(150,420);

  vertex(260,460);

  vertex(330,370);

  vertex(420,320);

  vertex(480,250);

  endShape(CLOSE);

  }

}

​

class PurpleCircle1 {

  dataset(){

  noStroke();

  fill(194, 179, 255);

  ellipse(530, 260, myStateData.statedata.attributes.carbon_mt*6, 110);

  }

}

​

class PurpleCircle2 {

  dataset(){

  noStroke();

  fill(194, 179, 255);

  rotate(-40);

  ellipse(60, 720, myStateData.statedata.attributes.carbon_mt*4.5, 170);

  }

}

​

class PurpleCircle3 {

  dataset(){

  noStroke();

  fill(194, 179, 255);

  rotate(-10);

  ellipse(-250, 440, myStateData.statedata.attributes.carbon_mt*6.5, 130);

  }

}

​

class PurpleCircle4 {

  dataset(){

  noStroke();

  fill(194, 179, 255);

  ellipse(560, 140, myStateData.statedata.attributes.carbon_mt*3.5, 140);

  }

}

​

class PurpleCircle5 {

  dataset(){

  noStroke();

  rotate(90);

  fill(194, 200, 255);

  ellipse(580, 80, myStateData.statedata.attributes.carbon_mt*2, 35);

  }

}