*******Pie****************************************

// The data variables...
// sun, mon, tue, wed, thu, fri, sat
int[] data = {
  5, 5, 1, 4, 4, 4, 8
};

String[] labels = {
  "SUN", "MON", "TUE", "WED", 
  "THU", "FRI", "SAT"
};
int total;
float[] perc = new float[7];

// The sketch variables
float cx, cy, pieDia;
float startAngle, stopAngle;

color [] colors = {
  color(238, 118, 0), // sunday
  color(123, 165, 248), 
  color(7, 57, 1), 
  color(255, 246, 63), 
  color(255, 0, 0), 
  color(0, 255, 0), 
  color(0, 0, 255)     // saturday
};
void setup() {
  size(500, 500);
  background(255);
  smooth();

  // process
  // compute the total population
  total = 0;
  for (int i=0; i < data.length; i++) {
    total += data[i];
  }

  // compute percentages
  for (int i=0; i < data.length; i++) {
    perc[i] = float(data[i])/total;
  }

  // pie variables
  cx = width/2;
  cy = height/2;
  pieDia = 250;

  noLoop();
} // setup()

void draw() {
  startAngle = 0;
  stopAngle = 0;
  for (int i=0; i < perc.length; i++) {
    // set up pie parameters for ith slice
    startAngle = stopAngle;
    stopAngle = startAngle + TWO_PI*perc[i];

    // dra the pie
    noStroke();
    fill(colors[i]);
    arc(cx, cy, pieDia, pieDia, startAngle, stopAngle);
    float r = pieDia/2;
    float theta = (startAngle+stopAngle)/2;
    float x1 = cx+0.9*pieDia/2*cos(theta);
    float y1 = cy+0.9*pieDia/2*sin(theta);
    float x2 = cx+1.1*pieDia/2*cos(theta);
    float y2 = cy+1.1*pieDia/2*sin(theta);
    stroke(0);
    fill(0);
    line(x1, y1, x2, y2);

    if (theta < PI/2) {
      text(labels[i], x2, y2);
    } else if (theta < PI) {
      text(labels[i], x2-25, y2);
    } else if (theta < 3.0*PI/2) {
      text(labels[i], x2-25, y2);
    } else {
      text(labels[i], x2, y2);
    }
  }

  // draw legend
  // draw title
  fill(0);
  textSize(24);
  rectMode(CENTER);
  text("% Births by Day of Week", 100, 50);

  // legend variables
  float w = 20, h = 20;
  float x = 25;
  float y = height-((h+5)*data.length);
  //
  rectMode(CORNER);
  for (int i=0; i < perc.length; i++) {
    stroke(0);
    fill(colors[i]);
    rect(x, y, w, h);
    fill(0);
    textSize(12);
    text(labels[i], x+w+5, y+h);
    y += h+5;
  }
} // draw()

*******Bar Graphs****************************************
// Bar Graphs are able to accurately provide comparisions...

// The data variables...
// sun, mon, tue, wed, thu, fri, sat
int[] data = {
  5, 5, 1, 4, 4, 4, 8
};

String[] labels = {
  "SUN", "MON", "TUE", "WED", 
  "THU", "FRI", "SAT"
};
int total;
float[] perc = new float[7];

// The sketch variables
float maxW, maxH, barW, barH, lastX;
float x, y;

color [] colors = {
  color(238, 118, 0), // sunday
  color(123, 165, 248), 
  color(7, 57, 1), 
  color(255, 246, 63), 
  color(255, 0, 0), 
  color(0, 255, 0), 
  color(0, 0, 255)     // saturday
};
void setup() {
  size(500, 400);
  background(255);
  smooth();

  // process
  // compute the total population
  total = 0;
  for (int i=0; i < data.length; i++) {
    total += data[i];
  }

  // compute percentages
  for (int i=0; i < data.length; i++) {
    perc[i] = float(data[i])/total;
  }

  // sketch variables
  maxW = width/(1+data.length);
  maxH = height;
  lastX = 0;
  barW = maxW*0.5;

  noLoop();
} // setup()

void draw() {
  for (int i=0; i < perc.length; i++) {
    // set up parameters for ith bar
    x = lastX+maxW;
    barH = map(perc[i], 0, 1, 0, maxH);

    // draw the bar(s)
    noStroke();
    fill(colors[i]);
    rect(x, height-barH-50, barW, barH);
    lastX = x;

    // labels
    stroke(0);
    fill(0);
    textSize(12);
    text(data[i], x+barW/2, height-barH-65);
    text(labels[i], x, height-25);
  }

  // draw title
  fill(0);
  textSize(24);
  rectMode(CENTER);
  text("Births by Day of Week", 105, 50);
} // draw()


