Want columns to get thinner, but they get on top of each other

Processing Coding Questions
1

Hello there!

So, I want the columns to get thinner if I add more rows to the table data, and also to preserve a distance between themselves of 10 units, but my columns get on top of each other if I add more than 12 rows of data

Right now, less than 12 rows is perfect for what I have, but more than that I’d like them to do what I described above.

Here is the code I am working on:

// Import the CSV file
Table data;

void setup() {
  size(850, 600);
  background(255);
  data = loadTable("data.csv", "header");
  println(data.getRowCount());
  // Set the y axis range
  int lastNrofStd = data.getInt(data.getRowCount()-1, "students");
  int yMin = 0;
  int yMax = lastNrofStd + 4000;
  int yStep = 2000;
  
  // Set the x axis range
  int firstYear = data.getInt(0, "year");
  int lastYear = data.getInt(data.getRowCount()-1, "year");
  int xMin = firstYear;
  int xMax = lastYear;
  int xStep = 1;
  
  // Draw the x and y axis
  drawAxis(xMin, xMax, xStep, yMin, yMax, yStep, 50, 50);
  
  // Draw the stacked columns
  for (int i = 0; i < data.getRowCount(); i++) {
    int year = data.getInt(i, "year");
    //int students = data.getInt(i, "students");
    int men = data.getInt(i, "men");
    int women = data.getInt(i, "women");
    
    // Calculate the heights of the stacks
    float menHeight = map(men, yMin, yMax, 0, height - 100);
    float womenHeight = map(women, yMin, yMax, 0, height - 100);
    
    // Draw the stacks    
    fill(0, 0, 255);
    rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight, (width - 180)/12, menHeight);  // Decrease the width of the columns to make room for the right padding
    fill(255, 0, 0);
    rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight - womenHeight, (width - 180)/12, womenHeight);  // Decrease the width of the columns to make room for the right padding
    
  }
}

void draw(){
}

void drawAxis(int xMin, int xMax, int xStep, int yMin, int yMax, int yStep, int paddingX, int paddingY) {
  
  // Draw the x axis
  stroke(0);
  line(paddingX, height - paddingY, width - paddingX - 50, height - paddingY);  // Decrease the length of the x axis to make room for the right padding
  for (int x = xMin; x <= xMax; x += xStep) {
    float xPos = map(x, xMin, xMax, paddingX, width - paddingX - 50);  // Decrease the range of the x axis to make room for the right padding
    line(xPos, height - paddingY, xPos, height - paddingY + 10);
    fill(0);
    textSize(12);
    text(x, xPos + 20, height - paddingY + 20);
  }
  
  // Draw the y axis
  stroke(0);
  line(paddingX, paddingY, paddingX, height - paddingY);
  for (int y = yMin; y <= yMax; y += yStep) {
    float yPos = map(y, yMin, yMax, height - paddingY, paddingY);
    line(paddingX - 5, yPos, paddingX, yPos);
    if (y>=10000) {
      text(y, paddingX - 40, yPos + 4);
    } else {
      text(y, paddingX - 35, yPos + 4);
    }
  }
}

And here the csv data that I am using

year,students,men,women
2011,11147,5225,5922
2012,12158,5516,6642
2013,13241,5931,7310
2014,14316,6256,8060
2015,15083,6364,8719
2016,16088,6725,9363
2017,16740,6995,9745
2018,17695,7247,10448
2019,18351,7528,10823
2020,18469,7527,10942
2021,18019,7392,10627
2022,17372,7243,10129

Till there, all good, but if I add for example:

2023,17372,7243,10129
2024,17372,7243,10129
2025,17372,7243,10129

It doesn’t look as good anymore

I know I have to use an if-else (and maybe a for-loop too) but I’m not sure how to procede.

    if (data.getRowCount() < 12) {
      fill(0, 0, 255);
      rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight, (width - 180)/12, menHeight);  // Decrease the width of the columns to make room for the right padding
      fill(255, 0, 0);
      rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight - womenHeight, (width - 180)/12, womenHeight);  // Decrease the width of the columns to make room for the right padding
    } else {
      fill(0, 0, 255);
      rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight, (width - 180)/12, menHeight);  // Decrease the width of the columns to make room for the right padding
      fill(255, 0, 0);
      rect(map(year, xMin, xMax, 50, width - 100), height - 50 - menHeight - womenHeight, (width - 180)/12, womenHeight);  // Decrease the width of the columns to make room for the right padding
    }
2

instead of using 12 here

 menHeight, (width - 180)/12,

you can use

data.getRowCount()

like here:

    // Draw the stacks    
    fill(0, 0, 255);
    rect(map(year, xMin, xMax, 59, width - 100), height - 50 - menHeight, (width - 180)/data.getRowCount(), menHeight);  // Decrease the width of the columns to make room for the right padding
    fill(255, 0, 0);
    rect(map(year, xMin, xMax, 59, width - 100), height - 50 - menHeight - womenHeight, (width - 180)/data.getRowCount(), womenHeight);  // Decrease the width of the columns to make room for the right padding
1 Like
3

The solution to all my life problems was just too easy to solve… Too bad this isn’t Reddit, otherwise I would habe already given you gold.

2 Likes