How can I place the dates of my data inside my ellipses?

Hello, I’m writing the code so the ellipses fall in to a grid according to the data of my steps. This code has them all bunched up, but it’s in the works so I’m leaving it as I write the data so that’s okay! So my question is, how can I get the dates inside my ellipses to label them? Here is the code right now:

Table data;
int cols = 14;
int rows = 4;
  // 40 wide, 25 down
  // determin our rows and columns
 float circleScalar = 1;
 // ^ Adjusts the fit of circles in the grid

  

void setup(){
  size(800,800);
  background(255);
  data = loadTable("Steps - Data.- 2019+2020.csv", "header");
  noLoop();

  // data counting variable to move down the rows 1, 2, 3, 4...
 
}

void draw(){
   scale(0.5);
  // width divided by columns
float grid = width/cols;
translate(grid/2, grid/2);
fill(0,64);
noStroke();
int index = 0;
 // for int y = 0, y is less than rows
  for (int y = 0; y < rows; y++) {
    for (int x = 0; x < cols; x++) {
      println(index);
      TableRow row = data.getRow(index);
      float d = row.getFloat("steps");
     float circleSize = getFixedCircleSize(d);
     ellipse(x*grid, y*grid - 0, circleSize, circleSize);
     // Multiplied to allow space underneath for text
     index++;
   
    }
  }
 fill(#FA5B5B,64);
  float gridT = width/cols;
translate(gridT/2, gridT/2);
  int indexT = 0;
 // for int y = 0, y is less than rows
  for (int y = 0; y < rows; y++) {
    for (int x = 0; x < cols; x++) {
      TableRow row = data.getRow(indexT);
      float d = row.getFloat("steps2");
     float circleSize = getFixedCircleSize(d);
     ellipse(x*gridT, y*gridT - 0, circleSize, circleSize);
     // Multiplied to allow space underneath for text
     indexT++;
   
    }
  }
}

// Helper function
float getFixedCircleSize(float _size){
  float s = sqrt(_size)*circleScalar;
  return s;
  
}

And here is the data so far, incase that helps:
“date”,“steps”,“date2”,“steps2”
“01/01/19”,“6152”,“01/01/20”,“2093”
“02/01/19”,“4511”,“02/01/20”,“5523”
“03/01/19”,“2315”,“03/01/20”,“3421”
“04/01/19”,“2105”,“04/01/20”,“2198”
“05/01/19”,“10512”,“05/01/20”,“6877”
“06/01/19”,“12871”,“06/01/20”,“4437”
“07/01/19”,“15831”,“07/01/20”,“8934”
“08/01/19”,“8754”,“08/01/20”,“7643”
“09/01/19”,“12872”,“09/01/20”,“13554”
“10/01/19”,“15506”,“10/01/20”,“6834”
“11/01/19”,“14291”,“11/01/20”,“4355”
“12/01/19”,“18157”,“12/01/20”,“9082”
“13/01/19”,“20294”,“13/01/20”,“10253”
“14/01/19”,“5267”,“14/01/20”,“9082”
“15/01/19”,“13782”,“15/01/20”,“10982”
“16/01/19”,“11393”,“16/01/20”,“15677”
“17/01/19”,“21590”,“17/01/20”,“18992”
“18/01/19”,“17923”,“18/01/20”,“14334”
“19/01/19”,“12312”,“19/01/20”,“15882”
“20/01/19”,“18764”,“20/01/20”,“6720”
“21/01/19”,“20812”,“21/01/20”,“1022”
“22/01/19”,“13297”,“22/01/20”,“9920”
“23/01/19”,“13783”,“23/01/20”,“11988”
“24/01/19”,“2587”,“24/01/20”,“15566”
“25/01/19”,“2226”,“25/01/20”,“6573”
“26/01/19”,“14362”,“26/01/20”,“9989”
“27/01/19”,“14963”,“27/01/20”,“5456”
“28/01/19”,“10427”,“28/01/20”,“10989”
“29/01/19”,“18157”,“29/01/20”,“9732”
“30/01/19”,“20294”,“30/01/20”,“3589”
“31/01/19”,“5267”,“31/01/20”,“2900”
“01/02/19”,“18764”,“01/02/20”,“23098”
“02/02/19”,“14570”,“02/02/20”,“12390”
“03/02/19”,“20324”,“03/02/20”,“5875”
“04/02/19”,“16378”,“04/02/20”,“2895”
“05/02/19”,“9355”,“05/02/20”,“15772”
“06/02/19”,“6135”,“06/02/20”,“9872”
“07/02/19”,“17318”,“07/02/20”,“7834”
“08/02/19”,“19107”,“08/02/20”,“35876”
“09/02/19”,“190”,“09/02/20”,“23478”
“10/02/19”,“0”,“10/02/20”,“932”
“11/02/19”,“13293”,“11/02/20”,“6324”
“12/02/19”,“11419”,“12/02/20”,“4786”
“13/02/19”,“19441”,“13/02/20”,“12839”
“14/02/19”,“26863”,“14/02/20”,“12987”
“15/02/19”,“14447”,“15/02/20”,“2677”
“16/02/19”,“19776”,“16/02/20”,“12634”
“17/02/19”,“1907”,“17/02/20”,“15562”
“18/02/19”,“12376”,“18/02/20”,“2793”
“19/02/19”,“6539”,“19/02/20”,“20193”
“20/02/19”,“11945”,“20/02/20”,“24776”
“21/02/19”,“14922”,“21/02/20”,“12479”
“22/02/19”,“309”,“22/02/20”,“7625”
“23/02/19”,“12671”,“23/02/20”,“8815”
“24/02/19”,“27911”,“24/02/20”,“12890”
“25/02/19”,“8423”,“25/02/20”,“21987”
“26/02/19”,“24927”,“26/02/20”,“12089”
“27/02/19”,“9923”,“27/02/20”,“7862”
“28/02/19”,“8341”,“28/02/20”,“30874”
“01/03/19”,“20768”,“01/03/20”,“12397”
“02/03/19”,“8341”,“02/03/20”,“23902”
“03/03/19”,“5269”,“03/03/20”,“19834”
“04/03/19”,“9276”,“04/03/20”,“7832”
“05/03/19”,“3041”,“05/03/20”,“12373”
“06/03/19”,“27524”,“06/03/20”,“30293”
“07/03/19”,“13361”,“07/03/20”,“12442”
“08/03/19”,“21347”,“08/03/20”,“98370”
“09/03/19”,“20426”,“09/03/20”,“31238”
“10/03/19”,“25229”,“10/03/20”,“29487”
“11/03/19”,“23149”,“11/03/20”,“23769”
“12/03/19”,“22093”,“12/03/20”,“12341”
“13/03/19”,“18844”,“13/03/20”,“12777”
“14/03/19”,“13627”,“14/03/20”,“35234”
“15/03/19”,“13866”,“15/03/20”,“37234”
“16/03/19”,“19482”,“16/03/20”,“1928”
“17/03/19”,“23045”,“17/03/20”,“1093”
“18/03/19”,“25263”,“18/03/20”,“1223”
“19/03/19”,“14758”,“19/03/20”,“841”
“20/03/19”,“23919”,“20/03/20”,“1050”
“21/03/19”,“4136”,“21/03/20”,“1221”
“22/03/19”,“26544”,“22/03/20”,“434”
“23/03/19”,“5495”,“23/03/20”,“887”
“24/03/19”,“13553”,“24/03/20”,“302”
“25/03/19”,“7811”,“25/03/20”,“4234”

I’m going to be doing this until they reach October :slight_smile:
Thanks in advance for any help!

1 Like

Like this you read something from your row. Now you want to read the date.

Try String s1=row.getString("date");

Then you can use text(s1,x*gridT,y*gridT);

Besides, you could make it so that when the mouse hovers over one circle, it shows a text box of the data of this circle.

Also since each line has 2 steps you could show 2 circles half transparent in the spot. Direct comparison.

To go only to October you can use split() command on the date String and if its int is >= 10 say break; to leave the for loop

Chrisir

1 Like

Thank you so much for the help! I can’t work out where to put the text though, I’ve found a place it works, but it changes the circle colours (I want it to be black for now), otherwise if I put it in other areas it says it can’t find “row”, or that it doesn’t exist.

Table data;
//lerp colour
color sc = #FF9BCD;
color ec = #9BF1FF;
//color sc = #00FF63;
//color dc = #FF9100;

int cols = 17;
int rows = 17;
  // 40 wide, 25 down
  // determin our rows and columns
 float circleScalar = 0.22;
 // ^ Adjusts the fit of circles in the grid


  

void setup(){
  size(1000,800);
  background(#F8FF9B);
  data = loadTable("Steps - Data.- 2019+2020.csv", "header");
  noLoop();

  // data counting variable to move down the rows 1, 2, 3, 4...
 
}

void draw(){
    colorMode(HSB);
   scale(1);
  // width divided by columns
float grid = width/cols;
translate(grid/2, grid/2);
//fill(0,64);
noStroke();
int index = 0;
 // for int y = 0, y is less than rows
  for (int y = 0; y < rows; y++) {
    for (int x = 0; x < cols; x++) {
      println(index);
      TableRow row = data.getRow(index);
      float d = row.getFloat("steps");
     float circleSize = getFixedCircleSize(d);
     
      
     ellipse(x*grid, y*grid, circleSize, circleSize);
     // Multiplied to allow space underneath for text
       float steps = row.getFloat("steps");
     index++;
 
          float mc = map(steps, 20000, 30000, 0, 9999);
        color lc = lerpColor(sc, ec, mc);
        fill(lc,150);
         float s = row.getFloat("steps");
        if (s > 10000) {
          stroke(255);
        } else { 
          if (s < 30000);
       noStroke();
    
        }

        
        // steps2 data
        int indexT = 0;
         float dT = row.getFloat("steps2");
     float circleSizeT = getFixedCircleSize(dT);
     rectMode(CENTER);
     rect(x*grid, y*grid - 0, circleSizeT, circleSizeT);
      float steps2 = row.getFloat("steps2");
     // Multiplied to allow space underneath for text
     indexT++;
      float mcmc = map(steps2, 20000, 30000, 0, 9999);
   color lclc = lerpColor(ec, sc, mcmc);
        fill(lclc,150);
          float st = row.getFloat("steps");
        if (st > 10000) {
          stroke(255);
        } else { 
          if (st < 30000);
       noStroke();
        }
             fill(0);
         String s1 = row.getString("date");
      text(s1,x*grid,y*grid);
      textSize(5);
     
        }
   
    }
  }




// Helper function
float getFixedCircleSize(float _size){
  float s = sqrt(_size)*circleScalar;
  return s;
  
}

Yeah, I forgot

before ellipse say fill(0);

AND before text() say fill(255);

you need this so each command has the right fill