canvas = {
const width = 900;
const height = 700;
const context = DOM.context2d(width, height);
let refTime = Date.now();
let time = 0;
let curDate = +startDate + 0;
const utcFormat = d3.utcFormat("%d/%m/%Y");
var timePerMag = 0.005;
var sizePerMag = 2;
const years = d3.range(2000, 2023);
let data = [];
for (var i = 0; i < sites.length; i++) {
data.push({
lat: +sites[i].lat,
long: +sites[i].long,
planted: +sites[i].planted,
siteName: sites[i].site_name,
siteId: sites[i].site_id
});
}
const projection = d3.geoMercator()
.scale(scale)
.translate([scale + width/2.5, height/4 - height/20])
.precision(0.2);
const path = d3.geoPath()
.projection(projection)
.context(context);
var geoCircle = d3.geoCircle()
const bgColor = "#A7D9D9";
const terrainColor = "#F2F2F2";
const draw = function() {
context.clearRect(0, 0, width, height);
context.fillStyle = bgColor;
context.beginPath(), context.rect(0, 0, width, height), context.fill();
context.lineWidth = 1;
context.fillStyle = terrainColor;
context.beginPath(), path(br), context.fill();
context.font = "12px Helvetica Neue";
context.fillStyle = "black";
context.textAlign = "left";
context.fillText(utcFormat(curDate), 20, 40);
context.fillStyle = "cornflowerblue";
context.strokeStyle = "black";
for (var i = 0; i < data.length; i++) {
var lat = data[i].lat;
var long = data[i].long;
var sitePlanted = data[i].planted;
if (curDate >= sitePlanted) {
context.beginPath();
path(geoCircle.center([long, lat]).radius(.175)());
context.fill();
context.stroke();
context.closePath();
}
}
}
const timer = d3.timer(function() {
time = Date.now() - refTime;
if (time >= dayEvery) {
refTime = Date.now();
curDate += (24 * 60 * 60 * 1000) * (Math.round(time / dayEvery));
}
draw();
})
d3.timer(function() {
if (curDate > endDate) {
timer.stop()
}
})
return d3.select(context.canvas)
.call(draw)
.node();
}