//*The dataset only documents april to june data.*

​

​

var mapimg;

var clat = 51.3;

var clon = 3.5;

var lat = 0;

var lon = 0;

var zoom = 8;

var birds;

var button;

var slider;

let dfMt = 5;

let g=10;

​

function preload() {

  mapimg = loadImage("https://api.mapbox.com/styles/v1/mapbox/dark-v9/static/3,51,8,0,0/600x600?access_token=pk.eyJ1IjoiYm93ZW5sNzQxIiwiYSI6ImNraXBvNWg0NDA4NjgydGw3ZnQ3NGQydzMifQ.2CWqJym51JeQg2w1CimqKA")

  birds = loadJSON('data.json');

​

}

​

//convert 3d vector to 2d point

function mercX(lon) {

  lon = radians(lon);

  var a = (256 / PI) * pow(2, zoom);

  var b = lon + PI;

  return a * b;

}

​

function mercY(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(600, 600);

  translate(width / 2, height / 2);

  imageMode(CENTER);

  image(mapimg, 0, 0);

​

  button = createButton("month");

  slider = createSlider(1, 12, 5, 1);

  slider.position = (10, 10);

  slider.mousePressed(changeMonth);

}

​

function changeMonth() {

  dfMt = slider.value();

  g = random(255);

}

​

function draw() {

  frameRate(5);

  translate(width / 2, height / 2);

  var cx = mercX(clon);

  var cy = mercY(clat);

  for (var i = 0; i < Object.keys(birds).length; i++) {

    var data = birds[i];

    var lat = parseFloat(data["deploy-on-latitude"]);

    var lon = parseFloat(data["deploy-on-longitude"]);

    var time = data["deploy-on-timestamp"];

    var mass = parseFloat(data["animal-mass"]);

    let dt = new Date(time);

    let mt = dt.getMonth() + 1;

    var x = mercX(lon) - cx;

    var y = mercY(lat) - cy;

    //console.log(mt);

    if (mt == dfMt) {

      stroke(0,0,0,20);

      fill(255, g, 0, 20);

      ellipse(x, y, mass / 30, mass / 30);

    }

  }

}