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

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:

`````` size(600, 400);
background(0);
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:

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

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

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!

1 Like

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?

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!

``````Table table;

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

}

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

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?

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.

1 Like

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

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

Currently doing a quick test out of curiosity

2 Likes

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

2 Likes

Thanks for testing this!

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

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)

1 Like

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.

1 Like

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

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

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

``````///////// 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(){

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

}
}
``````
1 Like