データ視覚化：グリッドに値の出現を描画

Question

今、私は配列内の要素の各出現についてキャンバス上にrectを描画しようとしています。配置のために、配列の要素の経度と緯度の値を使用します。

NYCの要素の出現を正方形のグリッドに描画したいとします。これらの要素の緯度と経度をわずかに私がスペースのビットを描きたいrectsを与えるためにスケーリングを使用する必要があります変化するので

（だから、混沌としたクラスタのようには見えません）。 したがって、私はrect()のxとyに係数を掛けました。

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}] 

それは何も表示されないと、私は私が間違って何をしたかが表示されない...

アムIを（正方形の）グリッドを描くための適切なアプローチを使用して？

Answer 1

あなたのコードはまったく同じように動作します。それをテストするために、私は、フォームの配列を指定：

var array = [{latitude: 1.2, longitude: 1.3}] 

は、多分それはあなたのhtmlですか配列は、あなたが期待する形式を持っていません。

この例をチェック：https://codepen.io/anon/pen/mwyLMg