let latMin = Infinity;

let latMax = -Infinity;

let lonMin = Infinity;

let lonMax = -Infinity;

​

function preload() {

    table = loadTable("data.csv", "csv", "header");

}

​

function setup() {

    createCanvas(800, 600);  // Adjust canvas size as needed

    background(220);

    noLoop();

​

    // First, find the bounding latitude and longitude to know the canvas boundaries

    for (let row of table.rows) {

        let lat = row.getNum('latitude');

        let lon = row.getNum('longitude');

​

        latMin = min(latMin, lat);

        latMax = max(latMax, lat);

        lonMin = min(lonMin, lon);

        lonMax = max(lonMax, lon);

    }

​

    // Now, map and draw each point on the canvas

    for (let row of table.rows) {

        let value = row.getNum('value');

        let lat = row.getNum('latitude');

        let lon = row.getNum('longitude');

​

        // Convert lat and lon to x and y based on the canvas size

        let x = map(lon, lonMin, lonMax, 0+50, width-50);

        let y = map(lat, latMax, latMin, 0+50, height-50); // latMax and latMin are swapped because the canvas' y starts from top

​

        let col = lerpColor(color(0, 0, 255), color(255, 0, 0), value);

        fill(col);

        noStroke();

        ellipse(x, y, 10);

    }

}

​

function draw() {

    // All the drawing is done in setup so nothing is needed here

}

​