Brand new to P5, relatively new to JS in general (earthquake data)

spkellydev

Hey P5 board;

I've been learning javascript over the last couple of months, teaching myself. I'm trying to expand how I think about javascript and learn how to interact with data. That led me to Schiffman's youtube videos and here I am!

Anyway, I'm hoping someone could help me figure out how to sort USGS earthquake data by time using a slider. Here's my Gist of the code, but below I'll include where I'm finding problems.

I can't figure out how to map the timestamps to something usable on the slider. Any help is welcome!

For starters, I'm not sure if I'm even mapping my slider correctly. Here's the** time function**:

function timeSlider(min, max) {

    //ms
    //slider = createSlider(minMS, currentTime, maxMS);
    //day in ms
    min = 86400000;
    //30 days in ms
    max = min * 30;
    //get 30 days ago timestamp
    min = currentTime - max;

    max = currentTime;
    //map slider from 1 day in ms to 30 days in ms
    var sliderMinMS = map(minMS, 0, min, 0, currentTime);
    var sliderMaxMS = map(maxMS, 0, (max - min), 0, currentTime);
    return sliderMinMS, sliderMaxMS;
}

Here's the setup function:

function setup() {
    createCanvas(1024, 512);
    translate(width / 2, height / 2);
    imageMode(CENTER);
    image(mapImg, 0, 0);

    timeSlider(minMS, maxMS);

    slider = createSlider(minMS, currentTime, maxMS);
    slider.size(900);
    slider.position(20, 450);

}

here's the draw function (is this the most efficient way to display the data?):

function draw() {
    var cx = webMerX(clon);
    var cy = webMerY(clat);


    for (var i = 1; i < earthquakes.length; i++) {
        data = earthquakes[i].split(/,/);

        date[i] = data[0];
        //convert quake time to ms
        var timeQuake = [];
        timeQuake = date[i].getTime();

        var lat = data[1];
        var lon = data[2];

        var mag = data[4];

        var x = webMerX(lon) - cx;
        var y = webMerY(lat) - cy;

        mag = sqrt(pow(10, mag));
        var magMax = sqrt(pow(10,10));

        var d = map(mag, 0, magMax, 0, 500);

        if(timeQuake[i] <= slider.value()) {

            fill(255, 130, 100);
            stroke(255);
            ellipse(x, y, d, d);
        }
    }

}

kfrajer

I can't figure out how to map the timestamps to something usable on the slider. Any help is welcome!

Not sure how a timestamp would map to your slider. Based on your code, you are showing certain time + 30 days. The slider could set the start time. That will be one approach. A second approach is that if you use a double Slider, then you could select the data to display by setting the lower and max time ranges independently.

I have modified your code to display all the data. There are two things missing. The first one is to properly convert raw time into seconds. After you do that, you need to enable the slider condition to make your slider effective. Code here http://p5js.sketchpad.cc/sp/pad/view/LLapCIpHx4/latest and also below.

Kf

var zoom = 1;
var mapImg; 

var clon = 0;
var clat = 0;
//Red Bank 40.3471° N, 74.0643° W
var lat = 40.3471;
var lon = -74.0643;

var eathquakes;
var data;
var date = [];

var slider;
var currentTime = new Date();
currentTime = currentTime.getTime();
var minMS, maxMS;



function preload() {
  mapImg = loadImage('https://"+"api.mapbox.com/styles/v1/mapbox/dark-v9/static/0,0,1,0,0/1024x512?access_token=pk.eyJ1Ijoic3BrZWxseWRldiIsImEiOiJjajFvdmI1cWMwMDJiMzNtbGQwM3VobHcwIn0.0B1QDD4nZyTssuDJPrax2Q');

  earthquakes = loadStrings('https://"+"earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv');
}



function setup() {
  createCanvas(1024, 512);
  translate(width / 2, height / 2);
  imageMode(CENTER);
  image(mapImg, 0, 0);

  timeSlider(minMS, maxMS);

  slider = createSlider(minMS, currentTime, maxMS);
  slider.size(900);
  slider.position(20, 450);
}

function draw() {
  translate(width / 2, height / 2);
  image(mapImg, 0, 0);
  text(slider.value(),-width/4,0);      

  var cx = webMerX(clon);
  var cy = webMerY(clat); 


  for (var i = 1; i < earthquakes.length; i++) {  //earthquakes.length
    data = earthquakes[i].split(",");

    //date[i] = data[0];
    //convert quake time to ms

    var timeQuake = date[0]; //  Raw time sample: 2017-04-21T06:46:18.627Z

    //MISSING: Converting raw time to ms. Notice raw time is Zulu time

    var lat = data[1];
    var lon = data[2];
    var mag = data[4];

    var x = webMerX(lon) - cx;
    var y = webMerY(lat) - cy;

    mag = sqrt(pow(10, mag));
    var magMax = sqrt(pow(10, 10));

    var d = map(mag, 0, magMax, 0, 100);

    //MISSING: Enabling slider after time stamp is properly processed
    ////if (timeQuake[i] <= slider.value()) {

      fill(255, 130, 100);
      stroke(255);
      ellipse(x, y, d, d);
    ////}
  }
}

//=====================================================================
function timeSlider(min, max) {

  //ms
  //slider = createSlider(minMS, currentTime, maxMS);
  //day in ms
  min = 86400000;
  //30 days in ms
  max = min * 30;
  //get 30 days ago timestamp
  min = currentTime - max;

  max = currentTime;
  //map slider from 1 day in ms to 30 days in ms
  var sliderMinMS = map(minMS, 0, min, 0, currentTime);
  var sliderMaxMS = map(maxMS, 0, (max - min), 0, currentTime);
  return sliderMinMS, sliderMaxMS;
}

//=====================================================================
function webMerX(lon) {
  lon = radians(lon);
  var a = (256 / PI) * pow(2, zoom);
  var b = lon + PI;
  return a*b;
}

//=====================================================================
function webMerY(lat) {
  lat = radians(lat);
  var a = (256 / PI) * pow(2, zoom);
  var b = tan(PI / 4 + lat / 2);
  var c = PI - log(b);
  return a*c;
}

spkellydev

WOW okay. I totally understand why you say its confusing based on my code. Thanks so much. Something shook loose after I read your response, I think I'm going to just slide them based on index number and print the time to the screen. Seems like a much more efficient program anyway

kfrajer

You can use the following function to manipulate time: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

//TEST: 2017-04-21T06:46:18.627Z (Data from csv file)
//RETURN by Date.parse(): 1492757178627 (units in msecs)

Kf