Processing 2d scatter plot - processing

Question

How to load .csv file and use data in the table to create 2d scatter plot.
The data inside the table is
Name X Y Group Gender Year of Birth Grade
Victor Anderson 627 705 2 Female 2000 6
Jack Scott 808 643 1 Male 2002 4
Sean Robinson 624 627 1 Male 2002 4
William Rodriguez 423 396 1 Female 2004 2
Aaron Kelly 775 181 0 Female 2005 1
Raymond Taylor 433 731 1 Female 2000 1
Alan Foster 635 580 2 Male 2002 4
Charles Watson 884 262 0 Female 2003 3
Lillian Perez 334 190 4 Male 2005 1
Betty Moore 727 524 1 Female 2003 3
Bruce Adams 503 684 0 Male 2001 2
Kathryn Sanchez 284 246 0 Male 2001 2
Chris Hall 189 223 3 Male 2000 6
Eugene Harris 196 220 3 Female 2000 5
Gary Baker 707 559 0 Female 2001 5
Michael Ramirez 299 657 2 Male 2000 1
Walter Smith 400 755 0 Male 2005 5
Ann Murphy 0 895 1 Male 2003 3
Lois Thompson 783 631 1 Female 2003 2
Louis Jones 674 589 1 Female 2003 3
Tammy Bell 828 263 3 Male 2002 4
Carolyn Bailey 557 23 4 Male 2004 2
Larry Campbell 444 627 2 Female 2004 2

Answer 1

To draw a simple scatter plot from the data in the csv we need to:
Ensure X and Y columns can be read as numbers
Normalize or scale the X and Y values to the canvas size
Plot a point for each row at its scaled x and y position
Add labels
For the first item we could add code to clean up X and Y and turn them into numbers. Below I have assumed that X and Y will always be integers and removed white space so we can just call row.getInt()
The data is saved like this:
Name,X,Y,Group,Gender,Year of Birth,Grade
Victor Anderson,627,705,2,Female,2000,6
Jack Scott,808,643,1,Male,2002,4
Notice that extra white space has been removed so that we can call table and row methods without special cleanup code.
Table table;
int xMin;
int yMin;
int xMax;
int yMax;
void setup() {
size(900, 900);
table = loadTable("plot_data.csv", "header");
background(0);
fill(255);
// we get the minimum and maximum values for X and Y so we can scale to our canvas
xMin = getMin(table, "X");
yMin = getMin(table, "Y");
xMax = getMax(table, "X");
yMax = getMax(table, "Y");
}
void draw(){
background(0);
boolean labelDrawn = false;
for (TableRow row : table.rows()) {
int x = row.getInt("X");
// the map function takes our value and maps it to a value that fits on our canvas
float xPos = map(x, xMin, xMax, 0, width);
int y= row.getInt("Y");
float yPos = map(y, yMin, yMax, 0, height);
ellipse(xPos,yPos,10,10);
// Here we put a name label on the plotted data when the mouse is over it
if(dist(mouseX,mouseY,xPos,yPos)<10 && !labelDrawn){
fill(255);
text(row.getString("Name"),mouseX-10,mouseY-10);
labelDrawn = true; // only draw one label at a time
}
}
}
int getMin(Table table, String col){
int min = Integer.MAX_VALUE;
for (TableRow row : table.rows()){
if (row.getInt(col)<min){
min = row.getInt(col);
}
}
return min;
}
int getMax(Table table, String col){
int max = Integer.MIN_VALUE;
for (TableRow row : table.rows()){
if (row.getInt(col)>max){
max = row.getInt(col);
}
}
return max;
}