Mapping earthquake data – P5js

Mapping earthquake data using P5js. Next iteration of this is to add some interactions. Credits to Shiffman Daniel

var mapimg;
//center lat and long
var clat =0;
var clong=0;
//lat and long
//11.5449° N, 104.8922° E
//6.2442° N, 75.5812° W
var lat = 6.2442;
var long= -75.5812;
var zoom =1;
var zoomboxFactor = 256;//this is the box size. mapbox is 512
var data;
function preload(){
mapimg = loadImage('https://api.mapbox.com/styles/v1/mapbox/light-v9/static/0,0,1,0,0/1024x512?access_token=APIKey’);
data = loadStrings('https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_month.csv')
}
function setup() {
createCanvas(1024,512);
translate(width*0.5,height*0.5);
imageMode(CENTER);
image(mapimg,0,0);
//center as a point of reference
var cx = WebMercX(clong);
var cy = WebMercY(clat);
for (var i=0; i<data.length;i++){
var dataStore = data[i].split(/,/);
//console.log(dataStore);
var lat = dataStore[1];
var long = dataStore[2];
var mgntd = dataStore[4];
var x = WebMercX(long) - cx;
var y = WebMercY(lat) - cy;
mgntd = pow(mgntd,10);
mgntd = sqrt(mgntd);
var mgntdMax = sqrt(pow(10,10));
var d = map(mgntd,0,mgntdMax,0,200);
noStroke();
fill(0,0,0);
ellipse(x,y,d,d);
}
}
//web mercator formulas
//https://en.wikipedia.org/wiki/Web_Mercator
function WebMercX(long){
//comvert to radians the degrees coming in
long = radians(long);
var a = (zoomboxFactor/PI)*pow(2,zoom);
var b = long+PI;
return a*b;
}
function WebMercY(lat){
lat = radians(lat);
var a = (zoomboxFactor/PI)*pow(2,zoom);
var b = tan(PI/4 + lat/2);
var c = PI-log(b);
return a*c;
}