# Why is this just creating a straight line from my CSV data?

**URL:** https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268
**Category:** Coding Questions
**Created:** [February 18, 2022, 2:30pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268 "2022-02-18T14:30:22Z")
**Posts on this page:** 14
**Page:** 1

<div class="post-metadata">

### Author: ![JennyMcCreadie](https://avatars.discourse-cdn.com/v4/letter/j/cdc98d/32.png) [@JennyMcCreadie](https://discourse.processing.org/u/JennyMcCreadie)
#### Post date: [February 18, 2022, 2:30pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/1 "2022-02-18T14:30:22Z")

</div>

Hello! I am using data from my CSV file to plot ellipses. It is working when I do it one by one, but when I add an array in to create ellipses from every row of the data, I’m just getting a straight line from them.

Here is an example of what I’m trying to do:

```auto
 size(600, 400);
  background(0);
  Table table = loadTable("Data01.csv", "header");
  TableRow row = table.getRow(0); // Getting the row
  float x = row.getFloat("X"); //int in first column
  float y = row.getFloat("Y"); // int in second column
  float x_ = map(x, 0.24375, 0.509375, 0, 600); // mapping lowest csv number and highest csv number
  float y_ = map(y, 0.24375, 0.509375, 0, 400);
  println(x_,y_);
  ellipse(x_, y_, 25,25);
  
    TableRow row2 = table.getRow(1); // Getting the row
  float x2 = row2.getFloat("X"); //int in first column
  float y2 = row2.getFloat("Y"); // int in second column
  float x2_ = map(x2, 0.24375, 0.509375, 0, 600);
  float y2_ = map(y2, 0.24375, 0.509375, 0, 400);
  println(x2_,y2_);
  ellipse(x2_, y2_, 25,25);
  
   TableRow row3 = table.getRow(2); // Getting the row
  float x3 = row3.getFloat("X"); //int in first column
  float y3 = row3.getFloat("Y"); // int in second column
  float x3_ = map(x3, 0.24375, 0.509375, 0, 600);
  float y3_ = map(y3, 0.24375, 0.509375, 0, 400);
  println(x3_,y3_);
  ellipse(x3_, y3_, 25,25);

```

Obviously I can’t do this for hundreds of rows, so this is what I have done to try to go through every row to do the same thing:

```auto
void setup() {
  size(600, 400);
  background(0);
  noLoop();
}

void draw() {
  loadData();
}

void loadData() {
  Table table = loadTable("Data01.csv", "header");

  for (int i = 0; i < table.getRowCount(); i++) {
    TableRow row = table.getRow(i);
    float x = row.getFloat("X");
    float y = row.getFloat("Y");
    float x_ = map(x, 0.24375, 0.509375, 0, 600);
    float y_ = map(y, 0.24375, 0.509375, 0, 400);
    fill(255);
    ellipse(x_, y_, 10, 10);
    println(x_, y_);
  }
}

```

Instead of plotting the ellipses according to the x and y values, it seems to be putting them in a straight diagonal line and I’m not sure what I’m doing wrong. Thank you in advance for any help! 🙂

---

<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: [February 18, 2022, 6:43pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/2 "2022-02-18T18:43:51Z")

</div>

Code looks ok.

maybe the data IS in fact giving a straight line?

Did you test with a another data file that contains other data?

---

<div class="post-metadata">

### Author: ![GSA\_IxD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gsa_ixd/32/7554_2.png) [@GSA\_IxD](https://discourse.processing.org/u/GSA_IxD)
#### Post date: [February 18, 2022, 7:02pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/3 "2022-02-18T19:02:55Z")

</div>

Hi Jenny!

The code isn’t correct in fact!

You are wrongly calling loadData() in the draw loop. You only need to load the data once – in setup(). Create a global Table variable (table) and load it into it. Then you refer to it in the draw loop and step through the rows and get variables and draw. Hope this helps!

```auto
Table table;

void setup() {
  size(600, 400);
  background(0);
  noLoop();
  loadData();
}

void loadData() {
  table = loadTable("Data01.csv", "header");
}

void draw() {
  for (int i = 0; i < table.getRowCount(); i++) {
    TableRow row = table.getRow(i);
    float x = row.getFloat("X");
    float y = row.getFloat("Y");
    float x_ = map(x, 0.24375, 0.509375, 0, 600);
    float y_ = map(y, 0.24375, 0.509375, 0, 400);
    fill(255);
    ellipse(x_, y_, 10, 10);
    println(x_, y_);
  }
}

```

---

<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: [February 18, 2022, 7:08pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/4 "2022-02-18T19:08:29Z")

</div>

