Data visualization: How-to generate moving particles by data, or draw a tree by data?

gladysloh_24

I am trying to do 2 variations of visualizing the same data and having problems. I got a source code of a tree from openprocessing, but I don't want it to be generated by random values but instead from a data in a TSV. The ellipses are supposed to represent the data shown. Also, I'm hoping that when the mouse hover over each individual ellipse, the data will be displayed but my code doesn't work. The table is a mortality data, the float numbers are at column 3. This is the link to the TSV file I'm using for the data.

int maxBranch = 5;
float maxBranchAngle = 60;
float minBranchLength = 20;
float maxBranchLength = 60;

Table mtl; //mtl = mortality data
int rowCount;
int d = 10;
PFont labelFont;

String statString = "Mortality";

void setup() {
  size(displayWidth, displayHeight);
  stroke(0,255,0,128);
  fill(255,128);
  strokeWeight(1);
  smooth();
  mtl = new Table("mortality3.tsv"); 
    rowCount = mtl.getRowCount();
  println("rowCount = " + rowCount);
  labelFont = loadFont("AdobeHebrew-Bold-48.vlw");

}

void draw() {
  background(0);
  line(width/2,height,width/2,height-20);
  Branch(width/2,height-20,-90,8);
  noLoop();
  }


void Branch(float rootX, float rootY, float direction, float depth){
  if (depth <= 0) {
    ellipse(rootX, rootY, 5, 5);
    return;
  }//how to replace with data info so that ellipses follow the float values in table?
  int branches = int(random(1,maxBranch));
  for (int i = 0; i < branches; i++) {
    float newBranchAngle = random(direction-maxBranchAngle/2, direction+maxBranchAngle/2);
    if (newBranchAngle >= 360) {
      newBranchAngle -= 360;
    }
    else if (newBranchAngle < 0) {
      newBranchAngle += 360;
    }
    float branchLength = random(minBranchLength, maxBranchLength);
    float newX = rootX+cos(radians(newBranchAngle)) * branchLength;
    newX -= 1;
    //rootX+cos(radians(newBranchAngle)) * branchLength;
    //500 + mtl.getFloat(i,3))+cos(radians(newBranchAngle)) * branchLength;
    float newY = rootY+sin(radians(newBranchAngle)) * branchLength;
    line(rootX, rootY, newX, newY);
    Branch(newX, newY, newBranchAngle, depth-1);


  for (int row = 0; row < rowCount; row++) {
    // State names??????how
    String state = mtl.getString(row, 0);
       if(dist(rootX, rootY, mouseX, mouseY) < (d/2+1)) 
           statString = "Country" +mtl.getString(i, 0)  +
                  mtl.getString(i, 1) + " Year " + 
                    mtl.getString(i, 2);
                    text(state, width/2, height/2);
  }
}
  }



void mouseClicked() {
  loop();
}

Another variation I'm attempting to try is using moving particles to generate this data. I'm not sure which is more doable, if I could get some advice which is more feasible, then I will just focus on one. The same thing, would like the particle to generate the text of the data when hovered over.

My particle code which was sourced here as well:

        ArrayList<Particle> parts = new ArrayList();
        float r;
        float mx, my;

        Table mtl;
        int rowCount;

        PFont labelFont;
        color k;
        color rcolor() { 
          return(color(random(255), random(255), random(255)));
        }

        void setup() {
      size(displayWidth, displayHeight);
      ellipseMode(CENTER);
      mtl = new Table("mortality3.tsv");
      rowCount = mtl.getRowCount();
      println("rowCount = " + rowCount);
      labelFont = loadFont("ACaslonPro-Semibold-48.vlw");
      int n = 936;
      for ( int i=0; i < n; i++) {
        println(getfloat(i, 3);
        parts.add( new Particle( random(width), random(height), rcolor() ) );
      }
      noStroke();
    }

    void draw() {
      background(0);
      for ( int i=0; i < parts.size (); i++) {
        parts.get(i).draw();
      }
      if (mousePressed) {
        r++;
        fill(k, 10);
        stroke(k);
        ellipse(mx, my, r*2, r*2);
      }
    }

    void mousePressed() {
      mx=mouseX;
      my=mouseY;
      k = rcolor();
      r=0;
    }

    void mouseReleased() {
      for ( int i=0; i < parts.size (); i++) {
        parts.get(i).joinZone(mx, my, r, k);
      }
    }

    class Particle {
      float px, py, vx, vy;
      color c;
      boolean isZoned;
      float zx, zy, zr;
      color zc;
      Particle(float ipx, float ipy, color ic) { 
        px=ipx;
        py=ipy;
        vx = random(-1, 1);
        vy = random(-1, 1);
        c=ic;
        isZoned = false;
      }

      void move() {
        float tpx = px;
        float tpy = py; 
        px+=vx;//random(-1, 1); 
        py+=vy;//random(-1, 1);
        px+=width;
        py+=height;
        px%=width;
        py%=height;
        if (isZoned) {
          if (dist(px, py, zx, zy)>zr) {
            px = tpx;
            py = tpy;
            vx = random(-1, 1);
            vy = random(-1, 1);
          }
          if (dist(px, py, zx, zy)>zr) {
            if (px>zx)px--;
            if (px<zx)px++;
            if (py>zy)py--;
            if (py<zy)py++;
          }
        }
      }
      void draw() {
        move();
        fill(c);
        if (isZoned) fill(zc);
        noStroke();
        rect(px, py, 5, 5);
        //    if ( random(1) < 0.01 ) {
        //    isZoned = false;
        //}
      }
      void joinZone(float izx, float izy, float izr, color izc) {
        if (dist(px, py, izx, izy)<izr) {
          zx = izx;
          zy = izy;
          zr = izr;
          zc = izc;
          isZoned = true;
        }
      }
    }

Thank you! Much help will be appreciated.