Визуализация данных: рисование появления значения в сетке

Прямо сейчас я пытаюсь нарисовать прямоугольник на холсте для каждого появления элемента в моем массиве. Для позиционирования я использую значения долготы и широты элементов в массиве.

Скажем, что я хочу нарисовать появление элементов в Нью-Йорке в квадратной сетке.

Поскольку широта и долгота этих элементов немного меняются, мне придется использовать масштабирование, чтобы дать исправления, которые я хочу нарисовать немного места (так что это не похоже на хаотический кластер). Поэтому множитель умножал x и y rect().

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

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

for (var i = 0; i < array.length; i++) {
    var lat = array[i].latitude;
    var lon = array[i].longitude;

    ctx.rect(lat*10,(lon+200)*2, 4, 4);
    ctx.stroke();
}

Мой массив выглядит примерно так и содержит 100 000 объектов:

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

Сейчас он ничего не отображает, и я не вижу, что я сделал неправильно...

Использую ли я правильный подход для рисования (квадратной) сетки?