Where are We From?

For this week’s assignment Lama and I decided to go for data visualization in Processing, as this is a field with a lot of potential in the future. There is certainly all kind of data that one can visualize and, as we were looking for ideas and inspirations, we came across a full spectrum of data that people have visualized, for example, the crime rate in Northern Italy, the average number of unhealthy teeth in 12 year old girls in different countries of the world, etc. Our idea eventually connected to NYUAD because we are all part of this university, and we decided to use Processing to show the countries represented in the Class of 2019 and 2020. There are currently info sheets available about these classes called “By the Numbers”, but the only information it gives is a map where the countries where students are from are in a different color. There are no names of the countries and no interactivity with the map. We wanted to add both of these features to our version of this data visualization:

  1. To get started we had to collect the data from the two world maps available for the Class of 2019 and the Class of 2020. Because we did not have a list of the names of the countries represented available, the only way to go about this was to write out all of the countries by using our geography and map reading skills. After that we wrote them out in an Excel spreadsheet.
the available info sheet about the Class of 2020
the list of countries in an Excel spreadsheet for the Class of 2020

 

  1. To create the world map we used a library called GiCentre, which draws all the countries of the world in the Processing sketch. We uploaded two tables to our Processing file, each containing the list of the countries and their representative country codes that we acquired from the GiCentre table with all of the world’s countries and their codes inside.
  1. After including the data about the countries represented at NYUAD in the Processing file, we wanted to create several modes for visualizing the data.
  • The first mode is called the Explore mode, because in this mode you start with a blank world map and, by hovering around the canvas, the countries represented at NYUAD get filled in with dark purple color if the mouse is inside the country’s border. The name of the country also appears on the left side of the canvas. These are pictures of a few countries, which get filled in if the mouse is hovered over them:
the Explore mode when the mouse is not hovered over any country represented at NYUAD Class of 2020
when the mouse is over The United States
when the mouse is over Costa Rica
when the mouse is over The Czech Republic
when the mouse is over Russia
when the mouse is over Lebanon
when the mouse is over Latvia

 

  • The second mode is called the Simple mode because it is just displaying all of the countries at once, of course, using the dark purple color as a filler color. This is the picture of the Simple mode for the Class of 2020:
the Simple mode when the mouse is hovered over the small square that changes the modes

In order to switch in between the Simple mode and the Explorer mode there is a button in the bottom of the screen. The button is a small white square. By hovering over the button the current mode changes.

The code:

import org.gicentre.geomap.*;

// Simple interactive world map that queries the attributes
// and highlights selected countries.

GeoMap geoMap;
Table tab2019; 
Table tab2020;

void setup()
{
 size(1000, 600);

 //reads map data 
 geoMap = new GeoMap(100, 70, 800, 400, this);
 geoMap.readFile("world");

 //read class of 2019 data
 tab2019 = loadTable("co2019.csv");

 //read class of 2020 data
 tab2020 = loadTable("co2020.csv");

 // Set up text appearance.
 textAlign(LEFT, BOTTOM);
 textSize(18);
 
 //viewing the table in the console
 //geoMap.writeAttributesAsTable(300);
}

int buttonColor;
int togglePosX = 100;
int togglePosY = 500;
int toggleSize = 25;

void draw()
{
 background(202, 226, 245); // Ocean colour
 stroke(0, 40); // Boundary colour
 
 fill(75,0,130);
 text("Where is the NYUAD Class of 2020 From?", 300, 50);

 fill(buttonColor);
 rect(togglePosX, togglePosY, toggleSize, toggleSize); 
 fill(75,0,130);
 text("Hover to view all countries", 135, 520);

 //button that toggles countries on and off
 if (mouseX > togglePosX && mouseX < togglePosX+toggleSize && mouseY > togglePosY) {
 buttonColor = 0;
 originalMode();
 }
 else 
 {
 buttonColor = 255;
 exploreMode();
 }
 

} 


void originalMode() {
 // Draw countries
 for (int id : geoMap.getFeatures().keySet())
 {
 String countryCode = geoMap.getAttributeTable().findRow(str(id),0).getString("ISO_A3"); 
 TableRow dataRow = tab2020.findRow(countryCode, 1);
 
 if(dataRow != null)
 {
 fill(75,0,130);
 }
 
 else 
 { // No data found in table.
 fill(250);
 }
 
 geoMap.draw(id); // Draw country
 }
 
}

void exploreMode() {
 // Draw countries
 for (int id : geoMap.getFeatures().keySet())
 {
 String countryCode = geoMap.getAttributeTable().findRow(str(id), 0).getString("ISO_A3"); 
 TableRow dataRow = tab2020.findRow(countryCode, 1);

 int theid=-1;
 String hoveredCountry="";
 String name="";
 
 //rolling over each country
 if (dataRow != null)
 {
 theid = geoMap.getID(mouseX, mouseY);
 if (theid!=-1)
 hoveredCountry=geoMap.getAttributeTable().findRow(str(theid), 0).getString("ISO_A3"); 
 }


 if (countryCode==hoveredCountry) // Table row matches country code
 {
 geoMap.draw(theid);
 fill(75, 0, 130);
 name = geoMap.getAttributeTable().findRow(str(theid),0).getString("NAME"); 
 text(name, 100, 300);
 } 
 
 else // No data found in table.
 {
 fill(250);
 }
 geoMap.draw(id); // Draw country
 }
}

Lastly, a massive thanks to Aaron for helping us figure out the code for the Explore mode!! We were struggling with making just one country show up at a time for the longest time ever…