​

function preload() {

  table = loadTable('airports_data.csv', 'csv', 'header');

}

var airportsX = [];

  var airportsY = [];

var airportsName = [];

var airportsAlt = [];

function setup() {

  createCanvas(1600, 1300);

  background(0);

  //count the columns

  print(table.getRowCount() + ' total rows in table');

  print(table.getColumnCount() + ' total columns in table');

  //get array for each column

  let lng = table.getColumn("lon");

  let lat = table.getColumn("lat");

  let name = table.getColumn("name");

  let high = table.getColumn("alt");

  for (let i = 0; i < table.getRowCount(); i++) {

    airportsX.push(parseFloat(lng[i]*4)+800);

    airportsY.push(-(parseFloat(lat[i])*4)+400);

    airportsName.push(name[i]);

    airportsAlt.push(high[i]);

    //push the parsed to float values and the airport names/altitudes values.

  }

  //push to local array

}

​

function draw(){

  background(0);

  for(let i = 0;i<airportsX.length;i++){

    //if it is close to the mouse and we are not pressing the mouse.

    if(abs(mouseX-airportsX[i]) < 100&&abs(mouseY-airportsY[i]) < 100 && !mouseIsPressed){

      stroke(255);

      strokeWeight(airportsAlt[i]/400)

      point(airportsX[i],airportsY[i]);

    }

    //show whole map if we pressing.

     else if (mouseIsPressed){

       stroke(255);

       strokeWeight(airportsAlt[i]/400);

       point(airportsX[i],airportsY[i]);

     } 

  }

}