# Trying to visualize data

**URL:** <https://discourse.processing.org/t/trying-to-visualize-data/39471>\
**Category:** Coding Questions\
**Created:** [October 28, 2022, 2:37pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471 "2022-10-28T14:37:19Z")\
**Posts on this page:** 15\
**Page:** 2

<div class="post-metadata">

**Author:** ![JHProcess](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JHProcess](https://discourse.processing.org/u/JHProcess)\
**Post date:** [October 29, 2022, 3:52pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/21 "2022-10-29T15:52:01Z")

</div>

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

 ![Screen Shot 2022-10-29 at 11.51.31 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/7/477d1347db0f2826ff8be7fd88a2b7a841f20fce.png)  
/tsv can not be read.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2022, 3:59pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/22 "2022-10-29T15:59:30Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![JHProcess](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JHProcess](https://discourse.processing.org/u/JHProcess)\
**Post date:** [October 29, 2022, 4:07pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/23 "2022-10-29T16:07:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JHProcess](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JHProcess](https://discourse.processing.org/u/JHProcess)\
**Post date:** [October 29, 2022, 4:26pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/24 "2022-10-29T16:26:34Z")

</div>

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

 ![Screen Shot 2022-10-29 at 12.23.49 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/d/a/da746370f67969debf1aa490f7ffc1399fa78575.jpeg)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2022, 5:09pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/25 "2022-10-29T17:09:05Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![JHProcess](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JHProcess](https://discourse.processing.org/u/JHProcess)\
**Post date:** [October 29, 2022, 6:45pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/26 "2022-10-29T18:45:07Z")

</div>

did you mean like this?

 ![Screen Shot 2022-10-29 at 2.44.42 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/0/3097a9a7a7a9342fffc871219c12db0900ab76f5.jpeg)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2022, 6:58pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/27 "2022-10-29T18:58:39Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 30, 2022, 11:44am UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/28 "2022-10-30T11:44:28Z")

</div>

Hello @JHProcess,

> [@JHProcess](#):
>
> apologizes for the formatting issues

Please read:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

`:)`

---

<div class="post-metadata">

**Author:** ![JHProcess](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JHProcess](https://discourse.processing.org/u/JHProcess)\
**Post date:** [October 30, 2022, 3:59pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/29 "2022-10-30T15:59:46Z")

</div>

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.

 ![Screen Shot 2022-10-30 at 11.57.24 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/c/3c83623abeef623405efae1f1170bc097c7cf364.jpeg)

```auto

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

```

}

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 30, 2022, 4:10pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/30 "2022-10-30T16:10:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JHProcess](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JHProcess](https://discourse.processing.org/u/JHProcess)\
**Post date:** [October 30, 2022, 4:49pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/31 "2022-10-30T16:49:51Z")

</div>

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

 ![Screen Shot 2022-10-30 at 12.32.14 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/9/f924ef0e60cf7b828385f1487afdd922bd2cc816.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 30, 2022, 4:56pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/32 "2022-10-30T16:56:38Z")

</div>

Please make a rect for d1 and one for d2

Your first rect statement is obsolete

---

<div class="post-metadata">

**Author:** ![JHProcess](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JHProcess](https://discourse.processing.org/u/JHProcess)\
**Post date:** [October 30, 2022, 5:16pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/33 "2022-10-30T17:16:46Z")

</div>

did you mean like this

```auto

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

```

 ![Screen Shot 2022-10-30 at 1.13.35 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/d/2dcedde41ef5d1c8cd9481f4ebce5e42aed92c16.jpeg)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 30, 2022, 5:21pm UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/34 "2022-10-30T17:21:09Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![JHProcess](https://avatars.discourse-cdn.com/v4/letter/j/e274bd/32.png) [@JHProcess](https://discourse.processing.org/u/JHProcess)\
**Post date:** [October 31, 2022, 7:51am UTC](https://discourse.processing.org/t/trying-to-visualize-data/39471/35 "2022-10-31T07:51:59Z")

</div>

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

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

```

 ![Screen Shot 2022-10-31 at 3.51.43 AM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/0/b0848c46dafdfa295fe2f02f966580390386d670.png)

[Previous page](https://discourse.processing.org/t/trying-to-visualize-data/39471.md?page=1)