// lat between 21.3 and 61.3

// lon between -157 and -70

// mas referencias en https://p5js.org/es/reference/#/p5/loadTable

// let longitude = [77, 94, 104];

// let latitude = [39, 41, 41];

​

let table;

let pic;

​

let slider;

​

let s = 'By scraping the text of stories it published, this map shows the cities covered most by the Guardian US news desk in the last year. Please use the slider to move through the number of days of coverage you would like to see represented. As it stands it is an approximate representation. For example, the glaring ommission of Washington DC from the count is a technical issue. The map we chose also constricts our pinpoint accuracy. Thank you.';

​

let points = [];

​

//width related

let LongMin = 124;

let LongMax = 66;

let MapWidthMin = 20;

let MapWidthMax = 2150;

​

//height related

let LatMin = 25;

let LatMax = 49;

let MapHeightMin = 5;

let MapHeightMax = 1148;

​

let daysPassed = 0;

let prevDay;

​

let dateFrame = 2

​

let cityObjects = [];

​

let temp1, temp2, temp3, temp4;

​

function preload() {

  pic = loadImage("map_2.png");

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

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  background('skyblue');  

  slider.position(10, 600);

  slider.style('width', '800px');

  txt.position(850, 600);

  fill(50);

  text(s, 10, 500, (width*(3/4)))

​

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background('skyblue');

  slider = createSlider(0, 300, 30, 1);

  slider.position(10, 600);

  slider.style('width', '800px');

  slider.input(fillData);

  txt = createP();

  txt.position(850, 600);

  fillData();

  fill(50);

  text(s, 10, 500, (width*(3/4)))

​

}

​

function draw() {

​

  dateFrame = slider.value();

  txt.html(dateFrame);

​

  //console.log(cityObjects)

  dispWidth = windowWidth;

  dispHeight = (pic.height / pic.width) * dispWidth;

​

  image(pic, 0, 0, dispWidth, dispHeight);

​

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

    cityObjects[i].adjust();

    cityObjects[i].show();

  }

  for (let cit of cityObjects) {    

    if (cit.mouseHover(mouseX, mouseY)) {

      cit.showName(mouseX, mouseY);

    }

  }

  dateFrame += 1;

  fillData()  

}

​

class City {

  constructor(name, lon, lat) {

    this.name = name;

    this.lon = lon;

    this.lat = lat;

    this.count = 1;

    this.point;

  }

  mouseHover(mX, mY) {

    this.adjust();

    let d = dist(mX, mY, this.point.windowX, this.point.windowY)

    return (d < this.point.r);

  }

  adjust(){

    this.point = new CityPoints(this.lon, this.lat, this.count);

    this.point.adjust();

  }

  show(){

    this.point.show();

  }

  showName(mX, mY) {

    fill(255);

    textSize(36);

    text(this.name, mouseX, mouseY);

  }

}

​

function fillData(){

  resetCities();

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

    let cityName = table.getString(r, 0);

    let lon = (Number(table.getString(r, 2)));

    let lat = (Number(table.getString(r, 1)));

    let year = table.getString(r, 3);

    let month = table.getString(r, 4);

    let day = table.getString(r, 5);

    if(prevDay != day){

      daysPassed += 1;

    }

    if(daysPassed >= dateFrame){

      break;

    }

    let found = false;

    for (let c = 0; c < cityObjects.length; c++){

      if(cityName == cityObjects[c].name){

        cityObjects[c].count += 1;

        found = true;

        obj = cityObjects[c].count += 1;

      } 

    }

    if (found == false){

      cityObjects.push(new City(cityName, lon, lat))

    }

    prevDay = day;

​

  }

​

}

​

function resetCities(){

  daysPassed = 0;

  for (let c = 0; c < cityObjects.length; c++){

    cityObjects[c].count = 0;

  }

}

​

class CityPoints {

  constructor(x, y, d) {

    this.x = x; //longitude

    this.y = y; //latitude

    this.d = d; //size that the city is mentioned

    this.windowX = 999;

    this.windowY = 999;

    this.r = 0;

  }

​

  adjust() {

    //longitude of points

​

    temp1 = map(this.x * -1 - 1.5, LongMin, LongMax, MapWidthMin, MapWidthMax); //outpt with regard to original imgage dimensions

​

    this.windowX = map(temp1,MapWidthMin, MapWidthMax,

      (dispWidth / pic.width) * MapWidthMin,

      (dispWidth / pic.width) * MapWidthMax

    );

​

    //latitude of points

    temp3 = map(this.y, LatMax, LatMin, 0, pic.height); //outpt with regard to original imgage dimensions

​

    this.windowY = map(temp3, 0,pic.height,(dispHeight / pic.height) * MapHeightMin,(dispHeight / pic.height) * MapHeightMax);

    this.r = map(this.d, 0, 100, 5, 15);

  }

​

  show() {

    noStroke();

    fill(255, 50, 15, 60)

    ellipse(this.windowX, this.windowY, this.r);

  }

}

​