Complex Charts | KTBYTE Student Projects

The showcase player uses a modified version of Processing.js in combination with jsweet to let students program their apps in Java code while still allowing for browser support.

Content created by students is scaled to fit the showcase frame while maintaining aspect ratio and cursor position. This is why some projects may appear blurry in fullscreen, or why some small details may not be visible on a small screen

Embed HTML:

<iframe width='500px' height='400px' src='https://nest.ktbyte.com/nest#117621' allowfullscreen></iframe>

Piece[] pie;
Bar[] barchart;
int[] myNumbers;
float barWidth;
int maxPageviews = 0;
int maxPagetime = 0;
int maxAttend = 0;
float maxDiameter = 200; 
 
void setup(){
  size(1000,700);
  colorMode(HSB);
   
  String[] data = loadStrings("https://pastebin.com/raw/tPuhqzLt"); //data
   
  pie = new Piece[data.length];
  for(int i = 0; i < data.length; i++){
    String[] row = split(data[i], '\t');
    pie[i] = new Piece();
    pie[i].museum = row[0];
    pie[i].pageviews = parseInt(row[1]);
    pie[i].pagetime = parseInt(row[2]);
    pie[i].attend = parseInt(row[3]);
    pie[i].url = row[4];
    pie[i].index = i;
    pie[i].brightness = map (i, 0, pie.length, 255, 10);  

    if(pie[i].pageviews > maxPageviews){
      maxPageviews = pie[i].pageviews;
    } 
    if(pie[i].attend > maxAttend){
      maxAttend = pie[i].attend;
    }
    if(pie[i].pagetime > maxPagetime){
      maxPagetime = pie[i].pagetime;
    }         
  }
  println(maxAttend);  
  println(maxPageviews);
  println(maxPagetime);
  for(int i = 0; i < pie.length; i++){
    pie[i].chart();
  }
  
  String[] cdata = loadStrings("https://pastebin.com/raw/cge1a2Mh"); //clickstream

barchart = new Bar[cdata.length];
myNumbers = new int[cdata.length];
barWidth = ((width - 180) / myNumbers.length) * 1/2; 

for(int e = 0; e < cdata.length; e++){
String[] erow = split(cdata[e], '\t');
String website = erow[0];
int stream = parseInt(erow[1]);
Bar thisBar = new Bar(website, stream, e);
barchart[e] = thisBar;
myNumbers[e] = stream;
barchart[e].ebrightness = map (e, 0, cdata.length, 255, 10);  
}

for(int e = 0; e < barchart.length; e++){
    barchart[e].setPosAndSize(); 
  
}
}

 
void draw(){
  background(200);
  drawChart();
   
}
 
void drawChart(){
  for(int i = 0; i < pie.length; i++){
    pie[i].display(); 
  fill (0);
  textAlign (RIGHT);
  text ("Attendance (in mil)", width*1/4, 90);
  textAlign (CENTER);
  text ("Daily Pageviews", width/2, 90);
  text ("TOP MUSEUM WEBSITES", width/2, 40);
   text ("Websites viewers are coming from ...", width/2, 670);
  textAlign (LEFT);
  text ("Daily Pagetime (in min)", width*3/4, 90);
  }
  
  for(int e = 0; e < barchart.length; e++){
    barchart[e].displaybar();
  }
 
}

float scaleY(int n){
  return map(n,                                   // input
             0, max(myNumbers),                   // input range
             0, height - 450);//output range
}

float scaleX(int n){
  return map(n,                                           // input
             0, myNumbers.length - 1,                     // input range
             80, width - barWidth - 300);  // output range
}
class Bar{
  
  String website;
  int stream;
  int endex;
  float x, y, barHeight;
  float ebrightness;
  
  boolean isSelected;
  
  Bar(String _website, int _stream, int _endex){
    website = _website;
    stream = _stream;
    endex = _endex;
  }
  
  boolean isMouseOverbar(){
    if(x < mouseX && mouseX < x + barWidth &&
       y - barHeight < mouseY && mouseY < y){
       return true;
    }else{
      return false;
    }
  }  
  
  void setPosAndSize(){
    x = scaleX(endex) +150; 
    y = height - 60;    
    barHeight = scaleY(stream);  
  }
  
  void displaybar(){

    float hue, saturation;

    hue = 130;
    saturation = 200;

if(isMouseOverbar()){
    saturation = 50;
    text(website, mouseX+10, mouseY-30);
    } 
     
    fill(hue, saturation, ebrightness);
    noStroke();  
    rect(x, y, barWidth, -barHeight);   
   
  pushMatrix();
  rotate(-HALF_PI);
  fill(0);
  text("amount of traffic",-560,200);
  popMatrix(); 
 
    
  }



}
//define a slice of the pie as a class
class Piece{
  String museum;
  int pageviews;
  int pagetime; 
  int attend;
  String url;
  int index;
  float brightness;
  float firstAngle, lastAngle;  
  boolean isSelected = true;
  
  float ycenter = height*1/3;

  float diameter1; // Attendance
  float diameter;  // Page views
  float diameter2; // Page time

  float x1center = width*1/4; // Attendance
  float xcenter = width/2;    // Page views
  float x2center = width*3/4; // Page time

   
  Piece(){
  }
   
