An Attempt was made…

Hello everyone, welcome back to another update of My Design Journey, and buckle up because this update is a juicy one.

We last left off with my project visualization having sketched out my initial idea, and now we’re jumping into the fun stuff. The first thing I had to do was format the existing CSV sheet so that Processing would be able to properly use the data. The original data sheet had some information before the data which was helpful to understand the census data, but wouldn’t work in Processing. The data was also listed vertically by continent, but I knew that re-formatting it to a horizontal format would make it easier down the line.

The original data sheet:

And the updated version:

And this was where the proverbial “poop” started hitting the fan. My original idea for my project (see my last article about that) was ever so slightly logistically impossible, so in the end I decided to in more of an abstract direction. The circles and continent would still stay the same but I decided to have them arranged like the data sheet; each continent was broken down into the countries, and the size of each country was based off the population. In Processing, I called my data sheet, and started by calling the first column as a test. One things I came to realize was that the data was varied alot, with some values in the millions and some in the hundreds. In order to make everything fit on my canvas, I multiplied every value called from the table by 0.00003 before it was drawn on the canvas. This was the result:

Surprisingly it turned out the way I’d envisioned it, but in the case of North America, looked a bit disappointing. So I kept going, and created for loops for each continent.

No we’re making progress. The visualization looked great, but this felt just a bit too abstract for a me, so after a few more tweaks, we had the final product: Diversity in Canada.

Overall, this project did toe the line of stress-induced breakout when my code refused to call the data sheet, but a huge shoutout goes to Tim and Anush, who came in very clutch with their advice and made for a very satisfying ending. I think this a good starting point to build onto, and I have a few ideas about how I can make that happen. As always, the final project code is included below, and yes I know I spelt “Caribbean” wrong:

//Variables
Table data;
float yPos=325;
float yPos2=325;
float yPos3=325;
float yPos4=325;
float yPos5=325;
float yPos6=325;
float yPos7=325;

void setup() {
size(1500, 1000);
background(0);
noFill();
ellipseMode(CENTER);
textAlign(CENTER);
textSize(14);
strokeWeight(3);

data = loadTable(“Book.csv”, “header”);
for (int i=0; i<data.getRowCount(); i++) {
TableRow row =data.getRow(i);
float NA = (row.getFloat(“North America”)*0.00003);
yPos=yPos + 10;
stroke(156, 146, 200);
fill(156, 146, 200, 60);
ellipse(280, yPos, NA, NA);
}
for (int i=0; i<data.getRowCount(); i++) {
TableRow row =data.getRow(i);
float NA = (row.getFloat(“Europe”)*0.00003);
yPos2=yPos2 + 8;
stroke(44, 105, 154);
fill(44, 105, 154, 60);
ellipse(753, yPos2, NA, NA);
}
for (int i=0; i<data.getRowCount(); i++) {
TableRow row =data.getRow(i);
float NA = (row.getFloat(“Carribean”)*0.00003);
yPos3=yPos3 + 10;
stroke(13, 179, 158);
fill(13, 179, 158, 60);
ellipse(1060, yPos3, NA, NA);
}
for (int i=0; i<data.getRowCount(); i++) {
TableRow row =data.getRow(i);
float NA = (row.getFloat(“South America”)*0.00003);
yPos4=yPos4 + 10;
stroke(239, 234, 90);
fill(239, 234, 90, 60);
ellipse(1082, yPos4, NA, NA);
}

for (int i=0; i<data.getRowCount(); i++) {
TableRow row =data.getRow(i);
float NA = (row.getFloat(“Africa”)*0.00003);
yPos5=yPos5 + 9;
stroke(241, 83, 83);
fill(241, 83, 83, 60);
ellipse(1109, yPos5, NA, NA);
}

for (int i=0; i<data.getRowCount(); i++) {
TableRow row =data.getRow(i);
float NA = (row.getFloat(“Asia”)*0.00003);
yPos6=yPos6 + 8;
stroke(242, 158, 76);
fill(242, 158, 76, 60);
ellipse(1217, yPos6, NA, NA);
}
for (int i=0; i<data.getRowCount(); i++) {
TableRow row =data.getRow(i);
float NA = (row.getFloat(“Oceania”)*0.00003);
yPos7=yPos7 + 10;
stroke(248, 169, 169);
fill(248, 169, 169, 60);
ellipse(1312, yPos7, NA, NA);
}
//Lines
stroke(255);
strokeWeight(1);
line(280, 205, 280, 300);
line(753, 205, 753, 300);
line(1060, 205, 1060, 300);
line(1082, 180, 1082, 300);
line(1109, 160, 1109, 300);
line(1217, 205, 1217, 300);
line(1312, 205, 1312, 300);

//Headers
fill(255);
text(“North America”, 280, 200);
text(“Europe”, 753, 200);
noStroke();
fill(0);
rect(1030, 190, 60, 20);
fill(255);
text(“Carribean”, 1060, 200);
noStroke();
fill(0);
rect(1050, 165, 100, 20);
fill(255);
text(“South America”, 1082, 175);
text(“Africa”, 1109, 150);
text(“Asia”, 1217, 200);
text(“Oceania”, 1312, 200);

saveFrame(“canvas.jpg”);
}