Trying to visualize data

Hi, so far this project I’m stuck on trying to set up my data and how to put the numbers on the plane. My goal is to understand what function I need to put in to make the data from my google sheets become points on the window

Table myData; //create an instance of the Table class
int rowCount; //reserve a variable that will be used to track the number of rows of data in the external spreadsheet

//========================================================

void setup() {
size(600, 600);
drawSetup();

}

void draw() { } //setup an empty draw function - This will loop ongoing at the current frame rate as we wait for user intput

void drawSetup() {

myData = new Table(“Hopwood_VD_IGN_Games.tsv”); //5 gallon bucket
rowCount = myData.getRowCount();
println("rowCount = " + rowCount);

 background(#FFFFCD);
strokeWeight(5);    //the outline weight for the shapes
rectMode(CORNER); //default mode for shape placement // also can use center, and corners mode
//noStroke(); //turn on if you want to have no outlines

//========================================================
//========================================================
//Specify the number of shapes to draw
int numOfShapes = rowCount; //the number of shapes to draw

//For loop that contains the function call to the drawShape function
for (int i = 1 ; i < numOfShapes -1; i++) { //i represents the iteration in the loop, which ties directly to the index for the array, and also represents the shape number

int xPosition = myData.getInt(i, 0);
int yPosition = myData.getInt(i, 1);
int shapeWidth = myData.getInt(i, 2);
int shapeHeight = myData.getInt(i, 3);
String shapeColor = myData.getString(i, 4);
//String shapeType = myData.getString(i, 5);
//String shapeOutline = myData.getString(i, 6);

//Draw a shape dynamically using the array information for all shape information
 drawShape(xPosition, yPosition, shapeWidth, shapeHeight, shapeColor);    //function call and send parameters

}

}

//=================================================================================================================================

//=================================================================================================================================

//=================================================================================================================================
void drawShape(int xPOS, int yPOS, int shapeWidth, int shapeHeight, String shapeColor) {

println("xPOS data = " + xPOS);
//println("shapeType data = " + shapeType);

//Convert the datatypes from String to their proper type to be used by the draw functions
int newXPOS = int(xPOS);
int newYPOS = int(yPOS);
int newShapeWidth = int(shapeWidth);
int newShapeHeight = int(shapeHeight);

println(“** about to enter into draw shapes logic”);

1 Like

You can use point() command or circle ()

See reference

Also ellipse () and rect () are possible

Here its width and height can be different, when you want

1 Like

Not necessary, it’s already int (all four variables)

so with that already being set when i run it i still just have a plank screen, is there something else im missing?

1 Like

use
for (int i = 0 ; i < numOfShapes ; i++)

Are the int within screen size? Or like 10000?

You can say fill before the shapes, maybe it’s wrong color

Post entire code every time please

Not sure

Do you want loadTable??

What does println give you?

to give more context, my professor helped me with this during class on Wednesday but since then I’ve been confused on how to make the data from my tsv show up

1 Like

Post your entire code and the first 5 lines of the tsv file please

Here you can state header and tsv as options

When you have a table as a separate file, loadTable is your friend

|Name| Year |Critic_Score |User_Score |Total_Sold in millions|
|Animal Crossing: New Horizons|2020 |9| 5.5 |33.86|
|Assassin’s Creed IV: Black Flag|2013|8.54 |7.9| 15.44|
|Batman: Arkham City|2011 |9.36 |8.7 |14.02|
|BioShock|2007 |9.53 | 8.73 |6.05|
|Bloodborne|2015 |9.2 |8.9 |2|

Table myData; //create an instance of the Table class
int rowCount; //reserve a variable that will be used to track the number of rows of data in the external spreadsheet

//========================================================

void setup() {
size(600, 600);
drawSetup();

}

void draw() { } //setup an empty draw function - This will loop ongoing at the current frame rate as we wait for user intput

void drawSetup() {

myData = new Table(“Hopwood_VD_IGN_Games.tsv”); //5 gallon bucket
rowCount = myData.getRowCount();
println("rowCount = " + rowCount);

 background(#FFFFCD);
strokeWeight(5);    //the outline weight for the shapes
rectMode(CORNER); //default mode for shape placement // also can use center, and corners mode
//noStroke(); //turn on if you want to have no outlines

//========================================================
//========================================================
//Specify the number of shapes to draw
int numOfShapes = rowCount; //the number of shapes to draw

//For loop that contains the function call to the drawShape function
for (int i = 1 ; i < numOfShapes -1; i++) { //i represents the iteration in the loop, which ties directly to the index for the array, and also represents the shape number

int xPosition = myData.getInt(i, 0);
int yPosition = myData.getInt(i, 1);
int shapeWidth = myData.getInt(i, 2);
int shapeHeight = myData.getInt(i, 3);
String shapeColor = myData.getString(i, 4);
//String shapeType = myData.getString(i, 5);
//String shapeOutline = myData.getString(i, 6);

//Draw a shape dynamically using the array information for all shape information
 drawShape(xPosition, yPosition, shapeWidth, shapeHeight, shapeColor);    //function call and send parameters

}

}

//=================================================================================================================================

//=================================================================================================================================

//=================================================================================================================================
void drawShape(int xPOS, int yPOS, int shapeWidth, int shapeHeight, String shapeColor) {

//Now we simply have a single draw command (directly below) that is dynamically fed variable information instead of manually drawing with static information.

//This one line of code is now able to draw an infinite number of shapes and be configured any number of ways.
//What would happen if you wanted to even have the type of shape that is drawn be dynamically drawn between circles, triangles, and other custom shapes?
//Could you do this dynamically and have all this logic still optimized with a few lines of code?

println("xPOS data = " + xPOS);
//println("shapeType data = " + shapeType);

//Convert the datatypes from String to their proper type to be used by the draw functions
int newXPOS = int(xPOS);
int newYPOS = int(yPOS);
int newShapeWidth = int(shapeWidth);
int newShapeHeight = int(shapeHeight);

println(“** about to enter into draw shapes logic”);

/*
if (shapeType.equals(“rectangle”)) {
println(“!!! This should have just output a rectangle”);
rect(newXPOS, newYPOS, newShapeWidth, newShapeHeight); //xPOS (left/right), yPOS (up/down), width, height - draw xPos dynamically from the array and draw the index (position) from the pointer of the for loop
}

if (shapeType.equals(“ellipse”)){
println(“!!! This should have just output an ellipse”);
ellipse(newXPOS+25, newYPOS+25, newShapeWidth, newShapeHeight); //xPOS (left/right), yPOS (up/down), width, height - draw xPos dynamically from the array and draw the index (position) from the pointer of the for loop
}
*/

} //end of drawShape function

// You will see how this has shaved off several thousand lines of code down at this by combining the use of 2D arrays and loops.
// Next note how we can use this same draw function but pull from external data so the code is even more optimized

apologizes for the formatting issues

1 Like

I cannot see rectangle or ellipse in your data

Please try without if first!

Also these are commented out

Hmm your file doesn’t match what you do with it. For
Example the first item in the file is a string and you try load an int at column 0; also you try to load more columns (6) than there are (4).

Also confusing are the lines | . You want to get rid of these otherwise no int will work.
When you use loadStrings() you can use split() command with | but again you will rewrite your Sketch in this case.
So when it’s a short file just remove them in the text file. tsv means tabulator separated btw.

1 Like

i removed the commented out lines and still have a blank canvas

1 Like

Again show your entire code every time

I commented on your approach above




here are some screenshots of my screen

Now you deleted rect() altogether- this line was good

1 Like

rect(newXPOS, newYPOS, newShapeWidth, newShapeHeight);

1 Like

got rid of the ellipse function since that’s not what I’m using and now have an error for not having a shapeType

As I said: don’t use if, use plain rect or plain ellipse command

Besides:

You cannot retrieve data that is not in your table

The program was written for another table - see above

These lines are a problem: the 0 column is movie name, not an int and so on

To work with this you must rewrite

For example you can use the year as x position but to fit on the screen you must say - 1700 or use map() command

Same for the critiques points: it would be at top of the screen (and upside down) and therefore you must use map() to change it nicely

1 Like

I appreciate all your help, I’m going to rewrite this in a separate file from scratch. if I have any more problems ill make a new post!

1 Like

You are most welcome!

I am not at my computer right now, otherwise I could give better help.

Anyway. Maybe you can replace | by tabulator. Otherwise you need to remove the | before saying trim() and then convert to int or float.

You could display the movies using the year as x position after using map() on it and make a bar chart with the 3 numbers for each movie

1 Like