javascript - para - mapas de calor online

¿Crea mapas de calor usando el elemento<canvas>?

Question

¿Hay alguna biblioteca de JavaScript que le permita crear mapas de calor usando características de representación gráfica en el navegador como <canvas> o SVG?

Sé de HeatMapAPI.com, pero sus mapas de calor se generan en el servidor. ¡Creo que en la era del elemento <canvas> ya no necesitamos eso!

Si todavía no hay nada como esto, ¿hay voluntarios para participar en la creación de dicha herramienta?

Answer 1

Creé un mapa de aciertos con la ayuda de Google Visualization API [ http://code.google.com/apis/visualization/documentation/] . Utiliza SVG y VML, y también es compatible con navegadores cruzados. Espero que ayude

Answer 2

Creé una demostración que incluye un mapa de calor en tiempo real con el elemento <canvas> y javascript. También agregué el código documentado junto a la muestra del mapa de calor. El proceso de generación del mapa de calor se basa en un mapa alfa en el elemento canvas que depende del movimiento del mouse del usuario. Puedes echar un vistazo a mi demostración aquí: http://www.patrick-wied.at/static/heatmap/

Answer 3

Heatcanvas se ve bastante bien. También tiene una extensión de folleto para ejecutar en la parte superior de openstreetmaps https://github.com/sunng87/heatcanvas

Funciona bastante bien en algunos puntos (<200) más o menos, pero se vuelve un poco lento en muchos miles de puntos. Creo que también podría recalcular más veces de lo necesario después de pan y zoom, y tuve algunos problemas para cambiar el mapa de calor sobre la marcha (reemplazando heatmap con otro usando javascript), supongo que necesito experimentar un poco más con él, o contactar al autor

Answer 4

Jugué con heatmap hace unos años. Ver http://www.urbigene.com/treemapphp/ , el algoritmo vino de aquí: http://www.cs.umd.edu/hcil/treemap-history/

Answer 5

También lo probé, pero sin hacer el ajuste Gaussiano, dejé que Canvas lo hiciera por mí. Básicamente dibujo un degradado radial para cada punto en escala de grises y luego coloreo esta imagen en escala de grises (ver "Crear mapas de calor con .NET 2.0 (C #)" para una explicación detallada, mi implementación difiere un poco).

El resultado es así:

El tiempo de renderizado no es tan malo en Chrome / Chromium. Creo que la parte que más tiempo consume es la coloración, porque estoy recorriendo cada píxel.

Puede encontrar el código aquí: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js

Answer 6

Tengo un código de js / canvas / web worker here aunque hay mucho trabajo que se puede hacer con él. También se publica en línea en http://heatmapthing.heroku.com/ . Su navegador necesita apoyar a los trabajadores web para esto.

Envíe solicitudes de extracción si lo mejora. El alisamiento pseudo-gaussiano es muy poco como el infierno en este momento.