   boolean isMouseOver(){
         
    float mouseAngle1 = atan2(mouseY - ycenter, mouseX - x1center);
    if(mouseAngle1 < 0) {
      mouseAngle1 = TWO_PI - abs(mouseAngle1); 
    }
    float mouseAngle = atan2(mouseY - ycenter, mouseX - xcenter);
    if(mouseAngle < 0) {
      mouseAngle = TWO_PI - abs(mouseAngle); 
    }
    float mouseAngle2 = atan2(mouseY - ycenter, mouseX - x2center);
    if(mouseAngle2 < 0) {
      mouseAngle2 = TWO_PI - abs(mouseAngle2); 
    }

  float distance1 = dist(mouseX, mouseY, x1center, ycenter);
    float distance = dist(mouseX, mouseY, xcenter, ycenter);
    float distance2 = dist(mouseX, mouseY, x2center, ycenter);

    if(firstAngle < mouseAngle1 && mouseAngle1 < lastAngle &&
       distance1 < diameter1/2){
      return true;
    }else if(firstAngle < mouseAngle && mouseAngle < lastAngle && 
       distance < diameter/2){
      return true;
    }else if(firstAngle < mouseAngle2 && mouseAngle2 < lastAngle &&
       distance2 < diameter2/2){
      return true;
    }else{
      return false;
    }
   }
   
  void chart(){

    float totalAngle = 2*PI/pie.length;
    firstAngle = map(index, 0, pie.length, 0, 2*PI);
    lastAngle = firstAngle + totalAngle;    

    diameter1 = map(attend, 0, maxAttend, 0, maxDiameter);
    diameter = map(pageviews, 0, maxPageviews, 0, maxDiameter);    
    diameter2 = map(pagetime, 0, maxPagetime, 0, maxDiameter);  
  }
 
  void display(){
    float saturation = 150;
    float label; 
    if(isMouseOver()){
      saturation = 50;
       fill(255);
     textAlign(CENTER);
     text(museum, xcenter, ycenter+180);
     text("pageviews:" + pageviews, xcenter, ycenter+200);  
     text("pagetime (in min):" + pagetime, xcenter, ycenter+220);  
  }
  
    
    noStroke();
    smooth();
    fill(100, saturation, brightness);  
    arc(xcenter, ycenter, diameter, diameter, firstAngle, lastAngle);
    fill(150, saturation, brightness);  
    arc(x1center, ycenter, diameter1, diameter1, firstAngle, lastAngle);
    fill(200, saturation, brightness);  
    arc(x2center, ycenter, diameter2, diameter2, firstAngle, lastAngle);

  }
}

// //define a slice of the pie as a class
// class Piece{
//   String museum;
//   int pageviews;
//   int pagetime; 
//   int attend;
//   String url;
//   int index;
//   float brightness;
//   float firstAngle, lastAngle;  
//   boolean isSelected = true;
  
//   float ycenter = height*1/3;

//   float diameter1; // Attendance
//   float diameter;  // Page views
//   float diameter2; // Page time

//   float x1center = width*1/4; // Attendance
//   float xcenter = width/2;    // Page views
//   float x2center = width*3/4; // Page time

   
//   Piece(){
//   }
   
//   boolean isMouseOver(){
         
//     float mouseAngle1 = atan2(mouseY - ycenter, mouseX - x1center);
//     if(mouseAngle1 < 0) {
//       mouseAngle1 = TWO_PI - abs(mouseAngle1); 
//     }
//     float mouseAngle = atan2(mouseY - ycenter, mouseX - xcenter);
//     if(mouseAngle < 0) {
//       mouseAngle = TWO_PI - abs(mouseAngle); 
//     }
//     float mouseAngle2 = atan2(mouseY - ycenter, mouseX - x2center);
//     if(mouseAngle2 < 0) {
//       mouseAngle2 = TWO_PI - abs(mouseAngle2); 
//     }

//   float distance1 = dist(mouseX, mouseY, x1center, ycenter);
//     float distance = dist(mouseX, mouseY, xcenter, ycenter);
//     float distance2 = dist(mouseX, mouseY, x2center, ycenter);

//     if(firstAngle < mouseAngle1 && mouseAngle1 < lastAngle &&
//       distance1 < diameter1/2){
//       return true;
//     }else if(firstAngle < mouseAngle && mouseAngle < lastAngle && 
//       distance < diameter/2){
//       return true;
//     }else if(firstAngle < mouseAngle2 && mouseAngle2 < lastAngle &&
//       distance2 < diameter2/2){
//       return true;
//     }else{
//       return false;
//     }
//   }
   
//   void chart(){

//     float totalAngle = 2*PI/pie.length;
//     firstAngle = map(index, 0, pie.length, 0, 2*PI);
//     lastAngle = firstAngle + totalAngle;    

//     diameter1 = map(attend, 0, maxAttend, 0, maxDiameter);
//     diameter = map(pageviews, 0, maxPageviews, 0, maxDiameter);    
//     diameter2 = map(pagetime, 0, maxPagetime, 0, maxDiameter);  
//   }
 
//   void display(){
//     float saturation = 150;
//     float label; 
//     if(isMouseOver()){
//       saturation = 50;
//       fill(255);
//      textAlign(CENTER);
//      text(museum, xcenter, ycenter+180);
//      text("pageviews:" + pageviews, xcenter, ycenter+200);  
//      text("pagetime (in min):" + pagetime, xcenter, ycenter+220);  
//   }
  
    
//     noStroke();
//     smooth();
//     fill(100, saturation, brightness);  
//     arc(xcenter, ycenter, diameter, diameter, firstAngle, lastAngle);
//     fill(150, saturation, brightness);  
//     arc(x1center, ycenter, diameter1, diameter1, firstAngle, lastAngle);
//     fill(200, saturation, brightness);  
//     arc(x2center, ycenter, diameter2, diameter2, firstAngle, lastAngle);

//   }
// }

DESCRIPTION