Week 4 – Text and Data Visualization – Introduction to Interactive Media

Concept

I wanted to combine both text and data visualization for this assignment so I decided to import a dataset containing countries with their respective latitude and longitudes. After importing these, I split each row of information by commas and saved the country name, longitude, and latitude in variables. I then used these variables to create objects for each country and saved their name along with their x and y positions. The initial x and y positions are the country’s longitude and latitude mapped onto the canvas and then these countries are made to move along the canvas while their original locations (represented by blinking points) stay static. The background is an image of the world map.

This piece represents the dynamism that exists between countries today. The world is super interlinked with countries staying connected, be it through trade, technology, or politics. Thus, this piece aims to represent our dynamic, ever-evolving, globalized world. Moreover, for interactivity, the mouse can be pressed to pause and play the motion of the countries.

Sketch and Code

For this sketch, I used the following as can be seen in my code:

Image
Data visualization (country dataset)
Text
OOP to create country objects
Mapping
Loops
Randomization

//declare global variables
let img;
let lat;
let lon;
let country;
let countries =[];
let minSpeedX =-1;
let maxSpeedX =1;
let minSpeedY =-2;
let maxSpeedY = 2;
let updateScreen =true;

//preload images and csv data to avoid errors/undefined values
function preload() {
  img = loadImage('image/3.png');//2
  // The text from the file is loaded into an array.
  strings = loadStrings("world.csv");
}

//set up a canvas
function setup() {
    createCanvas(600, 500);
    smooth();
    background(220);  
    image(img, 0, 0);
    //frameRate(50);
  // Top-left corner of the img is at (0, 0)
  // Width and height are the img's original width and height
  
  if (strings == null) {
    print("failed to load the file, stopping here");
    // this is an endless loop; it's a common way
    // to prevent a program from continuing when
    // something is so wrong that there is no sense
    // in continuing
    while (true) {}
  }
  print(
    "strings loaded from file successfully, read " + strings.length + " lines"
  );
  
  //use countries data from csv to find name, latitude, and longitude of each country and save each into country objects
  findcountryLocation();
 
}
function draw()
{
  //user can press mouse to pause and play the motion of the country names
   if(mouseIsPressed){
  if (updateScreen == true)
    {
      updateScreen = false;
    }
     else {
       if (updateScreen == false)
         {
           updateScreen = true;
         }
     }
}
  //whenever update screen is true, allow the countries to update/move
  if (updateScreen==true){
     image(img, 0, 0);
    for (let i = 0; i < countries.length; i++)
    {
      countries[i].update();
    
    }
  }
}
  //use countries data from csv to find name, latitude, and longitude of each country and save each into country objects
function findcountryLocation(){
  let row =[];
  // loop over each row in the file
  for (let csvRowNumber = 1; csvRowNumber < strings.length; csvRowNumber++) {
    // get a single row and split that row
    // into individual words
    row = split(strings[csvRowNumber], ",");
    lat = row[1];
    lon = row[2];
    country = row[3];
    //print(country, ' ', lat,' ', lon);
  
    //map the country's longitude and latitude within the limits of our canvas
    ypos = map(lat, -90, 90, 0, height);
    xpos = map(lon, -180,180, 0, width);
    
    //create country object to save name, x and y position in an array of countries
    newCountry = new my_country(country, xpos, ypos, random(minSpeedX, maxSpeedX), random(minSpeedY, maxSpeedY));
    countries.push(newCountry);
  } 
}
//class to save data of countries
class my_country {
  constructor(country, x, y, speedX, speedY){
    this.country = country;
    this.x = x;
    this.y = y; 
    this.speedX=speedX;
    this.speedY=speedY;
    this.pointX =x;
    this.pointY =y;
  }
  
  //function to move the country names
  update(){
    //move/translate the blinking points to center them on canvas
    push();
    translate(0,-80);
    fill(random(255));
    noStroke();
    ellipse(this.pointX,this.pointY,3,3);
    pop();
    
    //write the country name at x and y and update x and y to move the names
    //if the names touch the canvas boundary, change their direction so they bounce back
    fill('white');
    textSize(8)
    text(this.country, this.x, this.y);
    this.x+=this.speedX;
    this.y+=this.speedY;
    if (this.x > width || this.x < 0){
      this.speedX = -this.speedX
    }
    if (this.y > height || this.y < 0)
      {
        this.speedY = -this.speedY
      }
  }
}

Reflection and Further Improvements

I had a lot of fun working with both text and datasets as I loved how such a simple data import allowed for a random and intricate design to be created. I also enjoyed representing our world and its dynamism through this piece and something I realized that this type of art can help us do is convey a message or raise awareness. In future works, I would love to use other data sets to represent a problem in our world such as carbon emissions data or poverty rates, or convey a message/concept as I did for this piece. Something I can improve is the mapping of longitudes and latitudes as I felt the points did not perfectly map on the image and this is something I can further look into to improve.

Leave a Reply Cancel reply