HELP! How can i add 2 checkbox filters in my datavisualisation? :)

tomvandijk

Hello all, I want to have 2 checkbox filters in my processing datavisualization. The checkboxes must filter the numbers (nr) from 1-7 (1checkbox) and numbers 8-13 (1 checkbox). The problem is: I have no clue how to do this. Is there anyone who can help me with this?

 Table table;
   String[] land={};
   float[] bbp = {};
   int[] nr = {};
   float r = random(250);



void setup (){
    table = loadTable("data.csv", "header");
    for (TableRow row : table.rows()) {
       land = append(land, row.getString("land"));
       bbp = append(bbp, row.getFloat("bbp"));
       nr = append(nr, row.getInt("nr"));
       println(land.length);
 }
  size(2000,600);
  background(240);
  smooth();
  stroke(50,50,50,50);
  strokeWeight(2);
 }

  void draw (){
  background(240);
  line(0, height/2, width, height/2);
  for(int i=0; i< nr.length;i++){
           float c = nr[i]*12;
  fill(250, c,c,200);
  ellipse(nr[i]*110 -20 , height/2, bbp[i]*3, bbp[i]*3);
  fill(30);

pushMatrix();
translate(nr[i]*110 -20, height/2 - bbp[i]/2);
rotate(radians(-45));
text(land[i],-50 ,50);
text(bbp[i],10,10);
textSize(18);
popMatrix();

text("BBP per land plaats 1t/m13",10 ,height/3);
text("Bron: https://nl.wikipedia.org/wiki/Lijst_van_landen_naar_bbp_per_hoofd_van_de_bevolking", height/2, width/4);
smooth();
}
    }

Data (csv): land,bbp,nr

Luxemburg,104.5,13 Noorwegen,79.1,12 Qatar,68.9,11 Zwitserland,67.6,10 Denemarken,56.1,9 Ierland,51.4,8 Nederland,48.2,7 Verenigde Arabische Emiraten,46.9,6 Verenigde Staten, 46.4,5 Oostenrijk,46.0,4 Australie,45.6,3 Finland,44.5,2 Zweden,44.0,1

benja

OK, first some general advice: You don't need smooth(), because it is default. And if you use it, it doesn't make sense to call it multiple times. Same with textSize(), if it doesn't change, just put it into setup().

Then to adress your problem, if i understand it correctly:

• You would need two variables (boolean) that store if the first or second part of your data shall be displayed.

• You would have to draw two buttons.

• If the mouse gets pressed you have to check if the position is over one of the buttons. If yes, you can toggle one of the variables between true and false.

• Last step would then be to draw your circles depending on the state of the variables and their nr-value.

benja

Spoiler-alert: Here is a working example, so if you want to figure it out for yourself, you can maybe only read the post above.

Table table;
String[] land={};
float[] bbp = {};
int[] nr = {};

// booleans to store the button-states
boolean showFirstPart, showSecondPart;
// variables for button drawing
int b1x = 20;
int b1y = 20;
int b2x = 100;
int b2y = 20;
int btnSize = 20;

void setup () {
  size(2000, 600);

  table = loadTable("data.csv", "header");
  for (TableRow row : table.rows()) {
    land = append(land, row.getString("land"));
    bbp = append(bbp, row.getFloat("bbp"));
    nr = append(nr, row.getInt("nr"));
    println(land.length);
  }
  background(240);
  stroke(50, 50, 50, 50);
  strokeWeight(2);
  textSize(18);
}

void draw () {
  background(240);

  drawButtons();

  line(0, height/2, width, height/2);

  for (int i=0; i< nr.length; i++) {
    // check if circle is enabled
    if ( (showFirstPart && nr[i]<7) || showSecondPart && nr[i] >=7) {
      drawCircle(i);
    }
  }

  fill(30);
  text("BBP per land plaats 1t/m13", 10, height/3);
  text("Bron: https://nl.wikipedia.org/wiki/Lijst_van_landen_naar_bbp_per_hoofd_van_de_bevolking", height/2, width/4);
}

// this functions does the cirlce drawing
void drawCircle(int index) {
  float c = nr[index]*12;
  fill(250, c, c, 200);
  ellipse(nr[index]*110 -20, height/2, bbp[index]*3, bbp[index]*3);

  fill(30);
  pushMatrix();
  translate(nr[index]*110 -20, height/2 - bbp[index]/2);
  rotate(radians(-45));
  text(land[index], -50, 50);
  text(bbp[index], 10, 10);
  popMatrix();
}

// this function draws the buttons
void drawButtons() {
  // first button
  if (showFirstPart) fill(0);
  else noFill();
  rect(b1x, b1y, btnSize, btnSize);

  // second button
  if (showSecondPart) fill(0);
  else noFill();
  rect(b2x, b2y, btnSize, btnSize);
}

// this function is called when a mouse-button was pressed
void mousePressed() {
  // check if mouse-position is over first button
  if (mouseX >b1x && mouseX<b1x+btnSize && mouseY > b1y && mouseY<b1y+btnSize) {
    showFirstPart = !showFirstPart;
  }
  // check if mouse-position is over second button
  if (mouseX >b2x && mouseX<b2x+btnSize && mouseY > b2y && mouseY<b2y+btnSize) {
    showSecondPart = !showSecondPart;
  }
}

I added some functions to make it more structured.

tomvandijk

Thank you so much! I'll try to figure it out myself with this.