Week 4 Assignment

Concept:

For this week, I focused on creating a project on data visualization. The idea here was to provide a map of every single airport in the world, no matter the size or the location. To provide some interactivity in the project, I decided to add the function of moving the mouse and slowly revealing the map.

I was inspired while checking the passport map and ranking available at https://www.passportindex.org/. In here, we can see a map that is divided by countries and shows the ranking of each passport in terms of visa-less travel.

Having obtained the altitude, longitude and latitude of each airport, I presented a map that would plot all three coordinates. Hovering the mouse will show the airports around that area and pressing will reveal the map.

Implementation:

For this project, I browsed different APIs and datasets that I could plot and represent in the sketch. I ended up finding this dataset in Kaggle.

https://www.kaggle.com/datasets/mexwell/world-airports

Initially, I implemented different types of datasets for the airports. However, the biggest problem was regarding the size. Due to the fact that removing items from the list would go against the purpose of the project itself, I decided to search for a CSV file that would be within the limits of P5JS.

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]);
     } 
  }
}

 

Challenges and Improvements:

I would have liked to improve the interactivity and the amount of data provided. For example, I already have the names of each airport and their altitude. With this, I would have liked to show the name of each airport, but I was not able to solve the problem with the size of the dots. In order to show every dot properly, I could not change the size too much, because it relies on the altitude.

Interestingly, the map ended up showing a very pretty plot, which resembles logically the altitude of different areas around the world. We will see that the north-western side of South America has a lot of big circles, which symbolize the amount of high airports there are around Bolivia and countries around the area.