Автор статьи: инженер по визуализации TalkingData Ли Фэнлу.
inMapЭто библиотека визуализации больших данных на основе холста, исходный код которой открыт командой визуализации TalkingData и которая фокусируется на визуализации точек, линий и плоскостей в направлении больших данных. В настоящее время поддерживает методы рассеяния, забора, тепловые, сетки, агрегации и другие методы, предназначенные для упрощения визуализации больших данных.
Адрес гитхаба:GitHub.com/говорящие данные…(Поиск звезды!)
Адрес документа:inmap.talkingdata.com
характеристика:
- многопоточность высокая производительность
- Многослойное наложение
- умный алгоритм
- Дружественный API
- Настраиваемые темы
Скриншот эффекта выглядит следующим образом:
inMap — это более интеллектуальная структура географической визуализации, в основном предназначенная для инженеров и дизайнеров, занимающихся приложениями для визуализации данных.
- Базовый механизм рисования: в настоящее время предоставляет базовые возможности рисования на основе canvas 2d, и планируется версия на основе WebGL;
- Алгоритм: встроенное преобразование широты и долготы Меркатора, алгоритм исключения текста, алгоритм оптимальной точки метки, алгоритм сопоставления цветов метки автоматической группировки и т. д.
Каждый алгоритм, написанный inMap, предназначен для улучшения взаимодействия с пользователем и достижения максимального эффекта.Мы надеемся использовать inMap для создания отличных продуктов.
Дизайн интерфейса inMap также очень удобен, и мы надеемся, что разработчики смогут быстро создавать красивые визуализации с помощью простой настройки.
Введение в алгоритм избегания текста:
В своих проектах мы часто сталкиваемся с необходимостью маркировки и разметки текста на карте.Мы используем популярную библиотеку визуализации, чтобы показать эффект следующим образом:
(Текст плотно набит, все сложено в кучу, эффект очень плохой, рассчитывают, что продакт-менеджер будет его кусать и держать)
inMap реализует алгоритм набора текста на основе текста, не правда ли, рендеринг выглядит следующим образом:
Не правда ли, inMap реализовал свой собственный алгоритм набора текста квартиля, который звучит запутанно, не волнуйтесь, позвольте мне не торопиться.
Каждая точка маркировки имеет четыре места для текста, если левая сторона не подходит, то поместите ее на правую сторону и попробуйте, если она все еще не работает, поместите ее внизу и попробуйте, и так далее, принцип так прост, ха-ха.
Детали реализации следующие:
- Найдите прямоугольник для отображения текста (ширина и высота текста)
- Создайте виртуальный объект коллекции текста с координатами и отсортируйте координаты коллекции от меньшего к большему.
- Рекурсивно пройтись по виртуальному текстовому набору, определить, пересекается ли он с другими, и, если есть пересечение, переместить текущую текстовую позицию до тех пор, пока она не перестанет пересекаться. Если подходящее место не найдено, выберите скрытие текущего текста.
Последующий вывод создаст лучшую визуальную графику и алгоритмы, а версия WebGL будет запущена позже.