En ce moment j'essaye de dessiner un rect sur une toile pour chaque occurrence de l'élément dans mon tableau. Pour le positionnement, j'utilise les valeurs de longitude et de latitude des éléments du tableau. Disons que je veux dessiner l'occurrence des éléments dans NYC dans une grille carrée. Puisque la latitude et la longitude de ces éléments varient légèrement, je devrai utiliser la mise à l'échelle pour donner aux rects que je veux dessiner un peu d'espace (Donc ça ne ressemble pas à un cluster chaotique). Par conséquent, j'ai multiplié les x et y de rect() avec un facteur.Visualisation des données: Dessiner l'occurence de la valeur dans la grille
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();
}
Mon tableau ressemble à ceci et contient 100.000 objets:
var modified_array =
[{"city":"NYC","longitude":-73.935242,"latitude":40.730610},
{"city":"NYC","longitude":-74.044502,"latitude":40.689247}]
En ce moment, il ne montre rien et je ne vois pas ce que je fait de mal ...
Am I en utilisant la bonne approche pour dessiner une grille (carrée)?