Trying to visualize data

[JHProcess]

It’s me again Hi! I’m rebuilding the code and I’m getting an error that my CSV

/tsv can not be read.

[Chrisir]

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.

[JHProcess]

I didn’t have the file in the folder with my sketch lol, thanks!

[JHProcess]

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);
}
}

[Chrisir]

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)

[JHProcess]

did you mean like this?

[Chrisir]

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?

[glv]

Hello @JHProcess,

@JHProcess

apologizes for the formatting issues

Please read:
https://discourse.processing.org/faq#format-your-code

:)

[JHProcess]

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));

}

[Chrisir]

@JHProcess

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()

[JHProcess]

so for the rect where would i put it because this is all i got when i add the other floats

[Chrisir]

Please make a rect for d1 and one for d2

Your first rect statement is obsolete

[JHProcess]

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) ;
    
  }
}

[Chrisir]

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!

[JHProcess]

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);
  }
}