chart = {
const height = 600;
const cx = width / 2;
const cy = height / 2;
const projection = d3.geoMercator().translate([0, 0]).scale(4000);
const sf = projection([-122.417, 37.775]);
const ny = projection([-74.0064, 40.7142]);
const i = d3.interpolateZoom([...sf, 400], [...ny, 600]);
let transform;
let visibleArea;
let invisibleArea;
const simplify = d3.geoTransform({
point(x, y, z) {
if (z < visibleArea) return;
x = transform.applyX(x);
y = transform.applyY(y);
if (x >= -10 && x <= width + 10 && y >= -10 && y <= height + 10 || z >= invisibleArea) this.stream.point(x, y);
}
});
const context = DOM.context2d(width, height);
const path = d3.geoPath(simplify, context);
function update(t) {
const [tx, ty, w] = i(t);
transform = d3.zoomIdentity.translate(cx, cy).scale(width / w).translate(-tx, -ty);
visibleArea = 1 / (transform.k * transform.k);
invisibleArea = 200 * visibleArea;
context.clearRect(0, 0, width, height);
context.beginPath();
path(mesh);
context.stroke();
}
return Object.assign(context.canvas, {update});
}