Creando mapas de calor usando el elemento <canvas>?

¿Existen bibliotecas de JavaScript que le permitan crear mapas de calor usando características de representación gráfica en el navegador como <canvas> o SVG?Creando mapas de calor usando el elemento <canvas>?

Conozco HeatMapAPI.com, pero sus mapas de calor se generan en el lado del 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?

Fuente

2009-07-12 warpech

IE 8 y siguientes no tienen soporte de lienzo. –

Sí, pero gracias a Explorer Canvas (ExCanvas), IE tiene un soporte parcial para la etiqueta de Canvas –

Cierto, pero eso es una especie de solución rápida. –

creé una demo 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. Puede echar un vistazo a mi demostración aquí: http://www.patrick-wied.at/static/heatmap/

Fuente

2010-09-11 21:01:09

Gracias por esa demostración, muy útil +1 –

Hola Patrick. ¿Es posible actualizar heatmap.js para trabajar en un hilo separado (usando web-workers), así que si hay una gran cantidad de datos para dibujar, solo le dices al trabajador que calcule un lienzo fuera de la pantalla y te envíe el lienzo cuando ¿está hecho? – Cristy

Hola Cristy. Lamentablemente, eso no es posible debido al acoplamiento estrecho con el elemento de lona y los trabajadores de la web no son compatibles con el lienzo. Si está buscando mostrar más puntos de datos, tengo buenas noticias: actualmente estoy trabajando en heatmap.js v2 e hice una gran optimización del rendimiento. en v2 puede visualizar al menos 20k puntos de datos sin notar ninguna pérdida de rendimiento –

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/

Fuente

2009-07-12 22:08:34 Pierre

Él está hablando de Heatmaps, y no Treemaps :) –

hopps :-) parece lo mismo para mí :-) – Pierre

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

Fuente

2009-08-01 09:14:13 Rifat

¿puedes compartir qué visualización usaste? No veo mapas de calor en la galería de visualización (http://code.google.com/apis/visualization/documentation/gallery.html) Lo que me gustaría hacer es colocar un mapa de calor sobre Google Maps. Sé que podría usar esto: http://code.google.com/p/gheat/, pero GHeat no usa

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

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

Fuente

2010-06-10 08:04:47 x1a4

También lo intenté, pero sin hacer el alisado Gaussiano, dejé que Canvas lo hiciera por mí. Básicamente dibujo un degradado radial para cada punto en la escala de grises y luego coloreo esta imagen en escala de grises (vea "Creating Heat Maps with .NET 2.0 (C#)" para una explicación detallada, mi implementación difiere un poco).

El resultado es idéntico:

Heat Map with JavaScript and Canvas

tiempo La representación 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

Fuente

2010-07-08 09:06:57 tsauerwein

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

se ejecuta bastante bien en algunos puntos (< 200) o menos, pero se hace 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

Fuente

2012-11-01 21:09:06 Paulus

Creando mapas de calor usando el elemento <canvas>?

Respuesta

Cuestiones relacionadas