var Width = 1200;
var Height = 800;
var padding = 200;
var tickWidth = 10;
var xField = "";
var yField = "";
var values = [];
var maxX, minX, xArr, minY, maxY, yArr;

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

function setup() {
    createCanvas(Width, Height);
    xField = table.getColumn(0)[0];
    yField = table.getColumn(1)[0];
    for (var i = 0; i < 2; i++) {
        var column = table.getColumn(i).slice(1, table.getColumn(0).length);
        column = column.map(function (num) {
            return parseFloat(num);
        });
        values.push(column);
    }
    xArr = values[0];
    yArr = values[1];
    maxX = Math.max.apply(Math, xArr);
    maxY = Math.max.apply(Math, yArr);
    minX = Math.min.apply(Math, xArr);
    minY = Math.min.apply(Math, yArr);
    noLoop();
}

function draw() {
    background(255, 255, 255);
    drawAxes();
    var tickGap = (Height - padding * 2) / 5;
    var XAxisScale = 0, YAxisScale = 0;
    for (var i = 0; i <= 5; i++) {
        text(XAxisScale, padding + 520, padding + (5 - i) * tickGap + 10);
        XAxisScale += int(maxX / 5);
    }
    tickGap = (Height - padding * 2) / 5;
    for (i = 0; i <= 5; i++) {
        text(YAxisScale, padding - 100, padding + (5 - i) * tickGap + 10);
        YAxisScale += int(maxY / 5);
    }
    var selectedData = [];
    for (i = 0; i < xArr.length; i++) {
        selectedData.push(createVector(xArr[i], yArr[i]));
    }
    for (i = 0; i < selectedData.length; i++) {
      //  print(selectedData);
        var point = selectedData[i];
        var x1 = padding;
        var x2 = Height - padding;
        var xPos = int(map(point.x, 0, maxX, x1, x2));
        var y1 = Height - padding;
        var y2 = padding;
        var yPos = int(map(point.y, 0, maxY, y1, y2));
        fill(0, 0, 255);
        line(padding, yPos, padding + 500, xPos);
    }
    for (i = 0; i < selectedData.length; i++) {
        var point = selectedData[i];
        var x1 = padding;
        var x2 = Height - padding;
        var xPos = map(point.x, 0, maxX, x1, x2);
        var y1 = Height - padding;
        var y2 = padding;
        var yPos = int(map(point.y, 0, maxY, y1, y2));

        if (mouseX > 200 && mouseY > 50 && mouseX < 700 && mouseY < 600) {
            text(" (" + point.x + ", " + point.y + ")", mouseX + 15, mouseY);
            fill(230, 138, 0);
        }

        if (sq(mouseX - xPos) + sq(mouseY - yPos) < 80) {
            fill(230, 138, 0);
            ellipse(xPos, yPos, 10, 10);
            print(point);
        }
    }
}

function drawAxes() {
   // stroke(100, 100, 100);
    strokeWeight(2);
    fill(0, 0, 0);
    textSize(25);
    //textFont(fontBold);
    text("Parallel Plot for " + xField + " vs. " + yField, width / 2 - 350, padding / 2);
   // textFont(fontBold);
    textSize(15);
    var x1 = padding;
    var x2 = padding;
    var y1 = Height - padding;
    var y2 = padding;
    line(x1, y1, x2, y2);
    var tickGap = (Height - padding * 2) / 5;
    // for (var j = 0; j < 5; j++) {
    //     line(x1 + (j + 1) * tickGap, y1, x1 + (j + 1) * tickGap, y1 + tickWidth);
    // }
    text(yField, x2, y2 - 10);
    x1 = padding + 500;
    x2 = x1;
    y1 = Height - padding;
    y2 = padding;
    line(x1, y1, x2, y2);
    tickGap = (y1 - y2) / 5;
    for (var j = 0; j < 5; j++) {
        line(x1, y2 + j * tickGap, x1 - tickWidth, y2 + j * tickGap);
    }
    text(xField, x1, y2 - 15);
}