let earthquakes;

let magn;

let multiple;

let startDate;

let endDate;

let nudge;

​

​

function preload() {

​

  //set endDate (today)//

​

​

  var today = new Date();

  var dd1 = String(today.getDate()).padStart(2, '0');

  var mm1 = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!

  var yyyy1 = today.getFullYear();

  date1 = yyyy1 + '-' + mm1 + '-' + dd1;

​

  //set startDate (today - 30 days)//

  var now = new Date();

  now.setDate(now.getDate() - 30);

  var dd2 = String(now.getDate()).padStart(2, '0');

  var mm2 = String(now.getMonth() + 1).padStart(2, '0'); //January is 0!

  var yyyy2 = today.getFullYear();

  date2 = yyyy2 + '-' + mm2 + '-' + dd2;

​

  //get API data//  

  url = "https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=" + date2 + "&endtime=" + date1;

  earthquakes = loadJSON(url);

  print(url);

​

}

​

​

​

function setup() {

  createCanvas(400, 1200);

  background(5);

  strokeWeight(.2);

​

​

  ellipseMode(CENTER);

  angleMode(DEGREES);

​

  textFont('Helvetica');

  textSize(18);

  textStyle(BOLD);

  textAlign(CENTER, CENTER);

  fill(100, 0, 0);

  text('Earthquake Magnitudes, Last 30 Days',width/2, 30);

  textFont('Helvetica');

  textSize(7);

  textAlign(CENTER, CENTER);

​

  multiple = 10;

  nudge = 20; // circle y down from top of canvas 

​

  //change JSON milliseconds to nearest date

​

  for (var i in earthquakes.features) {

    var d = new Date(earthquakes.features[i].properties.time);

    d.setHours(0);

    d.setMinutes(0);

    d.setSeconds(0);

    d.setMilliseconds(0);

    d = d.getTime();

    earthquakes.features[i].properties.time = d;

  }

​

  //draw circles for each date of magnitude [for every unique date in json map all feature data as it's own x axis]

​

  for (var i in earthquakes.features) {

    magn = earthquakes.features[i].properties.mag;

    time = earthquakes.features[i].properties.time;

    var date = new Date(); //get current miliseconds in time, create variable

    var mill = date. getTime(); //get current miliseconds in time

    tdiff = (mill - time) / 86400000;

    x = width / 2;

    y = (tdiff / 30) * (height*.90); // multiplying ratio of 30 days against height (adjusted for padding)

    fill(40 * magn, 0, 0);

    ellipse(x, y + nudge, magn * multiple, magn * multiple);

​

    //convert time for date feature print 

    var ntime = new Date(time); // Date 2011-05-09T06:08:45.178Z

    var year = ntime.getFullYear();

    var month = ("0" + (ntime.getMonth() + 1)).slice(-2);

    var day = ("0" + ntime.getDate()).slice(-2);

    ntime = month + '-' + day + '-' + year;

    fill(90, 0, 0);

    text(ntime, width / 7, y + nudge);

    // fill(90, 0, 0);

    // text(ntime, (width / 5)*4, y + nudge);

  }

​

​

​

​

​

​

}