> [@GSA\_IxD](#):
>
> You are wrongly calling loadData() in the draw loop.

That’s not a mistake since she is using noLoop().

I don’t see how this would change the outcome of the graph in the first place.

But maybe the OP can post the first 6 lines of the data file?

---

<div class="post-metadata">

### Author: ![GSA\_IxD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gsa_ixd/32/7554_2.png) [@GSA\_IxD](https://discourse.processing.org/u/GSA_IxD)
#### Post date: [February 18, 2022, 7:12pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/5 "2022-02-18T19:12:09Z")

</div>

It is it seems – although you’re right to identify it should in theory – not entirely sure why it doesn’t. I know my version works. Table loads and then draws.

---

<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: [February 18, 2022, 7:13pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/6 "2022-02-18T19:13:25Z")

</div>

thank you for your quick reply.

maybe her version works too, I don’t know.

Did you test her version and found it doesn’t work?

😉

---

<div class="post-metadata">

### Author: ![GSA\_IxD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gsa_ixd/32/7554_2.png) [@GSA\_IxD](https://discourse.processing.org/u/GSA_IxD)
#### Post date: [February 18, 2022, 7:16pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/7 "2022-02-18T19:16:47Z")

</div>

Currently doing a quick test out of curiosity

---

<div class="post-metadata">

### Author: ![GSA\_IxD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gsa_ixd/32/7554_2.png) [@GSA\_IxD](https://discourse.processing.org/u/GSA_IxD)
#### Post date: [February 18, 2022, 7:23pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/8 "2022-02-18T19:23:37Z")

</div>

Ok – both work! So the fault lies in the map() functions I think – the input range is very small – thinking the data set values are much higher and drawing off screen! I used another data set and changed the mapping input range and it draws fine using both methods.

So Jenny – check the map() function ranges – should be:

`map(input, input low, input high, output low, output high)`

---

<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: [February 18, 2022, 7:35pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/9 "2022-02-18T19:35:39Z")

</div>

> [@GSA\_IxD](#):
>
> Ok – both work!

Thanks for testing this!

> [@GSA\_IxD](#):
>
> thinking the data set values are much higher and drawing off screen

apparently the very first Sketch works (the one without the for-loop) so the map() seems to be ok, at least for the first rows

---

<div class="post-metadata">

### Author: ![GSA\_IxD](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gsa_ixd/32/7554_2.png) [@GSA\_IxD](https://discourse.processing.org/u/GSA_IxD)
#### Post date: [February 18, 2022, 7:47pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/10 "2022-02-18T19:47:59Z")

</div>

Indeed – so it does. All the code is correct in both sketches with no mis-mapping – I checked. Can only be the data file itself (can’t be wrong column name as sketch wouldn’t run)

---

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [February 18, 2022, 9:05pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/11 "2022-02-18T21:05:12Z")

</div>

You are mapping your x and your y differently so you are scaling in 1 direction more than the other so even if your data is not an ellipse you would not get a real ellipse on the canvas.

Now this is said, I’m not sure this is the answer to your issue. The code seems to be fine except this.

As the other said, we’ll probably need to see your input file to check what’s going on.

---

<div class="post-metadata">

### Author: ![JennyMcCreadie](https://avatars.discourse-cdn.com/v4/letter/j/cdc98d/32.png) [@JennyMcCreadie](https://discourse.processing.org/u/JennyMcCreadie)
#### Post date: [March 2, 2022, 10:06pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/12 "2022-03-02T22:06:17Z")

</div>

Hello!

Amazing, thank you! I hadn’t actually seen the replies haha so I’m a bit l late here, I somehow worked it out in the end. Will be interesting to check back and see if I actually fixed it properly or not

---

<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: [March 2, 2022, 10:07pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/13 "2022-03-02T22:07:45Z")

</div>

You worked it out. Please tell us what your issue was.

---

<div class="post-metadata">

### Author: ![JennyMcCreadie](https://avatars.discourse-cdn.com/v4/letter/j/cdc98d/32.png) [@JennyMcCreadie](https://discourse.processing.org/u/JennyMcCreadie)
#### Post date: [March 2, 2022, 10:17pm UTC](https://discourse.processing.org/t/why-is-this-just-creating-a-straight-line-from-my-csv-data/35268/14 "2022-03-02T22:17:56Z")

</div>

I’ll paste the code in because I kind of lose track of the changes I’m making when trying to solve an issue - sorry! ☹ It’s slightly different because I added lerpColor in this one but this is the one I think I got working 🙂 Thanks for your help btw Chris! So sorry I went awol

```auto
///////// OVERALL MIN: 0.24375 /////////
///////// OVERALL MAX: 0.509375 ////////

String filename = "Data01.csv";
String[] rawData;

float x = 0;
float [] x0 = new float[140];
float [] x1 = new float[140];

int margin, graphHeight;
float xSpacer;

PVector[] positions = new PVector[140];

void setup(){
 size(800, 400);
 processData();
  }
 
  
  void draw(){
    background(255);
   
    for (int i = 0; i<positions.length; i++){
  color from = color(#F79B0F);
  color to = color(#E500FF);
  float inc = map(i, 0, 200, 0, 1);
  color col = lerpColor(from, to, inc);
 stroke(col);
strokeWeight(1);
noFill();
      rect(positions[i].x, positions[i].y, 15, 15);
     
}
    }

  
  void processData(){
    
     rawData = loadStrings(filename);
  //printArray(rawData);
  for(int i = 1; i < rawData.length; i++) {
    String[] thisRow = split(rawData[i], ",");
  
   x0[i-1] = float(thisRow[0]);
   x1[i-1] = float(thisRow[1]);
 
  }
  margin = 50;
  graphHeight = (height-margin) - margin;
  xSpacer = (width - margin - margin) / (rawData.length - 1);
  for (int i=0; i < x0.length; i++) {
    float adj = map(x0[i], 0.121875, 0.671875, 0, graphHeight);
    float yPos = height - margin - adj;
    float xPos = margin + (xSpacer * i);
    positions[i] = new PVector(xPos, yPos);
  
  }
  }

```