gistfile1.txt

//changed clat, now lat / lon is in wrong place 
var mapimg,
    clat = 10, 
    clon = 0,
    ww = 1024,
    hh = 512,
    zoom = 1,
    earthquakes;

//hardcoding lat/lon for demo 
var lat = 30,
    lon = -90.1207;

function preload() {
  mapimg = loadImage('https://api.mapbox.com/styles/v1/mapbox/dark-v9/static/' +
    clat + ',' + clon + ',' + zoom + '/' + ww + 'x' + hh +
    '?access_token=pk.eyJ1IjoidGFjYXJzb24iLCJhIjoiY2l6NHY2dDA5MDR0czMycGd4ajMzdGsxZyJ9.gar4fJVs8Yk8HcRo9oG2ng')
  katrina = loadStrings('katrina.csv');
}

//for map projection
function mercX(lon) {
  lon = radians(lon);
  var a = (256 / PI) * pow(2, zoom),
      b = lon + PI;

  return a * b;
}

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

function setup() {
  createCanvas(ww, hh);
  translate(width / 2, height / 2);
  imageMode(CENTER);
  image(mapimg, 0, 0);

  var cx = mercX(clon),
      cy = mercY(clat);

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

    // var lat = data[1],
    //     lon = -data[2];

    // do projection
    var x = mercX(lon) - cx,
        y = mercY(lat) - cy;

    //draw

    stroke(255, 0, 255);
    fill(255, 0, 255, 200);
    ellipse(x, y, 5, 5);
  }
}