For this assignment I wanted to use data visualization and how I could use simple data to create an artwork or something interactive. After watching few videos and searching for possible data that I could use I came across this Visual Data Analysis lab that had used this flights dataset to create a data visualization.
After looking at this i was inspired to use the same dataset but to create an interactive world map using this dataset which could allow the user to enter a country as input and the sketch would show all the destinations they flights have gone to and what the number of flights are.
Initially, the downloaded flights.csv file was more than 5mb and P5.js did not allow me to upload the file. Hence I filtered the data as per the things I would need for this assignment. Since I was focusing on countries alone I removed the airport names along with the cities the flights were coming and going to.
For loading the data into my sketch i used the loadTable() function in P5.js that allowed me to read the data from my file and store it into my table.
After loading the table I set up a function call process where each line of the data would be fed in as a row. Then I’m using a get info function which gets the longitude and latitude from the row of the departure and destination location. It also maps out the longitude and latitude coordinates onto the dimensions of the sketch which is later used to draw circles at each location. This initial mapping and drawing of ellipses allows the green dots to create a rough outline of the world map onto the sketch.
Then I’m using a get flights detail function that matches the input from the user to the row data and to avoid case sensitivity issues a converted both strings to uppercase and check if they are the same. If so, and I am using the row’s departure and destination mapped coordinates to draw a line between them by pushing and popping each one. I’m also using a flight counter variable which allows me to keep track of the number of flights and displayed to the user as output.
Click here to view the sketch in fullscreen mode.
Great job Dev!