Создание тепловых карт с использованием элемента <canvas>?

Question

Существуют ли какие-либо библиотеки JavaScript, которые позволяют создавать тепловые карты с использованием функций графического рендеринга в браузере, таких как <canvas> или SVG?

Я знаю о HeatMapAPI.com, но их тепловые карты генерируются на стороне сервера. Я думаю, что в эпоху <canvas> элемента нам это больше не нужно!

Если такого еще нет, есть ли добровольцы для участия в создании такого инструмента?

Answer 1

Я создал демо, включающее тепловую карту в реальном времени с элементом <canvas> и JavaScript. Я также добавил документированный код рядом с примером тепловой карты. Процесс создания тепловой карты основан на альфа-карте в элементе canvas, который зависит от движения мыши пользователя. Вы можете посмотреть мое демо прямо здесь: http://www.patrick -wied.at / статический / Heatmap /

Answer 2

Я создал карту попаданий с помощью Google Visualization API [http://code.google.com/apis/visualization/documentation/].. Она использует SVG и VML, а также совместима с различными браузерами. Надеюсь, это поможет.

Answer 3

Я также дал ему попытку, но не делая сглаживание по Гауссу, я позволил canvas сделать это для меня. В основном я рисую радиальный градиент для каждой точки в шкале серого, а затем раскрашиваю это изображение в шкале серого (подробное объяснение см. «Создание тепловых карт с помощью .NET 2.0 (C #)» * , моя реализация немного отличается) .

Результат выглядит так:

Время рендеринга не так уж плохо на Chrome / Chromium. Я думаю, что самая трудоемкая часть - это раскраска, потому что я зацикливаюсь на каждом пикселе.

Вы можете найти код здесь: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js

Answer 4

У меня есть код js / canvas / web работника здесь , хотя с ним можно проделать много работы. Он также размещен в сети по адресу http://heatmapthing.heroku.com/.. Для этого ваш браузер должен поддерживать веб-работников.

Пожалуйста, отправляйте запросы на удаление, если вы улучшаете его. Псевдогауссовское сглаживание сейчас чертовски круто.

Answer 5

Я играл с HeatMap несколько лет назад. См. http://www.urbigene.com/treemapphp/, алгоритм пришел отсюда: http://www.cs.umd.edu/hcil/treemap-history/

Answer 6

Heatcanvas выглядит довольно хорошо. У этого также есть расширение листовки, чтобы бежать сверху openstreetmaps https://github.com/sunng87/heatcanvas

Он работает довольно хорошо по нескольким точкам (<200) или около того, но немного медленнее по многим тысячам точек. Я думаю, что после панорамирования и масштабирования он также может пересчитываться чаще, чем это необходимо, и у меня возникли некоторые проблемы с изменением тепловой карты на лету (замена тепловой карты другой с помощью javascript), возможно, мне нужно немного поэкспериментировать с ней или связаться с автор </p>