Data Visualization for Intro to Information Systems

// Declare a variable  named "personAge" for a person's age
int personAge;

// Assign a value 25 to the variable
personAge = 25;

// Print the value of the variable using "println()" function/method
println("The person's age is " + personAge);

//a comment about this program.

/**
 * ThreeCirclesSine.
 *
 * Smoothly scaling size with the sin() function for three circles
 */

 //these two lines declare two float variables: "diameter" and "angle"

float diameter; //diameter will store the size of the circle

float angle = 0; //angle will control the size of circles.

//setup() function is called at the beginning of the program

void setup() {

  size(640, 360); //size() function creates a window of size 640 by 360 pixels.

  //diameter variable is defined to be the height of the window minus 10 pixels. This represents the size of the circle to the drawn.

  diameter = height - 10;

  noStroke(); //noStroke() function does not create the outline of the circle

  fill(255, 204, 0); //the circle sets the color to yellow.

}

/**
 * draw() function gets executed called repeatedly to
 * create the animation effect. Each time it get executed
 * is like the Processing "paints a frame in a movie".

 * The follwing draw() function draws three circles and
 * updates their size based on the current value of the
 * "angle" variable.
 */
void draw() {
  background(0); //paint the black background

  /**
   * d1 is used to store the diameter of the first circle. It is
   * calculated using the "sin()" function and the "angle" variable.
   * The sin() funtion takes angle as a parameter and it returns/generates
   * a value between -1 and 1. Then this value will be scaled by "diameter/2"
   * to generate a value between "- diameter/2" and "diameter/2". Then, add
   * "diameter/2" to generate a value between "0" and "diameter". Last, add
   * "10" to generate a value between 10 and diamter + 10.
   */
  float d1 = 10 + ((sin(angle) * diameter/2) + diameter/2 );

  //d2 is calculated in a similar way to d1 but with a different angle value
  float d2 = 10 + (sin(angle + PI/2) * diameter/2) + diameter/2;

  //d3 is calculated in a similar way to d1 and d2 but with a different angle.
  float d3 = 10 + (sin(angle + PI) * diameter/2) + diameter/2;

  //ellipse() function draws each circle
  ellipse(0, height/2, d1, d1); //circle 1
  ellipse(width/2, height/2, d2, d2); //circle 2
  ellipse(width, height/2, d3, d3); //circle 3

  //angle variable is incremented by 0.02 to create a smooth animation effect.
  angle += 0.02;
}

void setup() {
  size(640, 340);
  diameter = 10;
  noStroke();
  fill(255, 204, 0);
}

void draw() {

  1. call background() function to set the background color to black. background() function takes 0 for black.

  2. compute x and y coordinates of the point on the ellipse/circle using the width, height, radius, and angle variables.
     by using the cos() and sin() functions. Copy two lines.

  float x = width/2 + radius * cos(angle);
  float y = height/2 + radius * sin(angle);


 3. use the ellipse() function to draw a circle on the canvas.
    ellipse() function takes four arguments: the x-coordinate of the center of the ellipse,
    the y-coordinate of the center of the ellipse, the width of the ellipse, and the height of the ellipse.


 4. angle variable is incremented by angleStep.

 5. radius variable is incremented by 0.2. This will create the spiral movement.


}

float diameter;
float angle = 0;
float radius = 0;
float angleStep = 0.1;

void setup() {
  size(640, 340);
  diameter = 10;
  noStroke();
  fill(255, 204, 0);
}

void draw() {
  background(0);

  float x = width/2 + radius * cos(angle);
  float y = height/2 + radius * sin(angle);

  ellipse(x, y, diameter, diameter);

  angle += angleStep;
  radius += 0.2;
}

PImage mapImage;

/*
 * The setup() method executes once after click Run button
 */
void setup(  ) {
  size(640, 400);
  mapImage = loadImage("map.png"); //load an image from the data folder
}

void draw(  ) {
  background(255);
  image(mapImage, 0, 0);
}

PImage mapImage;Table locationTable;
Table locationTable;
int rowCount;

void setup(  ) {
  size(640, 400);
  mapImage = loadImage("map.png");

  // Create a Table object with the provided coordinates data file.
  locationTable = loadTable("locations.tsv");

  // The row count will be used a lot, so store it globally.
  rowCount = locationTable.getRowCount();
}

void draw(  ) {
  background(255);
  image(mapImage, 0, 0);

  // Drawing attributes for the ellipses.
  smooth(  );
  fill(192, 0, 0);
  noStroke(  );

  // Loop through the rows of the locations file and draw the points.
  for (int row = 0; row < rowCount; row++) {
    float x = locationTable.getFloat(row, 1);  // column 1
    float y = locationTable.getFloat(row, 2);  // column 2
    ellipse(x, y, 9, 9);
  }
}