images representing parts of dataset

nicelyfriedwing

I'm new to processing and I'm working with a dataset (.csv). The data set looks like this: http://imgur.com/a/e0ZcO

I am trying to represent the total time spent on the phone (duration) per day, with an image - the PShape's in the code below. I'm having trouble figuring out how to have the image be representative of a day's worth of minutes rather than each call, which is what it is doing now.

Table data; //defining the Table class
int rowCount;

PShape snowOne, snowTwo, snowThree, snowFour, snowFive;

String callMonth;
int callDay, callDuration;

void setup() {
  size(760, 700);
  snowOne = loadShape("snow1.svg");
  snowTwo = loadShape("snow2.svg");
  snowThree = loadShape("snow3.svg");
  snowFour = loadShape("snow4.svg");
  snowFive = loadShape("snow5.svg");
  data = loadTable("dataSet.csv", "header"); //loading the dataset with its headers
  rowCount = data.getRowCount();
}

void draw() {
  background(255);
  for (int row = 0; row < rowCount; row = row + 1) { //getting the data rows
    callMonth = data.getString(row,"month");
    callDay = data.getInt(row,"day");
    callDuration = data.getInt(row,"duration");

    if(callDuration > 0 && callDuration < 10){ //1-10 min
      shape(snowOne, row*110, 35, 100, 100);
    } 
      else if(callDuration < 0) {
        ellipse(row*110, 35, 100, 100); //no calls made
      }
      else if(callDuration > 11 && callDuration < 20){ //11-20 min

        shape(snowTwo, row*110, 35, 100, 100);
      }
      else if(callDuration > 21 && callDuration < 30){ //21-30 min
        shape(snowThree, row*110, 35, 100, 100);
      }
      else if(callDuration > 31 && callDuration < 40){ //31-40 min
        shape(snowFour, row*110, 35, 100, 100);
      }
      else if(callDuration > 41) {
        shape(snowFive, row*110, 35, 100, 100); //41+ min
      }

  }
}
}

Another thing I have trouble with is containing or "breaking" the row so that it fits on the window. Right now it is mapping the data in a linear line,rather than breaking it into 5 which is what I want(http://imgur.com/a/kPBvi)

Thanks! If this confusing I apologize.

koogs

Your row is actually a column.

Try (row * 110) % width, 35 + 110 * (row / (width / 110)) for your coordinates.

User local variables rather than cutting and pasting that 5 times. That way, when it's wrong or you want to change the size / spacing, you only have to change it in one place.

(Untested)

koogs

testing that. it was close enough

int sz = 110; // ellipse size
int offset = 55; // offset from top and left
int cols = width / sz; // this isn't quite right, doesn't include offset
int x = offset + sz * (row % cols);
int y = offset + sz * (row / cols);

...
ellipse(x, y, 100, 100);

you can twiddle with the sz and offset values

BUT, what happens in your code if the data returns 0? or 10 or 11? or 20 or 21? or 30 or 31? or 40 or 41?

nicelyfriedwing

you can twiddle with the sz and offset values

I tried it out with this code, but all my images seem to have grouped up into the top left corner?

Trying (row * 110) % width, 35 + 110 * (row / (width / 110)) for the coordinates worked well, there was just an offset at the beginning and middle of each row. http://imgur.com/a/JTLzD

koogs

I tried it out with this code, but all my images seem to have grouped up into the top left corner?

Post your code. We need to see your changes. We also need to know how big the images are, and a sample of the data preferably not as an image that we need to retype.

nicelyfriedwing

Post your code

Here is the code:

    Table data; //defining the Table class
    int rowCount, row, cols;

    PShape snowOne, snowTwo, snowThree, snowFour, snowFive;

    String callMonth, monthCheck, dayCheck;
    int callDay, callDuration, duration;

    void setup() {
      size(760, 700);
      snowOne = loadShape("snow1.svg");
      snowTwo = loadShape("snow2.svg");
      snowThree = loadShape("snow3.svg");
      snowFour = loadShape("snow4.svg");
      snowFive = loadShape("snow5.svg");
      data = loadTable("dataSet.csv", "header"); //loading the dataset with its headers
      rowCount = data.getRowCount();
    }

    void draw() {
    background(255);

    int sz = 110; // ellipse size
    int offset = 10; // offset from top and left
    int cols = width / sz; // this isn't quite right, doesn't include offset
    int x = offset + sz * (row % cols);
    int y = offset + sz * (row / cols);

      for (int row = 0; row < rowCount; row = row + 1) { //getting the data rows
        callMonth = data.getString(row,"month");
        callDay = data.getInt(row,"day");
        callDuration = data.getInt(row,"duration");

        if(callDuration < 0) { //no calls made
          ellipse(x, y, 100, 100);
        } 
          else if(callDuration > 0 && callDuration < 10){ //1-10 min
            shape(snowOne, x, y, 100, 100);
          } 
          else if(callDuration > 10 && callDuration < 20){ //11-20 min
            shape(snowTwo, x, y, 100, 100);
          }
          else if(callDuration > 20 && callDuration < 30){ //21-30 min
            shape(snowThree, x, y, 100, 100);
          }
          else if(callDuration > 30 && callDuration < 40){ //31-40 min
            shape(snowFour, x, y, 100, 100);
          }
          else if(callDuration > 40) {
            shape(snowFive, x, y, 100, 100); //41+ min
          }

      }
    }

The images are svg's which I have sized to 100x100 and here is a sample of my dataset: http://www.filedropper.com/dataset_1