​

let fontBold;

let fontReg;

let fontMed;

let myData;

let total_age_avg = 59.3;

let female_age_avg = 56.7;

let male_age_avg = 60.0;

let female_data = false

let male_data =false

let total_data = false

let avg_data =false 

​

function preload() {

  fontBold = loadFont('fontBold.otf');

  fontReg = loadFont('fontReg.otf');

  fontMed = loadFont('fontMed.otf');

  myData = loadJSON('data1.json');

}

function setup() {

  createCanvas(600, 750);

  background(250, 248, 231);

  //title

  textFont(fontReg);

  textSize(16);

  push();

  textFont(fontBold);

  noStroke();

  textAlign(CENTER);

  text("The average age of artists upon entering the collection of Cleveland Museum of Art",80,20,440,40);

  pop();

  //y axis

  stroke(0);

  textSize(12);

  line(80,100,80,600);

  line(520,100,520,600);

  push();

  strokeWeight(1)

  text("Age", 50, 80);

  pop();

  push();

  fill(0);

  strokeWeight(5);

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

    point(80,110+i*60);

    point(520,110+i*60);

   }

  pop();

  push();

   textSize(10);

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

   text(100-i*10,50,110+i*60);

   }

  pop();

  //x axis

  push();

  noStroke();

  fill(75,0,130);

  textSize(10);

  textAlign(CENTER);

  text('0',width/2,600);

  text('35',width/2+96,600);

  text('35',width/2-96,600);

  pop();

​

  //import artist data

    for (let i = 3; i < 77; i++){

    push();

    stroke(255,140,0,80);

    rectMode(CENTER);

    //draw trail of points for total artists

      for (let a = 7; a > 2; a--){

        strokeWeight(a);

        point(width/2 - myData.total_avg[i] *(1.5+0.3*a),590-i*6);

        point(width/2 + myData.total_avg[i] *(1.5+0.3*a),590-i*6);

      }

    pop();

  }

  //avg line

    push();

    stroke(255,160,0);

    line(70,110+(100-total_age_avg)*6,530,110+(100-total_age_avg)*6);

    noStroke();

    fill(255,140,0);

    text('avg '+ total_age_avg, 535,90+(100-total_age_avg)*6,10,60);

    pop();

  push();

    stroke(250,0,0,80);

    line(70,110+(100-female_age_avg)*6,530,110+(100-female_age_avg)*6);

    noStroke();

    fill(250,0,0);

    text('avg '+ female_age_avg, 535,105+(100-female_age_avg)*6,10,60);

    pop();

  push();

    stroke(0,0,250,80);

    line(70,110+(100-male_age_avg)*6,530,110+(100-male_age_avg)*6);

    noStroke();

    fill(0,0,250);

    text('avg '+ male_age_avg, 535,70+(100-male_age_avg)*6,10,60);

    pop();

​

  //female artist data

  female();

  //import male artist data

  for (let i = 3; i < 77; i++){

    push();

    stroke(0,0,220,80);

    rectMode(CENTER);

    //draw trail of points for male artists

      for (let a = 5; a > 1; a--){

        strokeWeight(a);

        point(width/2 - myData.male_avg[i] *(1.5+0.3*a),590-i*6);

        point(width/2 + myData.male_avg[i] *(1.5+0.3*a),590-i*6);

      }

    pop();

  }

  //legends 

  //total 

  push();

  noStroke();

  fill(255,140,0,85)

  circle(260,670,25)

  textAlign(CENTER)

  textSize(10)

  fill(0);

  text('total artists',252,690,20,30)

  pop();

  //male 

  push();

  noStroke();

  fill(0,0,250,80)

  circle(300,670,25)

  textAlign(CENTER)

  textSize(10)

  fill(0);

  text('male artists',292,690,20,30)

  pop();

  //female 

  push();

  noStroke();

  fill(250,0,0,80)

  circle(340,670,25)

  textAlign(CENTER)

  textSize(10)

  fill(0);

  text('female artists',332,690,20,30)

  pop();

  // //average

  // push();

  // strokeWeight(0.5);

  // line(350,670,400,670)

  // line(350,645,400,645)

  // line(350,695,400,695)

  // textAlign(CENTER)

  // textSize(10)

  // fill(0);

  // text('average age',367,690,20,30)

  // pop();

}

​

function draw() {

//   if (female_data == true) {

//     female();

//   }

// }

​

// function mouseClicked(){

//   if(mouseX>300 && mouseX <350 && mouseY > 645 && mouseY < 695){

//     if(female_data == false){

//       female_data = true 

//     }

//     else {

//       female_data = false

//     }

//   }

}

​

​

​

function female(){

  //import female artist data

    for (let i = 3; i < 77; i++){

    push();

    stroke(250,0,0,60);

    rectMode(CENTER);

    //draw trail of points for female artists

      for (let a = 5; a > 1; a--){

        strokeWeight(a);

        point(width/2 - myData.female_avg[i] *(1.5+0.5*a),590-i*6);

        point(width/2 + myData.female_avg[i] *(1.5+0.5*a),590-i*6);

      }

    pop();

  }

}