Création heatmaps utilisant élément ?

Question

Y a-t-il des bibliothèques JavaScript là-bas qui vous permettent de créer des cartes thermiques à l'aide dans le navigateur fonctions de rendu graphique tels que <canvas> ou SVG?

Je sais HeatMapAPI.com, mais leurs cartes de chaleur sont générées sur le côté serveur. Je pense que, dans l'ère de l'élément <canvas> on n'a pas besoin que plus!

S'il n'y a rien comme ça encore, sont-il des volontaires pour participer à la création d'un tel outil?

Answer 1

J'ai créé une démo incluant un heatmap en temps réel avec l'élément <canvas> et javascript. J'ai aussi ajouté le code documenté à côté de l'échantillon de heatmap. Le processus de génération de carte thermique est basé sur une carte de alpha dans l'élément de toile qui dépend du mouvement de la souris utilisateurs. Vous pouvez jeter un oeil à ma démo ici: http://www.patrick-wied.at/static/heatmap/

Answer 2

J'ai créé une carte de succès avec l'aide de l'API Google Visualization [ http: // code.google.com/apis/visualization/documentation/] . Il utilise le SVG et VML, et navigateur également compatible cross. Espérons que ça vous aidera.

Answer 3

J'ai quelques js / toile / web code travailleur mais il y a beaucoup de travail qui pourrait être fait avec elle. Il est également poussé en ligne à http://heatmapthing.heroku.com/ . Votre navigateur doit soutenir les travailleurs web pour cela.

S'il vous plaît envoyer des demandes de tirage si vous l'améliorer. Le lissage pseudo-gaussienne est slooooooooow comme l'enfer en ce moment.

Answer 4

Je lui ai donné aussi un essai, mais sans faire le lissage gaussienne mon auto, je laisse la toile ça pour moi. Fondamentalement, je dessine un gradient radial pour chaque point de l'échelle de gris et colorise ensuite cette image à échelle de gris (voir " Création de cartes thermiques avec .NET 2.0 (C #) " pour une explication détaillée, mon la mise en œuvre diffère un peu).

Le résultat ressemble à ceci:

Le temps de rendu est pas si mal sur Chrome / Chrome. Je pense que la plupart à temps partiel est le consumait colorisation, parce que je suis bouclez chaque pixel.

Vous pouvez trouver le code ici:

J'ai joué avec heatmap il y a quelques années. Voir http://www.urbigene.com/treemapphp/ , l'algorithme est venu d'ici: < a href = "http://www.cs.umd.edu/hcil/treemap-history/" rel = "nofollow noreferrer"> http://www.cs.umd.edu/hcil/treemap-history/

Heatcanvas semble assez bonne. Il a également une extension de dépliant pour exécuter au-dessus de OpenStreetMap https://github.com/sunng87/heatcanvas

Il fonctionne très bien sur quelques points (<200) ou plus, mais devient un peu lent sur plusieurs milliers de points. Je pense qu'il pourrait aussi recalcule plus souvent que nécessaire après panoramique et de zoom, et j'ai eu quelques problèmes avec la modification du heatmap à la volée (en remplacement heatmap avec un autre javascript en utilisant), suppose que je besoin d'expérimenter un peu plus avec elle, ou contacter le auteur

Answer 5

Answer 6

Answer 7

Answer 8

Answer 9

J'ai joué avec heatmap il y a quelques années. Voir

Answer 10

Heatcanvas semble assez bonne. Il a également une extension de dépliant pour exécuter au-dessus de OpenStreetMap https://github.com/sunng87/heatcanvas

Il fonctionne très bien sur quelques points (<200) ou plus, mais devient un peu lent sur plusieurs milliers de points. Je pense qu'il pourrait aussi recalcule plus souvent que nécessaire après panoramique et de zoom, et j'ai eu quelques problèmes avec la modification du heatmap à la volée (en remplacement heatmap avec un autre javascript en utilisant), suppose que je besoin d'expérimenter un peu plus avec elle, ou contacter le auteur