how to read and display points(read coordinate information from CSV file) over time?

littleprince84

Hi, I'm very beginner. I really need your help.

My project is...

1. display amount of activities(which done on same day, date and time / described as circle size) for each 5 different points on the map.

2. if you finished to display activities of 5 points for day1, date1 and time 0, then now display 5 points for time1...and so on(for time 2, time 3, time 4.....)

3. if you finish displaying 5 points for the 1st day, now do the same thing for the next(2nd day)

4. the result needs to be "animation" which shows the movement of activities on 5 points on the map over time(by time and then date)

The structure of CSV(which includes the information of location, amount of activities, time and date) file is as follow

I've tried to display for the first day of first time(time00) by using this code. (I erased time01~05 for this test)

import com.reades.mapthing.*;
import net.divbyzero.gpx.*;
import net.divbyzero.gpx.parser.*;
import de.fhpotsdam.unfolding.*;
import de.fhpotsdam.unfolding.geo.*;
import de.fhpotsdam.unfolding.utils.*;
import de.fhpotsdam.unfolding.providers.*;

UnfoldingMap map;

ArrayList<Position> admins = new ArrayList(); //declare and create array "admis" 

void setup() {
  size(800, 600, P2D);
  smooth();

  // Create interactive map centered around Jeju
  map = new UnfoldingMap(this, new OpenStreetMap.OpenStreetMapProvider());
  map.zoomAndPanTo(10, new Location(33.35, 126.52));
  MapUtils.createDefaultEventDispatcher(this, map);
  map.setTweening(true);

  // Load CSV data
  Table DataCSV = loadTable("time_201303.csv", "header");
  for (TableRow Row : DataCSV.rows()) {
    // Create new empty object to store data
    Position container = new Position();
    // Read data from CSV
    float lat = Row.getFloat("Y_COORD");
    float lng = Row.getFloat("X_COORD");
    container.location = new Location(lat, lng);
    // Add to list of all bike stations
    admins.add(container);
}
}

void draw() {
  // Draw map and darken it a bit
  map.draw();
  fill(0, 150);
  rect(0, 0, width, height);

  noStroke();

  // Iterate over all admins
  for (Position b : admins) {
    // Convert geo locations to screen positions
    ScreenPosition pos = map.getScreenPosition(b.location);
    fill(200, 30, 200, 50);
    ellipse(pos.x, pos.y, 20, 20);
  }
}

---

My questions are

1. what is the code structure which enables me to read data over time? (read right direction first, and downward direction in the table above) what is the code structure which enables me to display data over time?

2. Can I make this code simpler

plz help me ㅜㅜ

TfGuy44

https://forum.processing.org/two/discussion/15473/readme-how-to-format-code-and-text

You would not read the data over time. Instead, you would load the entire file of data into an array, one time, when the sketch starts, and then access the values stored in that data over time as needed.

If you need to know how much time has elapsed since the sketch started, use millis(). DO NOT USE delay(). Using millis(), you can also determine how much time has passed between two events.

Other advice: break your problem down into smaller steps. There is no need to use the massive amount of data right away. Start by just getting it to display the first day - or the first frame.

You are including a lot of libraries. Do you really need them all to demonstrate what your problem is?

littleprince84

Thanks for your advice. And what I wanna know is 1) the code which allows me to read/display data over time.

TfGuy44

Here is an example sketch that shows a bar graph of data appearing over time. Every frame, the current elapsed time is checked to see if a second has passed. If it has, and there are still more bars that can be displayed, then the number of bars that are displayed (upTo) increases. In this way, it appears that more data is presented after some amount of time has elapsed.

Once you understand the concepts that this code presents, you can attempt to apply them to your own code. Post your attempt at this for more help.

int[] data = new int[10];
int upTo = 0;
int time;

void setup(){
  size(440,440);
  for( int i = 0; i < data.length; i++){
    data[i] = int(random(height));
  }
  newTime();
}

void draw(){
  background(0);
  for( int i = 0; i < upTo; i++){
    fill(25*i,255,map(data[i],0,height,0,255));
    rect(44*i,height-data[i],44,data[i]);
  }
  if( millis() > time ){
    newTime();
    if( upTo < data.length ){
      upTo++;
    }
  }
}

void newTime(){
  time = millis() + 1000;
}