let cx;

let cy;

let cr;

let magnifier = 3;

let locationAlt = 75;

​

function preload() {

  loadJSON("dating.json", gotData);

}

​

function setup() {

  noCanvas();

  title = createElement('h1', datingInfo.title).style('text-align', 'center');

  ans = datingInfo.response;

  div = createDiv();

  createCanvas(800, 800);

  angleMode(DEGREES);

  cx = width / 2;

  cy = height / 2;

  cr = width * 0.25;

}

​

function draw() {

  background(50);

  fill(255, 200);

  ellipse(30, 30, 10);

  textAlign(LEFT, BOTTOM);

  text('White', 45, 38);

  fill(153, 102, 51, 200);

  ellipse(30, 60, 10);

  text('Hispanic', 45, 68);

  fill(0, 200);

  ellipse(30, 90, 10);

  text('Black', 45, 98);

  fill(153, 51, 255, 200);

  ellipse(30, 120, 10);

  text('Other', 45, 128);

​

  for (let i = 0; i < ans.length; i++) {

    let x = cx + cos(i * 360 / ans.length) * cr;

    let y = cy + sin(i * 360 / ans.length) * cr;

    noStroke();

    fill(255, 230, 238, 50);

    ellipse(x, y, 150);

​

    fill(255, 200);

    ellipse(x, y - locationAlt, ans[i].White * magnifier);

    fill(255);

    // textSize(12);

    // textStyle(NORMAL);

    // text(ans[i].White, x, y - locationAlt * 1.4);

​

    fill(153, 102, 51, 200);

    ellipse(x + locationAlt, y, ans[i].Hispanic * magnifier);

    fill(102, 51, 0);

    // textSize(12);

    // textStyle(NORMAL);

    // text(ans[i].Hispanic, x + locationAlt * 1.4, y);

​

    fill(0, 200);

    ellipse(x, y + locationAlt, ans[i].AfricanAmerican * magnifier);

    fill(0);

    // textSize(12);

    // textStyle(NORMAL);

    // text(ans[i].AfricanAmerican, x, y + locationAlt * 1.5);

​

    fill(153, 51, 255, 200);

    ellipse(x - locationAlt, y, ans[i].Other * magnifier);

    fill(102, 0, 180);

    // textSize(12);

    // textStyle(NORMAL);

    // text(ans[i].Other, x - locationAlt * 1.5, y);

​

    fill(150);

    textSize(14);

    textStyle(BOLD);

    text(ans[i].answer, x - locationAlt / 1.3, y - locationAlt /2, 120, 80);

    textAlign(CENTER, CENTER);

    // answerT.addClass('p');

​

    // for (let i = 0; i < ans.length; i++) {

    //   let x = distance + i * distance;

    //   let y = distance + (int(x / width)) * distance;

    //   print(i, int(x / width));

    //   x = x % width;

    //   noStroke();

    //   fill(255, 200);

    //   ellipse(x, y, ans[i].White, ans[i].White);

​

  }

}

​

function gotData(data) {

  datingInfo = data;

}