It’s me again Hi! I’m rebuilding the code and I’m getting an error that my CSV
/tsv can not be read.
The file is not really csv since the columns are not separated by a space or rather comma but by | .
This may cause the error when the path and file
name is correct. Make a test file with comma and test it.
The file must be in the data folder of your Sketch’s
folder.
I didn’t have the file in the folder with my sketch lol, thanks!
So I got to a point where in wondering how i would make this a bar graph visual. the video i was watching is using ellipses but that’s not the concept I’m going for.
Table table;
void setup(){
size(1200,900);
table = loadTable(“Hopwood_Visualizing data_ Copy of ign_contesters.tsv” ,“header”);
println(table.getString(1,0));
println(table.getFloat(1,1));
// println(table.getColumnCount());
//println(table.getRowCount());
}
void draw(){
background(255);
fill(0);
for (int d=0; d< table.getRowCount(); d++){
text(table.getString(d,0),100,25+ d*25);
}
}
Use rect to display the criticism numbers
Use year for the x position (map() the year to your screen)
Then draw the rect() like a bar chart (see above)
use map for the size (rect height)
Remember to hit ctrl-t in processing for auto format
I cannot see a different length of the charts, you forgot your map() command
Otherwise great progress here! Congratulations!
rect 180 is not enough, maybe 300?
I decided to add a screenshot of my google sheets graph and wanted to know what would be my next step in making this graph come to life.
Table table;
void setup() {
size(1200, 900);
table = loadTable("Hopwood_Visualizing data_ Copy of ign_contesters.tsv", "header");
println(table.getString(1, 0));
println(table.getFloat(1, 1));
textAlign(LEFT, CENTER);
// println(table.getColumnCount());
//println(table.getRowCount());
}
void draw() {
background(255);
fill(0);
for (int d=0; d< table.getRowCount(); d++) {
text(table.getString(d, 0), 100, 25+ d*25);
rect(300, 25+ d*25, table.getFloat(d, 1), table.getFloat(d, 1));
}
Try float d1 = map( table.getFloat(d, 1),
0,10,
0,100) ;
float d2= d1 + map( table.getFloat(d, 2),
0,10,
0,100) ;
Use rect multiple times with d1,d2, d3 and with different fill()
Please make a rect for d1 and one for d2
Your first rect statement is obsolete
did you mean like this
Table table;
void setup() {
size(1200, 900);
table = loadTable("Hopwood_Visualizing data_ Copy of ign_contesters.tsv", "header");
println(table.getString(1, 0));
println(table.getFloat(1, 1));
textAlign(LEFT, CENTER);
// println(table.getColumnCount());
//println(table.getRowCount());
}
void draw() {
background(255);
fill(0);
for (int d=0; d< table.getRowCount(); d++) {
text(table.getString(d, 0), 100, 25+ d*25);
rect(300, 25+ d*25, table.getFloat(d, 1), table.getFloat(d, 1));
rect(400, 25+ d*25, table.getFloat(d, 3), table.getFloat(d, 3));
float d1 = map( table.getFloat(d, 1), 0,10, 0,100) ;
float d2= d1 + map( table.getFloat(d, 2),0,10,0,100) ;
}
}
No…
Don’t ask, test it
As I said use d1 and d2 in 2 different rect commands
after defining d1 and d2
repeat for the 3rd bar
Good luck!
I doubt anyone is up at this time but i wanted to share my progress and how i would go about putting my labels for the different columns like critic score, user score, and total sold in millions
Table table;
void setup() {
size(1200, 900);
table = loadTable("Hopwood_Visualizing data_ Copy of ign_contesters.tsv", "header");
println(table.getString(1, 0));
println(table.getFloat(1, 1));
textAlign(LEFT, CENTER);
// println(table.getColumnCount());
//println(table.getRowCount());
}
void draw() {
background(255);
fill(0);
for (int d=0; d< table.getRowCount(); d++) {
fill(0);
text(table.getString(d, 0), 100, 25+ d*25);
fill(120,200,50,50);
rect(300, 25+ d*25, sqrt(table.getFloat(d, 1))*15, sqrt(table.getFloat(d, 1))*6);
fill(220,100,50,50);
rect(345, 25+ d*25, sqrt(table.getFloat(d, 2))*15, sqrt(table.getFloat(d, 2))*6);
fill(226,120,50,50);
rect(400, 25+ d*25, sqrt(table.getFloat(d, 3))*12, sqrt(table.getFloat(d, 3))*6);
}
}
