数据可视化：使用纬度，经度为100.000个元素绘制热图？

Question

我有一个包含100.000个元素的大数组。这些因素代表了美国城市犯罪的发生。每个元素都有纬度和经度。

我想在画布上绘制这些罪行，以热图的形式进行数据可视化，但由于罪行的坐标彼此如此接近，我真的在努力实现缩放，并且不要在我真的知道如何处理这个问题。

数组如下所示：

var nyc = 
    [{"city":"NYC","longitude":-73.935242,"latitude":40.730610},
    {"city":"NYC","longitude":-74.044502,"latitude":40.689247}]

到目前为止我的代码是这样的：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var lat;
var lon;

ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;


for (var i = 0; i < nyc.length; i++) {
    lat = (nyc[i].latitude)*400-13200;
    lon = (nyc[i].longitude+200)*4;

    ctx.beginPath();
    ctx.lineWidth = "2";
    ctx.fillStyle = "black";
    ctx.rect(lat, lon, 4, 4);
    ctx.fill();
}

我现在怎么能继续？

非常感谢帮助！

注意：我不认为我需要地图投影，因为我不想以具有方形形状的热图形式显示相对的元素。