How do I make these rows and columns (csv to grid) work?

Processing Coding Questions
1

Hello, I’m trying to make a grid that looks a bit like this photo, except I’m using different data which corresponds to the days of the year. I’ve noticed it works if I use something like
“int rows = 10;
int cols = 5;”

however whenever I do anything higher than 10 it crashes. I thought maybe doing
“int rows = 73;
int cols = 5;”
would work, since it’s 365 divided, but I’m having no luck.

Is anyone able to please help me? Thanks in advance! :slight_smile:

Here is the code:

`Table data;
int cols = 10;
int rows = 5;
// 40 wide, 25 down
// determin our rows and columns
float circleScalar = 0.1;
// ^ Adjusts the fit of circles in the grid

void setup(){
size(1000,600);
background(255);
data = loadTable(“FitBit Data - steps - 2019.csv”, “header”);
noLoop();
// data counting variable to move down the rows 1, 2, 3, 4…

}

void draw(){
// 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++) {
TableRow row = data.getRow(index);
float d = row.getFloat(“steps”);
float circleSize = getFixedCircleSize(d);
ellipse(xgrid, ygrid*1.5, circleSize, circleSize);
// Multiplied to allow space underneath for text
index++;

}

}
}

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

}`

And here is the sort of thing I’d like it to look like:

Screenshot 2020-10-22 at 13.21.01
Screenshot 2020-10-22 at 13.21.011998×1244 286 KB

2

I don’t have the table file (csv) so I work with a random size. But then it works.
So I assume your error has to do with the table.
In which line does the error occur? That’s important.

I guess it’s TableRow row = data.getRow(index); ?

Then you would read over the end of the file (read a line more than there is)

Are there 365 lines?

  • Basically, say println(index); before that line TableRow row = data.getRow(index); and check where it breaks

Make an if-clause inside the for loop if( index < data.getRowCount()) {…what you have here now…}
to prevent the code from being executed, when we read through the end of the file

(Sometimes those files have an empty line at its end. Bad. Crash.)

Warm regards,

Chrisir

P.S.

Here is my running code


Table data;

int cols = 73;
int rows = 5;

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

void setup() {
  size(1000, 600);
  background(255);
  data = loadTable("FitBit Data - steps - 2019.csv", "header");
  noLoop();
  // data counting variable to move down the rows 1, 2, 3, 4…
}

void draw() {
  // 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++) {
      // TableRow row = data.getRow(index);
      //float d = row.getFloat("steps");
      float d = random(9188); 
      float circleSize = getFixedCircleSize(d);
      stroke(0);
      ellipse(22+x*grid, 33+y*grid*1.5, 
        circleSize, circleSize);
      // Multiplied to allow space underneath for text
      index++;
    }
  }
}

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