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

Processing Coding Questions
1

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

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! :slight_smile:

1 Like
2

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?

3

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

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?

5

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
6

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?

:wink:

7

Currently doing a quick test out of curiosity

2 Likes
8

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
9

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

10

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
11

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
12

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

13

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

14

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! :frowning: It’s slightly different because I added lerpColor in this one but this is the one I think I got working :slight_smile: 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(){
    
     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);
  
  }
  }
1 Like