Какова основная идея создания карты кликов?

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

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

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

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

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


canvas svg algorithm heatmap
person sylar32    schedule 19.12.2013    source источник
comment
Не могли бы вы использовать matplotlib?   -  person Skyler    schedule 19.12.2013
comment
Может я неправильно объяснил. Я хотел бы знать только способ создания тепловой карты, только основную идею алгоритма. Как я писал выше, у меня есть позиция клика XY, но я не знаю, как сгруппировать клики, которые находятся близко друг к другу, и сделать их красным цветом, как наиболее кликабельное место. И, конечно же, аналогичным образом обработайте остальные клики, только цвета будут разными в соответствии с тепловой картой — красный, оранжевый, желтый, зеленый, голубой, синий.   -  person sylar32    schedule 20.12.2013
comment
Вы имеете в виду, что не знаете, как определить, к какой сетке должна принадлежать позиция клика?   -  person Skyler    schedule 20.12.2013
comment
Я могу определить, какой клик к какой сетке относится, но надеюсь есть и другие алгоритмы, кроме сетки. Использование сетки кажется мне немного сложным, не так ли?   -  person sylar32    schedule 20.12.2013
comment
Нет, это не сложно. Это всего лишь две простые операции деления.   -  person Skyler    schedule 20.12.2013
comment
Я думал об этом. Я мог бы сделать сетку по пикселям - например, область 10x10 пикселей. Клики идут по координатам 2х3, 8х1, 10х10, 2х3. Первым делом просматриваю массив с координатами и выясняю, что больше всего кликов приходится на координату 2х3. И что мне делать дальше?   -  person sylar32    schedule 20.12.2013

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

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

person comingstorm    schedule 19.12.2013