Создание тепловых карт с использованием элемента <canvas>?
Есть ли там библиотеки JavaScript, которые позволяют создавать карты тепла, используя графические функции визуализации в браузере, такие как <canvas>
или SVG?
Я знаю о HeatMapAPI.com, но их карты тепла создаются на стороне сервера. Я думаю, что в эпоху элемента <canvas>
нам это больше не нужно!
Если ничего подобного нет, есть ли волонтеры для участия в создании такого инструмента?
Ответы
Ответ 1
Я создал демоверсию, включающую в себя карту тепла в реальном времени с элементом <canvas>
и javascript. Я также добавил документированный код рядом с образцом тепловой карты. Процесс генерации тепловой карты основан на альфа-карте в элементе холста, которая зависит от движения мыши пользователя.
Вы можете посмотреть мою демо прямо здесь:
http://www.patrick-wied.at/static/heatmap/
Ответ 2
Я создал карту удалений с помощью API визуализации Google [http://code.google.com/apis/visualization/documentation/]. Он использует SVG и VML, а также совместим с браузером. Надеюсь, это поможет.
Ответ 3
У меня есть код js/canvas/web worker здесь, хотя есть много работы, которую можно было бы сделать с ним. Он также нажал онлайн на http://heatmapthing.heroku.com/. Ваш браузер должен поддерживать веб-работников для этого.
Пожалуйста, присылайте запросы на получение, если вы его улучшите. Псевдогаузское сглаживание сейчас как slooooooooow.
Ответ 4
Я также попробовал, но без гауссовского сглаживания себя, я позволил холсту сделать это для меня. В основном я рисую радиальный градиент для каждой точки в серой шкале, а затем раскрашиваю это изображение с серой шкалой (см. "Создание карт тепла с .NET 2.0 (С#)" для подробного объяснения, моя реализация немного отличается).
Результат выглядит следующим образом:
![Heat Map with JavaScript and Canvas]()
Время рендеринга в Chrome/Chromium не так уж плохо. Я думаю, что самая трудоемкая часть - это раскрашивание, потому что я перебираю каждый пиксель.
Код можно найти здесь: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js
Ответ 5
Я играл с Heatmap несколько лет назад. См. http://www.urbigene.com/treemapphp/, алгоритм пришел отсюда: http://www.cs.umd.edu/hcil/treemap-history/
Ответ 6
Heatcanvas выглядит неплохо. Он также имеет расширение рекламного листка для запуска поверх openstreetmaps
https://github.com/sunng87/heatcanvas
Он работает довольно хорошо в нескольких точках (< 200) или около того, но на многих тысячах точек немного медленнее. Я думаю, что он мог бы также пересчитать чаще, чем необходимо после панорамирования и масштабирования, и у меня были некоторые проблемы с изменением тепловой карты на лету (замена тепловой карты на другую с помощью javascript), думаю, мне нужно немного поэкспериментировать с ней или связаться с ней автор