Trouble with a scatter plot - function not exists

Richardboon

Hello,

For a school exercise we need to make a scatterplot that displays data that contains a Y and X value, very logical:). But i'm a beginner with Open processing, so i hope you can help me to fix my code!

I have read a lot in the book of Ben Fry (visualizing data), but i can't get it work.

Hopefully you can tell me what is wrong, and more important why.

Thank you for the answers, have a nice weekend!

Table data;
float dataMin, dataMax;

float plotX1, plotY1;
float plotX2, plotY2;

int data1Min, data1Max;
int[] data1;


void setup() {
  size(720, 405);

  data =  loadTable("test.csv");

  data1 = int(data.getRowNames());
  data1Min = data1[0];
  data1Max = data1[data1.length - 1];

  dataMin = 0;
  dataMax = data.getTableMax();

  // Corners of the plotted time series
  plotX1 = 50;
  plotX2 = width - plotX1;
  plotY1 = 60;
  plotY2 = height - plotY1;

  smooth();
}


void draw() {
  background(224);

  // Show the plot area as a white box
  fill(255);
  rectMode(CORNERS);
  noStroke();
  rect(plotX1, plotY1, plotX2, plotY2);

  strokeWeight(7);
  // Draw the data for the first column (red)
  stroke(#c12e21);
  drawDataPoints(0);
}


// Draw the data points
void drawDataPoints(int col) {
  int rowCount = data.getRowCount();
  for (int row = 0; row < rowCount; row++) {
    if (data.isValid(row, col)) {
      float value = data.getFloat(row, col);
      float x = map(data1[row], data1Min, data1Max, plotX1, plotX2);
      float y = map(value, dataMin, dataMax, plotY2, plotY1);
      point(x, y);
    }
  }
}

quark

The class Table does not have methods (functions) called

getRowNames(...)
getTableMax(...)
isValid(...)

so all of these will cause the error you mentioned.

What makes you think they exist? Where did you see them used or documented?

Richardboon

Thank you for your replay, quark.

I thought this where "build in" function in processing, but i got that (very) wrong.

Is it possible to avoid these functions and let the code work? Hopefully you or an other form member can help my.

I greatly appreciate your comments

quark

I have commented out the lines affected but I can't test it because I don't have your data file.

You will have to manually set the value of dataMax because it is used later to scale the plot.

Table data;
float dataMin, dataMax;

float plotX1, plotY1;
float plotX2, plotY2;

int data1Min, data1Max;
int[] data1;


void setup() {
  size(720, 405);

  data =  loadTable("test.csv");

  //  data1 = int(data.getRowNames());
  data1Min = data1[0];
  data1Max = data1[data1.length - 1];

  dataMin = 0;

  // You would need to replace the '100' with the
  // maximum value in table
  dataMax = 100;  

  // Corners of the plotted time series
  plotX1 = 50;
  plotX2 = width - plotX1;
  plotY1 = 60;
  plotY2 = height - plotY1;

  smooth();
}

void draw() {
  background(224);

  // Show the plot area as a white box
  fill(255);
  rectMode(CORNERS);
  noStroke();
  rect(plotX1, plotY1, plotX2, plotY2);

  strokeWeight(7);
  // Draw the data for the first column (red)
  stroke(#c12e21);
  drawDataPoints(0);
}

// Draw the data points
void drawDataPoints(int col) {
  int rowCount = data.getRowCount();
  for (int row = 0; row < rowCount; row++) {
    //    if (data.isValid(row, col)) {
    float value = data.getFloat(row, col);
    float x = map(data1[row], data1Min, data1Max, plotX1, plotX2);
    float y = map(value, dataMin, dataMax, plotY2, plotY1);
    point(x, y);
    //    }
  }
}

Richardboon

Thank you for your quick response quark!

i will test it tonight and let you know

Richardboon

Hello quark,

On line 17: data1Min = data1[0]; i get a NullPointerException

Link to csv: https://www.dropbox.com/s/asq332m6w12ijuq/test.csv?dl=0

quark

I have download the csv file and will look into this weekend.

Richardboon

Thank you quark, I appreciate it enormously!

quark

I just remembered that this is a school exercise so I am going to help you reach the solution rather than me provide a solution. This is means you will get the satisfaction of knowing that you did it and learn some programming at the same time.

When trying to do an exercise like this the first thing is to do is break the problem into smaller steps which can be solved in order.

In this case you have 2 initial stages

1) load and confirm the validity of the data

2) display the data

After that you can consider tweaking the display to suit.

So create a sketch that loads the data into the table and confirm the number of rows and colums. I have looked at the data file and there are 2 colums in the data although I didn't count the rows.

You will be using loadTable, getRowCount and getColCount. The csv filename extension stands for 'comma separated values' and your data is sparated with semicolons so if the column count is not 2 then you may need to use a text editor to replace all ; with , Perhaps someone else is aware if it makes a difference.

Once you have loaded the data post your code here. You should also check out the reference section and see what other functions are available with Table objects.

quark

This sketch will simply load the data and display the number of rows (100) and the number of columns (2). It will then display the data. I do not store the data in an array and I don't dynamically scale x and y axis but there is enough here to get you started :)

Table data;

void setup() {
  size(720, 405);

  data =  loadTable("test.csv");
  println(data.getRowCount());
  println(data.getColumnCount());

  background(255);
  fill(32, 32, 128);
  noStroke();
  for (int i = 0; i < data.getRowCount (); i++) {
    TableRow row = data.getRow(i);
    // Hard coded the scale factors just so the plot can be seen
    int x = 10 * row.getInt(0);
    int y = row.getInt(1) / 4;
    ellipse(x, y, 4, 4);
    println(x + "  " + y);
  }
}

**IMPORTANT NOTE: **It only worked after I used a text editor to change all the ; to , so you will have to do the same.

GoToLoop

It only worked after I used a text editor to change all the ; to , so you will have to do the same.

Or you can use loadStrings() + split() in place of loadTable(), to choose a specific separator besides ',' or '\t'!

• http://processing.org/reference/loadStrings_.html
• http://processing.org/reference/split_.html

Richardboon

Thank you very much, I've been a lot closer to the solution!