Criando heatmaps usando elemento?

Question

Existem quaisquer bibliotecas JavaScript lá fora, que lhe permitem criar mapas de calor usando no navegador renderização gráfica apresenta como <canvas> ou SVG?

Eu sei sobre HeatMapAPI.com, mas os seus mapas de calor são gerados no lado do servidor. Eu acho que, na era de elemento <canvas> não precisamos mais disso!

Se não há nada como isso ainda, existem voluntários para participar na criação de uma ferramenta?

Answer 1

Eu criei uma demonstração, incluindo um mapa de calor em tempo real com o elemento <canvas> e javascript. Eu também adicionei o código documentado ao lado da amostra heatmap. O processo de geração do mapa de calor é baseada em um mapa alfa no elemento de tela que depende do movimento utilizadores rato. Você pode dar uma olhada no meu demonstração aqui: http://www.patrick-wied.at/static/heatmap/

Answer 2

Eu criei um mapa sucesso com a ajuda do Google Visualization API [ http: // code.google.com/apis/visualization/documentation/] . Ele usa SVG e VML e compatível navegador também cruz. Espero que isso vai ajudar.

Answer 3

Eu tenho algum código trabalhador js / tela / web aqui embora há uma abundância de trabalho que poderia ser feito com ele. Ele também é empurrado em linha em http://heatmapthing.heroku.com/ . O seu navegador necessita para trabalhadores da Web de suporte para isso.

Por favor, envie solicitações de pull se você melhorá-lo. A suavização pseudo-Gaussian é slooooooooow como o inferno agora.

Answer 4

Eu também deu uma chance, mas sem fazer o Gaussian alisando meu eu, deixei lona fazer isso por mim. Basicamente eu desenhar um gradiente radial de cada ponto na escala de cinzentos e, em seguida, colorir esta imagem em escala de cinzento (ver " Criação de mapas de calor com .NET 2.0 (C #) " para uma explicação detalhada, meu implementação difere um pouco).

Os olhares resultado como este:

O tempo de renderização não é tão ruim no Chrome / Chromium. Eu acho que a parte mais demorada é a colorizing, porque estou looping sobre cada pixel.

Você pode encontrar o código aqui: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js

Answer 5

Eu joguei com heatmap há alguns anos. Consulte http://www.urbigene.com/treemapphp/ , o algoritmo veio aqui: < a href = "http://www.cs.umd.edu/hcil/treemap-history/" rel = "nofollow noreferrer"> http://www.cs.umd.edu/hcil/treemap-history/

Answer 6

Heatcanvas parece muito bom. Ele também tem uma ampliação do folheto para rodar em cima de OpenStreetMaps https://github.com/sunng87/heatcanvas

Ele funciona muito bem em alguns pontos (<200) ou assim, mas fica um pouco lento em muitos milhares de pontos. Penso que também pode recalcular mais frequentemente do que o necessário, depois de panorâmica e zoom, e eu tive alguns problemas com mudando o heatmap on the fly (substituindo heatmap com outro usando javascript), acho que preciso experimentar um pouco mais com ele, ou contactar o autor