Erstellen von Heatmaps mit -Element?

Question

Gibt es JavaScript-Bibliotheken gibt, die Ihnen erlauben, Heatmaps zu erstellen In-Browser-Grafik-Rendering-Funktionen wie <canvas> oder SVG?

Ich weiß, über HeatMapAPI.com, aber ihre Wärmekarten werden auf der Serverseite erzeugt. Ich denke, dass in der Ära der <canvas> Element brauchen wir das nicht mehr!

Wenn es nichts Vergleichbares noch gibt es irgendwelche Freiwilligen bei der Schaffung eines solchen Instruments teilnehmen?

Answer 1

Ich habe eine Demo, die eine Echtzeit-Heatmap mit dem <canvas> Elemente und Javascript. Ich habe auch den dokumentierten Code neben der Heatmap Probe. Der heatmap Erzeugungsprozess wird auf einem Alpha-Map in dem Kanevas-Elemente basiert, die auf der Benutzer der Mausbewegung abhängt. Sie können hier einen Blick auf meine Demo nehmen: http://www.patrick-wied.at/static/heatmap/

Answer 2

ich mit Hilfe von Google Visualization API einen Hit Karte erstellt [ http: // code.google.com/apis/visualization/documentation/] . Es nutzt SVG & VML und auch Cross-Browser kompatibel. Hoffe, dass es hilft.

Answer 3

Ich habe einige js / Leinwand / web Arbeiter code hier obwohl viel Arbeit gibt es das sein könnte mit ihm getan. Es ist auch online unter http://heatmapthing.heroku.com/ geschoben. Ihr Browser braucht Web-Arbeiter für diese zu unterstützen.

Bitte senden Sie Pull-Anforderungen, wenn Sie es verbessern. Die pseudo-Gaußglättung ist slooooooooow wie die Hölle jetzt.

Answer 4

Ich habe es auch einen Versuch, aber ohne die Gaußsche mein Selbstglättungs zu tun, lasse ich Leinwand das für mich tun. Grundsätzlich I einen radialen Gradienten für jeden Punkt im Graustufen zeichnen und dann dieses Graustufenbild Kolorieren (siehe " mit .NET 2.0 Heat maps erstellen (C #) " für eine ausführliche Erklärung, mein Implementierung unterscheidet ein wenig).

Das Ergebnis sieht wie folgt aus:

Die Rendering-Zeit ist nicht so schlecht auf Chrome / Chromium. Ich denke, die meiste Zeit Teil der colorizing ist, weil ich über jedes Pixel am Looping.

Sie können den Code finden Sie hier:

Ich spielte mit Heatmap vor ein paar Jahren. Siehe http://www.urbigene.com/treemapphp/ kam der Algorithmus von hier: < a href = "http://www.cs.umd.edu/hcil/treemap-history/" rel = "nofollow noreferrer"> http://www.cs.umd.edu/hcil/treemap-history/

Heatcanvas sieht ganz gut aus. Es hat auch eine Broschüre Verlängerung oben auf OpenStreetMap laufen https://github.com/sunng87/heatcanvas

Es läuft ganz gut auf wenige Punkte (<200) oder so, aber wird es ein wenig langsam auf viele Tausende von Punkten. Ich denke, es auch öfter vielleicht neu zu berechnen als nötig nach Schwenken und Zoomen, und ich hatte einige Probleme mit der Heatmap im laufenden Betrieb zu wechseln (Heatmap mit einem anderen mit Hilfe von Javascript zu ersetzen), glaube, ich muss ein bisschen mehr mit ihm experimentieren, oder kontaktieren Sie das Autor

Answer 5

Answer 6

Answer 7

Answer 8

Answer 9

Ich spielte mit Heatmap vor ein paar Jahren. Siehe

Answer 10

Heatcanvas sieht ganz gut aus. Es hat auch eine Broschüre Verlängerung oben auf OpenStreetMap laufen https://github.com/sunng87/heatcanvas

Es läuft ganz gut auf wenige Punkte (<200) oder so, aber wird es ein wenig langsam auf viele Tausende von Punkten. Ich denke, es auch öfter vielleicht neu zu berechnen als nötig nach Schwenken und Zoomen, und ich hatte einige Probleme mit der Heatmap im laufenden Betrieb zu wechseln (Heatmap mit einem anderen mit Hilfe von Javascript zu ersetzen), glaube, ich muss ein bisschen mehr mit ihm experimentieren, oder kontaktieren Sie das Autor