ICM Media Entry#6: Data Visualization

As the semester comes to a close I felt like making something that represents the people I care about in my life; my friends and family. I wanted to make a sketch that uses data based on them and try to map it in P5.

This is a map I made which highlights the different countries my friends and family are, this served as the basis for my idea. In order to construct a similar map in P5 I followed Dan Shiffman's videos on using open-source mapping platforms such as Mappa.JS and MapBox.

This is how Mappa.JS has the user follow its code 
myMap = mappa.tileMap(options)
 myMap.overlay(canvas)

I used their API's to link my sketch to. I also made different csv files with datasets about my friends; the latitudes and longitudes of the countries they live in, the number of them that live in the same area, how far they are from each other and from myself. I made similar csv files for my family.

Earlier during this week while nearing the end of my sketches, my code didn't end up working. I remade the files and tried to see where I messed up but nothing worked. This is as far as I got with Mappa.JS in my sketch. The map loads but it doesn't display the nodes for the map locations.

In order to get the nodes to show up I had to set a minimum and maximum for how many nodes (locations of my friends) it could display.

function setup() { // following instructions and syntax on mappa's website 
  canvas = createCanvas(900, 600)
  myMap = mappa.tileMap(options)
  myMap.overlay(canvas)

  let maxSubs = 0;
  let minSubs = Infinity;


  for (let row of mapLocations.rows) {
    let country = row.get('Country ID')
    let latlon = countries[country];

    if (latlon) {
      let lat = latlon[0]            // latitude 
      let lon = latlon[1]            // Longitude 

      let count = row.get('Friends/Family');
      data.push({
        lat,
        lon,
        count
      });
      if (count > maxSubs) {
        maxSubs = count;
      }
      if (count < minSubs) {
        minSubs = count;
      }
    }
  }

After this didn't work out I decided to simplify my variables and make a smaller csv file to lower any chances of mistakes. I decided to make a simple bar-chart about how many friends and family are in different countries.

It still uses the same template as the map design. I had the bar-chart map out the number of people I knew in different countries. Then I color coded it so that the bars with the greatest distance from me in Lahore was in red and the ones close were in blue.

A new thing I found while following a tutorial was that instead of using a local csv file, you can link your own google sheets url and P5 will recognize and use that instead. I added both ways so that I can quickly update the sketch if I choose to make changes within the file itself.

function preload() {
  //data = loadTable(url, 'csv', 'header');           // can either run the url file 
  data = loadTable('Map.csv', 'csv', 'header');       // or the local file 
}

This is the main body of the code.

function draw() {
  background(0)

  if (data) { // if there is data in the table then it runs otherwise it doesnt 

    let numRows = data.getRowCount() // get the row count from the csv file/ url

    let fam = data.getColumn('Family/Friends')
    let location = data.getColumn('Location')   //this one is just there to be able to run in the console 
    let distance = data.getColumn('Distance')

    // reading the console log shows how many people are in an area and it lists what the locations are
    
    print(fam)
    print(location)

    for (let i = 0; i < numRows; i++) { // loops for the number of rows in the file i.e 14
      let x = 50                          // x value 
      let y = 100 + (i * 15)              // y value 
      let w = fam[i] * 30                 // width 
      let h = 5                           // height


      if (distance[i] >= 10) { // if the distance is less 7000km then the rectangle will be blue otherwise its red 
        fill('blue')
      } else {
        fill('red')
      rect(x, y, w, h)
      }
    }
  }
}

The console displays the number of people (fam) in each country/ city as well as the names of the locations. Ideally I'd want these variables to be within the sketch itself but I couldn't figure out how to do that. That being said as it stands now it looks very minimalistic which I don't mind. In end I wasn't able to make the exact idea I had in mind but was able to make a version of it and I'm pretty happy with what I got.