var table; 

var x_x1; // x-axis x1
var x_x2;
var x_y1; 
var x_y2;

var y_x1; // y-axis x1
var y_x2;
var y_y1;
var y_y2;

var x_len; // length of the x-axis
var y_len; 

var desired_x;
var desired_y;

var desired_options; // additional information one would want to include

var numTicks; // number of tick marks per axis

var coords; // array of [x, y] data entries 

var max_x;
var max_y;

var scale_x;
var scale_y;



function preload() {
  table = loadTable("classics.csv", "csv", "header");
}

function setup() {

  // VARIABLE INFORMATION......................................................................

  // Canvas information
  var canvas_x = 1250;
  var canvas_y = 800;

  // DESIRED x, y, options
  desired_x = 'downloads';
  desired_y = 'words';

  // Desired Options (BETA version)
  // if you want no options, set desired_options to null. 
  // add no more than 3 options
  desired_options = ['title', 'name']; 

  // Axis information
  x_x1 = 200; 
  x_x2 = 700;
  x_y1 = 650; 
  x_y2 = 650;

  y_x1 = 200;
  y_x2 = 200;
  y_y1 = 150;
  y_y2 = 650; 

  numTicks = 10; // number of tick marks per axis

  // DERIVED VALUES............................................................................

  createCanvas(canvas_x, canvas_y);

  x_len = abs(x_x1 - x_x2);
  y_len = abs(y_y1 - y_y2);

  // DATA POPULATION...........................................................................

  coords = []; // array of [x,y] observations
  max_x = 0;
  max_y = 0;

  // populate the coordinates array
  for(var i = 0; i < table.getRowCount(); i++) {
    var x = int(table.getString(i, desired_x));
    var y = int(table.getString(i, desired_y));

    // Find maximum values
    if (x > max_x) {
      max_x = x;
    }
    if (y > max_y) {
      max_y = y;
    }

    // Add [x,y] to array of observations 
    var a = [];
    a[0] = x;
    a[1] = y;

    // Add optional information to
    if (desired_options != null) { // if the array is not empty
      for (var j = 0; j < desired_options.length; j++) {
        var o = table.getString(i, desired_options[j]);
        a[j+3] = o; // start at index 2 to account for x, y 
      }
    }

    coords[i] = a;
  }

  // SCALING..................................................................................................
  
  // Scale so the highest value reaches the tips of the axes
  scale_x = (1/max_x) * x_len; // find the scaling factor for x-values
  scale_y = (1/max_y) * y_len; // find the scaling factor for y-values
  
  // Scaling
  for (var i = 0; i < coords.length; i++) {
    coords[i][0] = coords[i][0] * scale_x; // Scale x-value
    coords[i][1] = coords[i][1] * scale_y; // Scale y-value
  }
}

function draw() {

  // background info
  background(255, 248, 220);

  // TITLE CREATION...............................................................................
  
  // Plot type title 
  textSize(50);
  fill(255, 145, 146);
  text("Scatter", 20, 50);
  fill(255, 248, 220);
  text("Scatter", 22, 52);
  fill(255, 145, 146);
  text("Scatter", 24, 54);
  fill(49, 54, 57);
  
  // Sub title 
  textSize(30);
  fill(49, 54, 57); // rect info
  text(desired_x + " vs. " + desired_y, 25, 90);

  // AXIS CREATION ................................................................................................

  // axis info
  stroke(49, 54, 57);
  strokeWeight(3);

  // Tick info
  tick_dist_x = x_len / numTicks; // distance between tick marks on x-axis
  tick_dist_y = y_len / numTicks; // distance between tick marks on y-axis

  // Plot x-axis
  line(x_x1, x_y1, x_x2, x_y2);

  // Plot y-axis
  line(y_x1, y_y1, y_x2, y_y2);

  // tick-text info
  fill(49, 54, 57);
  textSize(10);

  // Y-axis ticks & tick-text
  var temp_y = max_y;
  for (var i = y_y1; i < y_y2; i += tick_dist_x) {
    strokeWeight(3); // tick mark info
    line(y_x1 - 5, i, y_x1 + 5, i); // tick mark
    strokeWeight(0); // tick value info
    text(Math.round(temp_y), y_x1 - 50, i + 5); // print tick value (+5 to center number on tick)
    temp_y = temp_y - (max_y / numTicks); // update value of temp
  }

  // X-axis ticks & tick-text
  var temp_x = max_x;
  for (var i = x_x2; i > x_x1; i -= tick_dist_y) {
    strokeWeight(3); // tick mark info
    line(i, x_y1 - 5, i, x_y1 + 5); // tick mark
    strokeWeight(0); // tick value info
    text(Math.round(temp_x), i - 10, x_y1 + 25); // print tick value (+5 to center number on tick)
    temp_x = temp_x - (max_x / numTicks); // update value of temp
  }

  // Axis titles

  textSize(20); // Axis title info
  fill(49, 54, 57); // Axis title info

  // y-axis
  var y_title_x = 35;
  var y_title_y = y_y1 + Math.round(y_len / 2);
  text(desired_y, y_title_x, y_title_y);

  // x-axis
  var x_title_x = x_x1 + Math.round((x_len / 3));
  var x_title_y = y_y1 + y_len + 70;
  text(desired_x, x_title_x, x_title_y);

  // PLOT............................................................................................................

  // plot x & y
  var ellipse_width = 5;
  for (var i = 0; i < coords.length; i++) {
    fill(43, 88, 81);
    ellipse(x_x1 + coords[i][0], x_y1 - coords[i][1], ellipse_width);
  }

  // INTERACTION...................................................................................
  for (var i = 0; i < coords.length; i++) {
    var round_x = Math.round(coords[i][0]); // scaled x
    var round_y = Math.round(coords[i][1]); // scaled y
    var real_x = Math.round(coords[i][0]/scale_x);
    var real_y = Math.round(coords[i][1]/scale_y);

    if (dist(round_x+x_x1, x_y1 - round_y, mouseX, mouseY) < 5) {
  
      fill(255, 145, 146); // rect info
      rect(mouseX, mouseY, 250, -150); // rect creation

      textSize(10); // text info
      fill(255, 248, 220); // text info

      var string_x = desired_x + "    " + real_x;
      var string_y = desired_y + "    " + real_y; 

      var x_val_loc = -10; // the start x location away from mouseX to print text
      var y_val_loc = 120; // the start y location away from mouseY to print text
      var y_val_inc = 20; // the amount to increment y (how far apart the lines of text are)

      // Title for information box
      textStyle(BOLD); // info header specs
      textSize(15); // info header specs
      text("info", mouseX + 10, mouseY - y_val_loc); // info header
      y_val_loc -= (y_val_inc + 5);

      textStyle(NORMAL); // normal text info
      textSize(10); // normal text info

      // printing the additional optional values
      if (desired_options != null) {
        for (j = 0; j < desired_options.length; j++) {
          var o = desired_options[j] + "    " + coords[i][j+3];
          text(o, mouseX - x_val_loc, mouseY - y_val_loc);
          y_val_loc -= y_val_inc; 
        }
      }

      text(string_x, mouseX - x_val_loc, mouseY - y_val_loc); // print exact x
      y_val_loc -= y_val_inc;
      text(string_y, mouseX - x_val_loc, mouseY - y_val_loc); // print exact y
    }
  }
}