//http://vda-lab.github.io/2015/10/hands-on-data-visualization-using-p5

​

let flight;

let enterButton;

let input;

let rows;

​

function setup() {

  createCanvas(700, 400);

  flight = loadTable("flights.csv", "csv", "header", process); //call back function

  input = createInput("United Arab Emirates");

  input.position(width / 2 - 100, height - 30);

  enterButton = createButton("Enter");

  enterButton.position(width / 2 + 50, height - 30);

  rectMode(CENTER);

  textAlign(CENTER);

}

​

function process(data) {

  rows = flight.getRows();

  getInfo();

  intialFlights();

  fill(255);

  textSize(18);

  text(

    "Enter a country name to get the flights information",

    width / 2,

    height - 45

  );

}

​

function draw() {

  enterButton.mouseClicked(getflightDetails);

  // noLoop()

}

​

//default flights

function intialFlights() {

  noStroke();

  background(28, 41, 62);

  fill(57, 255, 20, 70);

  for (data = 0; data < rows.length; data++) {

    ellipse(rows[data].from_long, rows[data].from_lat, 4, 4);

  }

}

​

function getflightDetails() {

  intialFlights(); //refresh screen

​

  let flightCount = 0;

​

  for (data = 0; data < rows.length; data++) {

    if (rows[data].from_country.toUpperCase() == input.value().toUpperCase()) {

      push();

      fill(255, 100, 100, 0.8);

      ellipse(rows[data].from_long, rows[data].from_lat, 4, 4);

      ellipse(rows[data].to_long, rows[data].to_lat, 4, 4);

      pop();

​

      push();

      stroke(255, 117, 117, 100);

      line(

        rows[data].from_long,

        rows[data].from_lat,

        rows[data].to_long,

        rows[data].to_lat

      );

      pop();

      flightCount++;

    }

  }

​

  if (flightCount != 0) {

    fill(255);

    textSize(18);

    text(

      "There are " + flightCount + " flights from " + input.value(),

      width / 2,

      height - 45

    );

  } else {

    fill(255);

    textSize(18);

    text(

      "Invalid country name, please try again!",

      width / 2,

      height - 45

    );

  }

}

​

function getInfo() {

  for (data = 0; data < rows.length; data++) {

    var from_long = rows[data].getNum("from_long");

    var from_lat = rows[data].getNum("from_lat");

    var to_long = rows[data].getNum("to_long");

    var to_lat = rows[data].getNum("to_lat");

​

    rows[data].from_country = rows[data].getString("from_country");

    rows[data].to_country = rows[data].getString("to_country");

    rows[data].from_long = map(from_long, -180, 180, 0, width);

    rows[data].from_lat = map(from_lat, -90, 90, height, 0);

    rows[data].to_long = map(to_long, -180, 180, 0, width);

    rows[data].to_lat = map(to_lat, -90, 90, height, 0);

  }

}

​