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

Question

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

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

Если ничего подобного пока нет, есть ли желающие поучаствовать в создании такого инструмента?

Answer 1

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

Answer 2

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

Answer 3

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

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

Answer 4

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

Результат выглядит следующим образом:

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

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

Answer 5

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

Answer 6

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

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