# I have questions about visualization data

**URL:** <https://discourse.processing.org/t/i-have-questions-about-visualization-data/20648>\
**Category:** Coding Questions\
**Created:** [May 8, 2020, 7:52pm UTC](https://discourse.processing.org/t/i-have-questions-about-visualization-data/20648 "2020-05-08T19:52:49Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ranaulubas](https://avatars.discourse-cdn.com/v4/letter/r/3ab097/32.png) [@ranaulubas](https://discourse.processing.org/u/ranaulubas)\
**Post date:** [May 8, 2020, 7:52pm UTC](https://discourse.processing.org/t/i-have-questions-about-visualization-data/20648/1 "2020-05-08T19:52:49Z")

</div>

this is a study that I have done using the data of two different months to visualize this data, I want to fill in between these two different data, but I have not been successful in this matter. I have something wrong with vertex or fill command.

```auto
float incr1, incr2, offset, h, a;

// Energy data
//Table dataHaziran;
//Table dataAralik;
Table[] tables = new Table[2];

int counterHaziran;
int counterAralik;

ArrayList<PVector> ptsHaziran = new ArrayList<PVector>();
ArrayList<PVector> ptsAralik = new ArrayList<PVector>();

void setup() {
  size(900, 400);
  background(#292929);
  //colorMode(HSB, 360, 100, 100, 100);
  colorMode(HSB, 255);

  //frameRate(20);

  // Energy data
  //dataHaziran = loadTable("ikitellihaziran.csv", "header");
  //dataAralik = loadTable("ikitelliaralik.csv", "header");
  
  tables[0] = loadTable("ikitellihaziran.csv", "header");
  tables[1] = loadTable("ikitelliaralik.csv", "header");

}

void draw() {

  // background opacıty
  //fill(0, 1);
  //noStroke();
  //rect(0, 0, width, height);

  //background(0);

  offset = - 0;
  //h = 0;
  //a = 255;

  strokeWeight(random(.3, 1));

  for (int i = 0; i < tables.length; i++) {
    stroke(h, 255, 255);
    noFill();

    beginShape();

    for (int x = 0; x <= width; x++) {
      // Energy data
      //// Haziran data
      //TableRow rowHaziran = dataHaziran.getRow(x);

      //// Haziran temperature data
      //float uretHaziran = rowHaziran.getFloat("Uretim");
      //float mappedUretHaziran = map(uretHaziran, 0, 100, 5, 50);
      //float mappedUretColorHaziran = map(uretHaziran, -5, 10, 44, 0);
      
            // Haziran data
      TableRow row = tables[i].getRow(x);

      // Haziran temperature data
      float uret = row.getFloat("Uretim");
      float mappedUret = map(uret, 0, 100, 5, 50);
      float mappedUretColor = map(uret, -5, 10, 44, 0);

      //vertex(x-200, (height+offset)*noise(incr1, x/incr2));
      vertex(x, offset+mappedUret);
    }

    endShape();

    offset += 200.;
    //h += 5;
    //a -= 7;
  }
}

```

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [May 9, 2020, 7:15am UTC](https://discourse.processing.org/t/i-have-questions-about-visualization-data/20648/2 "2020-05-09T07:15:06Z")

</div>

Hi,

Welcome to the forum. So you have two sets of data and you would like to fill area that is between the data points?

Can you describe or do you have an image what shows what your visualization would look like?

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [May 10, 2020, 2:14pm UTC](https://discourse.processing.org/t/i-have-questions-about-visualization-data/20648/3 "2020-05-10T14:14:34Z")

</div>

I think you should try going to the right with the ‘upper’ set of vertex points, and get an inverted list of the second data set to get the vertices going to the left, then they can be part of a single PShape beginShape()/endShape(CLOSE) object you can fill.

---

<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:** [May 10, 2020, 3:41pm UTC](https://discourse.processing.org/t/i-have-questions-about-visualization-data/20648/4 "2020-05-10T15:41:47Z")

</div>

Hello @ranaulubas ,

Please format your post as a courtesy to this community:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

`:)`