We are about to switch to a new forum software. Until then we have removed the registration on this forum.
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);
}
}
}
Answers
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
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
You can use the following function to manipulate time: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse
Kf