var Width = 1200;
var Height = 800;
var padding = 200;
var tickSize = 10;
var xLabel = "";
var yLabel = "";
var state = "";
var values = [];
var maximumX, minimumX, xArr, minimumY, maximumY, yArr, stateArr;
var fontBold;

function preload() {
    table = loadTable("PopulationandState.csv", "csv");
   // fontBold = loadFont('assets/Bold.ttf');
}

function setup() {
    createCanvas(Width, Height);
    xLabel = table.getColumn(0)[0];
    yLabel = table.getColumn(1)[0];
    state = table.getColumn(2)[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];
    stateArr = table.getColumn(2);
    maximumX = Math.max.apply(Math, xArr);
    maximumY = Math.max.apply(Math, yArr);
    minimumX = Math.min.apply(Math, xArr);
    minimumY = Math.min.apply(Math, yArr);
    print("Max population is" + maximumX);
}

function draw() {
    background(255, 255, 255);
    drawAxes();
    var data = [];
    for (i = 0; i < xArr.length; i++) {
        data.push(createVector(xArr[i], yArr[i]));
    }
    for (i = 0; i < data.length; i++) {
        var dataPoint = data[i];
        var xPosition = int(map(dataPoint.x, 0, maximumX, padding, Width - padding));
        var yPosition = int(map(dataPoint.y, 0, maximumY, Height - padding, padding));
        fill("steelblue");
        ellipse(xPosition, yPosition, 8, 8);
    }
    for (i = 0; i < data.length; i++) {
        var dataPoint = data[i];
        var xPosition = map(dataPoint.x, 0, maximumX, padding, Width - padding);
        var yPosition = int(map(dataPoint.y, 0, maximumY, Height - padding, padding));
        if (sq(mouseX - xPosition) + sq(mouseY - yPosition) < 80) {
            fill(230, 138, 0);
            ellipse(xPosition, yPosition, 10, 10);
            print(dataPoint);
            text(stateArr[i + 1] + " (" + dataPoint.x + ", " + dataPoint.y + ")", mouseX + 15, mouseY);
        }
        fill(0, 0, 0);
    }
    var tickGap = (Width - padding * 2) / 5;
    var XScale = 0, YScale = 0;
    for (var i = 0; i <= 5; i++) {
        text(XScale, padding + i * tickGap - 30, Height - padding + tickSize + 20);
        XScale += int(maximumX / 5);
    }
    tickGap = (Height - padding * 2) / 5;
    YScale = int(maximumY / 5);
    for (i = 1; i <= 5; i++) {
        text(YScale, padding - 52, padding + (5 - i) * tickGap + 5);
        YScale += int(maximumY / 5);
    }
}

function drawAxes() {
   // stroke(100, 100, 100);
    strokeWeight(1);
    fill(0, 0, 0);
    textSize(20);
    //textFont(fontBold);
    text("Scatter Plot of " + xLabel + " Vs. " + yLabel, width / 2 - 150, padding / 2);
   // textFont(fontBold);
    var x1 = padding;
    var x2 = Width - padding;
    var y1 = Height - padding;
    var y2 = y1;
    line(x1, y1, x2, y2);
    var tickGap = (x2 * 2) / 5;
    for (var j = 0; j < 5; j++) {
        line(x1 + (j + 1) * tickGap, y1, x1 + (j + 1) * tickGap, y1 + tickSize);
    }
    text(xLabel, x2, y2 - 10);
    x1 = padding;
    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 - tickSize, y2 + j * tickGap);
    }
    text(yLabel, x1, y2 - 15);
}