sketch.js

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.accesstoken.0B1QDD4nZyTssuDJPrax2Q');
    
    earthquakes = loadStrings('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv');

}

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;

}


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 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 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);
        }
    }
    
}