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
}