How to use for loop to plot the data into the graph?

Processing Coding Questions
1

22%20PM
Screen Shot 2018-09-26 at 12.34.22 PM.png884×622 23.8 KB

This is the scatter plot graph that I need to plot the data in. How to use the for loop code to plot the data in? Also how to make different shapes to represent the shape under the for loop code?

1 Like
2

What’s the raw data you are working with and have you got any code so far?

Both of those things will help us answer you.

3

The raw data will be shown below:

Attendence     GPA     Year of Student
25             2.94    1st
25             2.48    1st
14             2.15    1st
27             3.33    1st
29             4.03    1st
22             2.29    2nd
22             2.94    2nd
26             3.68    2nd
22             1.96    2nd
22             2.14    2nd
16             1.13    3rd
35             3.91    3rd
14             1.04    3rd
10             1.31    3rd
22             2.17    3rd

1st yr student will be in red circles;
2nd yr student will be in green squares;
3rd yr student will be in blue diamond shape

1 Like
4 
PFont font;

void setup() {
  size(850, 650);
  surface.setResizable(true);
  smooth();
  background(255, 255, 255);
  font = loadFont("Helvetica-24.vlw");
  textFont(font);
}

void draw() {
  background (255);
  textSize(24);
  textAlign(CENTER) ;
  fill(65, 105, 205);
  text(" Student Performance", 400, 50);
  ShowCoor(); 
 }
 
 
 
 void ShowCoor() {
  stroke (0,0,0);
  fill (0,0,0);  
  strokeWeight(1);    
  //y-axis
  line(100, 555, 100, 100);
  textSize(18);
  text ("GPA", 65, 120);
  textSize(12);
  text("0", 101, 570);
  //x-axis
  line( 95, 550, 750, 550);
  textSize(18);
  text ("Attendence", 700, 580);
  textSize(12);
  text("0.0", 85, 555);
  //draw arrows
  line(90, 120, 100, 100);
  line(110, 120, 100, 100);
  line(750, 550, 730, 560);
  line(750, 550, 730, 540);
  
  //coordinate system from y-axis to x-axis
  //y-axis label
  line(95, 150, 105, 150);//4.0GPA
  textSize(12);
  text("4.0", 85, 155);
  line(95, 200, 105, 200);//3.5GPA
  textSize(12);
  text("3.5", 85, 205);
  line(95, 250, 105, 250);//3.0GPA
  textSize(12);
  text("3.0", 85, 255);
  line(95, 300, 105, 300);//2.5GPA
  textSize(12);
  text("2.5", 85, 305);
  line(95, 350, 105, 350);//2.0GPA
  textSize(12);
  text("2.0", 85, 355);
  line(95, 400, 105, 400);//1.5GPA
  textSize(12);
  text("1.5", 85, 405);
  line(95, 450, 105, 450);//1.0GPA
  textSize(12);
  text("1.0", 85, 455);
  line(95, 500, 105, 500);//0.5GPA
  textSize(12);
  text("0.5", 85, 505);
  
  //x-axis label
  line(175, 545, 175, 555);//5Attendence
  textSize(12);
  text("5", 176, 570);
  line(250, 545, 250, 555);//10Attendence
  textSize(12);
  text("10", 251, 570);
  line(250, 545, 250, 555);//10Attendence
  textSize(12);
  text("10", 251, 570);
  line(325, 545, 325, 555);//15Attendence
  textSize(12);
  text("15", 326, 570);
  line(400, 545, 400, 555);//20Attendence
  textSize(12);
  text("20", 401, 570);
  line(475, 545, 475, 555);//25Attendence
  textSize(12);
  text("25", 476, 570);
  line(550, 545, 550, 555);//30Attendence
  textSize(12);
  text("30", 551, 570);
  line(625, 545, 625, 555);//30Attendence
  textSize(12);
  text("35", 626, 570);
  }
1 Like
5

Hi bread,

Do you need to code everything from scratch or can you use some libraries?

In case of the latest, I advise you to go check out Grafica!

1 Like
6

+1 for Grafica!

One way of approaching it:

  1. a graph is several lines, each with their own color
  2. a line is a list of points
  3. when you draw a line, you loop over the points and connect them with line()

If you are familiar with classes, you might create Point and Line classes, put Points in the Lines, and put Lines in the Graph. Grafica already does a lot of this for you – if you can use it.

If you are not familiar with classes and/or cannot use a library, then you might want an array or an ArrayList of PVectors for each line representing a year of students.

Or a 3d array: float[][][] graphlines, where the first index is the year (line) 0 1 2, the second index is the point in that line 0 1 2 3 4 5, and the third index is the variable 0 (x), 1 (y). So graphlines[2][3][0] is line 2, point 3, the x value.

2 Likes