2009-07-12 10 views
26

Esistono librerie JavaScript che consentono di creare heatmap utilizzando le funzioni di rendering grafico nel browser come <canvas> o SVG?Creazione di heatmap usando l'elemento <canvas>?

So di HeatMapAPI.com, ma le loro mappe di calore sono generate sul lato server. Penso che nell'era dell'elemento <canvas> non ne abbiamo più bisogno!

Se non c'è ancora niente del genere, ci sono volontari che partecipano alla creazione di tale strumento?

+0

IE 8 e seguenti non hanno supporto per la tela. –

+1

Sì, ma grazie a Explorer Canvas (ExCanvas), IE ha un supporto parziale per il tag Canvas –

+0

True, ma si tratta di una sorta di soluzione rapida per lo slap insieme. –

risposta

40

ho creato una demo tra cui una mappa termica in tempo reale con l'elemento <canvas> e javascript. Ho anche aggiunto il codice documentato accanto al campione di heatmap. Il processo di generazione della heatmap si basa su una mappa alfa nell'elemento canvas che dipende dal movimento del mouse dell'utente. Puoi dare un'occhiata alla mia demo proprio qui: http://www.patrick-wied.at/static/heatmap/

+0

Grazie per la demo, molto utile +1 –

+0

Hey Patrick. È possibile aggiornare heatmap.js per lavorare in un thread separato (usando i web-worker), quindi se c'è un sacco di dati da disegnare devi solo dire al lavoratore di calcolare una tela fuori schermo e inviarti la tela quando E 'fatto? – Cristy

+0

Ehi, Cristy. Sfortunatamente ciò non è possibile a causa del forte accoppiamento con l'elemento canvas e i web worker non supportano il canvas. Se stai cercando di visualizzare più datapoints ho buone notizie: al momento sto lavorando su heatmap.js v2 e ho fatto alcune importanti ottimizzazioni delle prestazioni. in v2 puoi visualizzare almeno 20k punti dati senza notare alcuna perdita di prestazioni –

4

Ho creato una mappa di risultati con l'aiuto di Google Visualization API [http://code.google.com/apis/visualization/documentation/]. Utilizza SVG & VML e anche compatibile con browser. Spero che ti possa aiutare.

+2

puoi condividere quale visualizzazione hai usato? Non vedo heatmap nella galleria di visualizzazione (http://code.google.com/apis/visualization/documentation/gallery.html) Quello che mi piace fare è posizionare una heatmap su Google Maps. So che potrei usare questo: http://code.google.com/p/gheat/, ma GHeat non usa (utilizza invece png generati lato server). – warpech

2

Ho un po 'di codice js/canvas/web worker here anche se c'è un sacco di lavoro che potrebbe essere fatto con esso. È anche spinto online allo http://heatmapthing.heroku.com/. Il tuo browser deve supportare gli operatori Web per questo.

Si prega di inviare richieste di pull se si migliora. Il livellamento pseudo-gaussiano è slooooooooow come l'inferno in questo momento.

2

Ho anche provato, ma senza fare il Gaussian smoothing me stesso, ho lasciato che la tela lo faccia per me. Fondamentalmente disegno una sfumatura radiale per ogni punto in scala di grigi e quindi colorisco questa immagine in scala di grigi (vedi "Creating Heat Maps with .NET 2.0 (C#)" per una spiegazione dettagliata, la mia implementazione differisce un po ').

Il risultato assomiglia a questo:

Heat Map with JavaScript and Canvas

tempo La resa non è così male su Chrome/Chromium. Penso che la parte più dispendiosa in termini di tempo sia la colorazione, perché sto eseguendo un ciclo su ogni pixel.

È possibile trovare il codice qui: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js

0

Heatcanvas sembra abbastanza buono. Ha anche un'estensione volantino per eseguire su di OpenStreetMaps https://github.com/sunng87/heatcanvas

Si corre abbastanza bene su alcuni punti (< 200) o giù di lì, ma diventa un po 'lento su molte migliaia di punti. Penso che potrebbe ricalcolare il più spesso del necessario dopo pan e zoom, e ho avuto qualche problema con la modifica della heatmap in tempo reale (sostituendo heatmap con un'altra usando javascript), suppongo che ho bisogno di sperimentare un po 'di più con esso, o contattare il autore