Какова основная идея создания clickmartmap?

Question

В одном из моих проектов, я хотел бы создать heatmap пользовательских кликов. Я искал какое-то время и нашел эту библиотеку - http://www.patrick-wied.at/static/heatmapjs/examples.html. Это именно то, что я хотел бы сделать. Я хотел бы создать Heatmap в SVG, если это возможно, это только разница.

Я хотел бы создать свою собственную тепловую карту, и мне просто интересно, как это сделать. У меня есть позиция XY. Каждый клик имеет в основном различную XY-позицию, но время от времени могут быть исключения, несколько кликов могут иметь место XY.

Я нашел несколько решений на основе сетки на веб-сайте, где вам нужно проверить, какие клики принадлежат одному столбцу в этой сетке, и в соответствии с этими данными вы можете заполнить наиболее щелкаемые столбцы красным или оранжевым цветом и так далее на. Но для меня это немного сложнее и, возможно, медленнее для больших сеток.

Так что мне интересно, есть ли другое решение, как «рассчитать» цвета тепловой карты или мне хотелось бы знать основную идею, используемую в библиотеке выше.

Большое спасибо

Answer 1

Чтобы сделать этот вид тепла карты, вам нужно какое-то записываемого массива (или, как вы выразились, «решетка»). Пользовательские клики добавляются в этот массив кумулятивным образом, добавляя небольшой массив «фильтр» (выровненный по каждому клику) в записываемый массив.

К сожалению, этот метод «сетки», по-видимому, является самым простым и простым способом получить такой гладкий вид. К счастью, такая работа хорошо поддерживается программным и аппаратным обеспечением под названием «компьютерная графика».

Когда рассматривается как операция компьютерной графики, записываемый массив называется «накопительным буфером». Фильтр дает вам приятный внешний вид, даже при относительно небольшом числе кликов - вы можете настроить размер фильтра в соответствии с потребностями вашего приложения.

После накопления пользовательских кликов вам нужно будет преобразовать из необработанных накопленных значений в какую-либо видимую цветовую шкалу. Это может включать просмотр всего буфера накопления, чтобы найти наибольшее значение, и соответствующим образом отображать выбранную цветовую шкалу. В качестве альтернативы вы можете настроить свой масштаб в соответствии с количеством щелчков мыши или (как в демоверсии, к которой вы привязались), просто выберите фиксированную шкалу независимо от содержимого буфера.

Наконец, я должен упомянуть, что SVG плохо адаптирован для представления такого вида графики. Вероятно, он должен быть сохранен как некоторый файл изображения (.jpg или .png).