*******Bubble****************************************

// Bubble are not a good perceptual mechanism for comparisions...

// The data variables...
// sun, mon, tue, wed, thu, fri, sat
int[] data = {
  5, 5, 1, 4, 4, 4, 8
};

String[] labels = {
  "SUN", "MON", "TUE", "WED", 
  "THU", "FRI", "SAT"
};
int total;
float[] perc = new float[7];

// The sketch variables
float maxW, maxArea, cx, cy, lastX, w;

color [] colors = {
  color(238, 118, 0), // sunday
  color(123, 165, 248), 
  color(7, 57, 1), 
  color(255, 246, 63), 
  color(255, 0, 0), 
  color(0, 255, 0), 
  color(0, 0, 255)     // saturday
};
void setup() {
  size(500, 200);
  background(255);
  smooth();

  // process
  // compute the total population
  total = 0;
  for (int i=0; i < data.length; i++) {
    total += data[i];
  }

  // compute percentages
  for (int i=0; i < data.length; i++) {
    perc[i] = float(data[i])/total;
  }

  // sketch variables
  maxW = width/(1+data.length);
  maxArea = PI*maxW/2*maxW/2;    // max area of bubble
  cy = height/2;
  lastX = 0;

  noLoop();
} // setup()

void draw() {
  for (int i=0; i < perc.length; i++) {
    // set up parameters for ith bubble
    cx = lastX+maxW;
    w = 2*sqrt(maxArea*perc[i]/PI);  // size of bubble

    // draw the bubble
    noStroke();
    fill(colors[i]);
    ellipse(cx, cy, w, w);
    lastX = cx;

    // labels
    stroke(0);
    fill(0);
    textSize(12);
    text(labels[i], cx-12, cy+50);
  }

  // draw title
  fill(0);
  textSize(24);
  rectMode(CENTER);
  text("% Births by Day of Week", 100, 50);
} // draw()

*******Divided Bar Graphs****************************************

// Divided Bar Graphs are able to provide 
// effective visual comparisions...

// The data variables...
// sun, mon, tue, wed, thu, fri, sat
int[] data = {
  5, 5, 1, 4, 4, 4, 8
};

String[] labels = {
  "SUN", "MON", "TUE", "WED", 
  "THU", "FRI", "SAT"
};
int total;
float[] perc = new float[7];

// The sketch variables
float x, y, barL, barH;
float startX, startY, stopX, stopY;

color [] colors = {
  color(238, 118, 0), // sunday
  color(123, 165, 248), 
  color(7, 57, 1), 
  color(255, 246, 63), 
  color(255, 0, 0), 
  color(0, 255, 0), 
  color(0, 0, 255)     // saturday
};

float h, s, b;
void setup() {
  size(500, 250);
  background(255);
  smooth();

  // process
  // compute the total population
  total = 0;
  for (int i=0; i < data.length; i++) {
    total += data[i];
  }

  // compute percentages
  for (int i=0; i < data.length; i++) {
    perc[i] = float(data[i])/total;
  }

  // bar/sketch variables
  barL = width-100;    // length of the bar to be divided
  barH = 50;
  x = 50;
  y = (height-barH)/2.0;

  h = 240;
  s = 0;
  b = 87;
  noLoop();
} // setup()

void draw() {
  colorMode(HSB, 100);
  startX = x;
  startY = y;
  stopX = startX;
  stopY = startY;
  for (int i=0; i < perc.length; i++) {
    // set up pie parameters for ith bar
    startX = stopX;
    startY = stopY;
    stopX = startX + perc[i]*barL;

    // draw the bar
    noStroke();
    fill(colors[i]);
    //fill(h, 100/7*i, b);
    rect(startX, startY, stopX-startX, barH);

    // legend
    stroke(0);
    fill(0);
    textSize(12);
    if (i%2 == 0) {
      line(startX, startY+barH, startX, startY+barH+10);
      text(labels[i], startX, startY+barH+10+12);
    } else {
      line(startX, startY, startX, startY-10);
      text(labels[i], startX, startY-10);
    }
  }

  // draw legend
  // draw title
  fill(0);
  textSize(24);
  rectMode(CENTER);
  text("% Births by Day of Week", 100, 50);
} // draw()