tutorial 4.2:

Simple projection: CSV

In this tutorial we will look at methods for introducing geolocated data into your Processing sketches, and for working with live data streams using CSV (Comma-Separated Values) data files.


1) Reading geographic data from CSV

Geographic data is often stored as an XML file or a CSV. If you're more comfortable working with CSV in your sketch, you can always re-format an XML data source as one or more CSV files (tables) using Processing.

The data used in this sketch is a twitter data export for one twitter user over the course of a few hours, overlaid with data from a mobile app called MyTracks that stores a record of the places your phone has been with associated metadata such as the strength of the GPS signal in each location and the altitude. This is essentially the same example as 4.1 except that two CSV tables are used rather than one XML data source.

The code for this sketch is as follows:

/*

 A sketch written by Phil Langley for studioOpenData

 Data Used :
 My Tracks and Twitter data, courtesy of the studioOpenData students

 This function maps latitude and longitude coordinates from a CSV file to x and y coordinates

*/


int W=600;
int H=600;
int BOARDER = 200;

float posX;
float posY;
float dia;
float col;

Table dataTable;
Table dataTableTweets;
XML xmlData;
XML[] childrenNode;

float lonMin = 100000000;
float lonMax = -100000000;
float latMin = 100000000;
float latMax = -100000000;

int SCALEFACTOR = 50000;

PFont Calibri;

void setup() {
  smooth();
  readData();
  sortGEO();
  size(W, H);
  Calibri = loadFont("Calibri-12.vlw");
}

void draw() {
  noLoop();
  background(255);
  drawGEO();
  drawTweets();
}

2) Functions

The functions are the same as those used in example 4.1 with the exception of the readData() function and one new function, drawTweets(), which is used to draw the location of each tweet and to print as text some of the metadata associated with the tweet.

void readData(){
   dataTable = loadTable("sampleData.csv");
   dataTableTweets = loadTable("tweetData.csv");
} 

The readData() function reads two CSV files into two separate instances of the Table class. These files contain the MyTracks and Twitter user data.

void drawTweets(){

    int rowMax = dataTableTweets.getRowCount();
    int count=1;

/////////////LOOP THROUGH THE TWEET DATA 
/////////////TRANSLATE THE COORDINATES TO MATCH THE WINDOW SIZE
    for (int i=1; i<rowMax; i++){

      posX = (dataTableTweets.getFloat(i,1)-lonMin)*SCALEFACTOR;
      posX = posX+(BOARDER/2);
      println(dataTableTweets.getFloat(i,1));
      println(posX);

      posY = H-(dataTableTweets.getFloat(i,2)-latMin)*SCALEFACTOR;
      posY = posY-(BOARDER/2);
      println(dataTableTweets.getFloat(i,2));
      println(posY);
      ///DRAW THE MARKER FOR EACH TWEET
      strokeWeight(5);
      stroke(0,0,255,100);
      noFill();
      line(posX-10, posY, posX+10, posY);
      line(posX, posY-10, posX, posY+10);
      strokeWeight(3);
      ellipse(posX, posY, 75,75);

      ///DRAW THE TEXT FOR EACH TWEET
      stroke(0);
      fill(0);
      textFont(Calibri);
      String twtTxt = dataTableTweets.getString(i,4);
      //text(twtTxt, posX, posY);
      String twtTime = dataTableTweets.getString(i,3);
      //text(twtTime, posX, posY-10);
      String twtID = dataTableTweets.getString(i,0);
      text(twtID, posX, posY-20);
      count++;
    }
}

The drawTweets() function draws a marker and text for each tweet in the CSV.

You can download the code and data from this example here.