8 бібліотек JavaScript для візуалізації даних у вигляді інтерактивних карт

Візуалізація даних стала невід'ємною частиною життя практично кожного веб-розробника. Якщо побудова графіків, діаграм, карт і дашбордов досі ніколи не були вашої головним болем, просто трохи зачекайте: напевно і ви вступите в наш «клуб».

Дана стаття дає загальне, але залучене уявлення про восьми найбільш цікавих, на мій погляд, JavaScript-бібліотеки для побудови інтерактивних геовизуализаций. В цілому, таких рішень зараз багато, і вибрати оптимальне під той чи інший конкретний проект – завдання деколи непроста як мінімум по часу. Цією публікацією я спробую хоча б трохи полегшити життя тим, хто тільки починає розбиратися в даній темі. До речі, це дещо модифікований переклад моєї недавньої статті на Onextrapixel (оригінал англійською).

Заголовна картинка: візуалізація даних за допомогою інтерактивних карт

На всяк випадок відразу уточню: взагалі, JavaScript-бібліотеки для створення карт можна розділити на два типи. Одні просто дозволяють відображати географічне положення одного або декількох об'єктів. Для подібної задачі можна використовувати карти типу Google Maps або OpenStreetMaps в якості джерела. В принципі, таких рішень достатньо, і результат їх роботи приблизно такий:

Звичайна карта Google з зазначенням пам'яток

Інший тип – та про нього я хочу сьогодні поговорити – JavaScript-бібліотеки, з допомогою яких можна робити саме візуалізацію даних за допомогою створення красивих інтерактивних карт. Вони показують зв'язок між величинами в різних географічних регіонах, або переміщення будь-яких об'єктів щодо їх розташування, тощо – все те, що вкрай важливо в плані аналізу даних та business intelligence.

JavaScript-бібліотеки для інтерактивних карт-візуалізацій
amMap (від amCharts)
amMap – Map with Curved Lines

amMap – спеціальна JavaScript (HTML5) бібліотека для побудови карт, розроблена командою amCharts. Вона не потребує будь-яких зовнішніх залежностях і дозволяє досить просто робити гарні choropleth, bubble, dot (point), connector і flow карти, підтримуючи багато корисних інтерактивних функцій.

Зокрема, amMap дає можливість легко «занурюватися» в той чи інший обраний ділянку карти з допомогою drill down або, наприклад, використовувати будь-які картинки в якості маркерів – досить цікава річ.

Для початку роботи з amMap потрібно завантажити ZIP-файл з бинарниками. До речі, в ньому вже лежить за 455 карт в кожному з підтримуваних форматів (JavaScript/SVG). Документація у amMap не дуже велика і зводиться здебільшого до набору запитань і відповідей.

Опис API: .
Залежності: немає.
Ліцензія: безкоштовно (брендовані карти) або платно (від $140).

AnyMap (від AnyChart)
AnyMap – US Presidential Election 2008

AnyMap – одна з популярних JavaScript (HTML5) бібліотек для візуалізації даних, створених компанією AnyChart. Як і у випадку з amMap, для створення карти з її допомогою не потрібно великих зусиль, так само як і підключення будь-яких зовнішніх

ресурсів або сторонніх бібліотек (jQuery і т. д.). AnyMap також підтримує всі базові типи серій, який тільки можуть знадобитися: choropleth, bubble, dot, connector, flow.

В число основних інтерактивних фіч AnyMap входять drill down для більш щільного вивчення окремих районів, подієва модель для обробки подій (користувальницької інтерактивності), колірна шкала для автоматичного розфарбовування карти по заданих налаштувань.

Забігаючи трохи вперед, скажу, що, на мій погляд, AnyMap більше схожа на D3, ніж на amMap або Highmaps. Вона як би поєднує в собі можливості «коробкових» рішень і в той же час є добре розширюваної і контрольованою з боку розробника, що дозволяє повністю кастомизировать визаулизации шляхом додавання або зміни різних елементів і легко створити власні карти.

Бінарники AnyMap знаходяться в ZIP-файлі і містять безліч прикладів, а на CDN у AnyChart доступні сотні карт в різних форматах: GeoJSON, TopoJSON, SHP, SVG. Також варто зауважити, що у цієї бібліотеки багата документація і розлоге опис API, до речі, досить легке для розуміння і – знову ж – з великою кількістю семплів.

Опис API: .
Залежності: немає.
Ліцензія: безкоштовно (брендовані карти) або платно (від $79).

D3.js (від Mike Bostock)
D3.js – World Bank Global Development Sprint

D3.js – потужна в плані можливих результатів бібліотека для візуалізації даних з відкритим вихідним кодом. На відміну від інших згаданих JavaScript-бібліотек, D3 – це, швидше, фреймворк, який дає максимальну свободу творчості. Хоча створення інтерактивних карт тут не так очевидно, як, скажімо, у рішеннях від amCharts, AnyChart або Highcharts.

Зокрема, щоб зробити таку чудову інтерактивну карту, як на ілюстрації, потрібно вивчити досить велика кількість матеріалів. Хоча, треба сказати, це варто того, тому що в підсумку можна зробити реально чудові, оригінальні візуалізації.

Фактично в D3 доступно безліч функцій, серед яких повна кастомізація поведінки, подієва модель і т. д. В цілому, я б сказав, що це – ідеальне рішення для веб-додатків. Хоча, на жаль, D3 не надає власних карт. Це значить – їх доведеться самостійно шукати у відкритих джерелах, але навряд чи зараз це велика проблема.

Документації як такої у D3 немає, проте є добре розписане API і безліч різних туториалов, прикладів та інших корисних матеріалів буквально по всьому Інтернету.

Опис API: .
Залежності: немає.
Ліцензія: безкоштовно.

Google GeoCharts (Google)
Google Charts – Africa with Colors of Pan-African Flag

У гіганта Google є своя JavaScript-бібліотека для візуалізації даних – Google Charts. Вона містить можливості і для побудови інтерактивних карт-візуалізацію, називаються тут geocharts, мабуть, щоб їх не плутали з звичайними картами, які потрібні тільки для відображення місцезнаходження об'єктів.

Карта Google Geocharts тільки одна, і це – карта світу. Проте можна вибрати регіон, на який при малюванні буде зроблений фокус з допомогою зума.

На жаль, тутешній API не підтримує прокрутку (scrolling), зміна масштабу (zoom), перетягування (drag). Також Google не пропонує інших типів серій для карт, крім choropleth і bubble. Одного разу дані недоліки досить сильно мене, м'яко скажемо, опечалили, але в цьому був і позитивний момент: в кінцевому рахунку мені довелося почати шукати і вивчати всілякі інші бібліотеки, і ось я зараз ділюся результатами цього микроисследования з вами.

Так чи інакше, GeoCharts – відмінне рішення для тих людей і проектів, яким не потрібні великі і складні фічі, але хто шукає перш за все швидкість і стабільність замість якоїсь особливої краси і кастомізації.

Опис API: .
Залежності: немає.
Ліцензія: безкоштовно.

Highmaps (від Highsoft)
Highmaps – Europe Time Zones

Highmaps – «молодша сестра» Highcharts і Highstock, популярних бібліотек розробки компанії Highsoft. Її ключові переваги – відкритий код з усіма його плюсами, невеликий розмір, висока швидкість відтворення і широкий набір інтерактивних можливостей, таких як drill down і т. п.

Серед підтримуваних Highmaps серій – choropleth і bubble. Крім того, за допомогою цієї бібліотеки можна малювати лінії для позначення доріг, річок і коннекторів. Хоча, скажімо, flow-карту тут не так просто, як у тих же amMap і AnyMap.

Також варто відзначити, що ні Highcharts, ні Highmaps не працюють без jQuery, так що для їх використання ця залежність повинна бути підключена (або, звичайно, є варіант пошукати іншу бібліотеку для візуалізації даних — ха-ха).

Позитивний момент – Highmaps має велику кількість карт у форматі SVG і GeoJSON. Також у неї рясна документація, яка дозволяє досить швидко і успішно розібратися в різноманітних налаштуваннях.

Опис API: .
Залежності: jQuery.
Ліцензія: безкоштовно (брендовані карти) і платно (від $390).

jQuery Mapael (від Vincent Broute)
jQuery Mapael – Map with Links Between Plotted Cities

jQuery Mapael – ще одна дуже гідна, добре зроблена бібліотека з відкритим вихідним кодом, призначена для створення динамічних векторних карт. Вона заснована на jQuery і Raphael JS, так що ці залежності потрібно мати на увазі при побудові підтримуваних нею choropleth, bubble або connector карт.

Набір своїх, готових для використання карт лежить в репозиторії Mapael. Документація і опис API з'єднані в одну статтю, але, чесно кажучи, розпочати роботу з бібліотекою досить легко і з допомогою ось цього докладного туториала.

Опис API: .
Залежності: jQuery і Raphael.
Ліцензія: безкоштовно.

jVectorMap (від Kirill Lebedev)
jVectorMap – French Presidential Election, 2012

Бібліотека для інтерактивних карт jVectorMap має відкритий вихідний код, як і ряд інших перерахованих у статті. Вона не буде працювати без jQuery. Хоча комусь може здатися, що така зовнішня залежність робить дану (або будь-яку іншу) бібліотеку не дуже легко-універсальної, це не повинно стати великою проблемою в наш час, адже jQuery з великим відривом займає перше місце серед JavaScript-бібліотек для сайтів і по популярності, і за часткою ринку.

На жаль, вибір доступних типів серій тут не дуже великий: в jVectorMap пропонуються тільки choropleth і marker карти, але в той же час – віддамо цій бібліотеці належне – вони зроблені дуже добротно. Крім того, тут можна використовувати в якості маркерів будь-які картинки, а також є drill down і ряд інших інтерактивних функцій.

У jVectorMap досить невеликий опис API та немає документації в звичному для мене принаймні вигляді. Однак є маленький, але все одно дуже корисний туторіал Getting Started. Свої карти використовуються, але тільки у форматі GeoJSON.

Опис API: .
Залежності: jQuery.
Ліцензія: безкоштовно і платно (від $39).

Kartograph (від Gregor Aisch)
Kartograph – Symbol Map

Kartograph – ще одне відкрите рішення з усіма витікаючими з цього перевагами. Дану бібліотеку характеризує велика кількість візуальних ефектів, таких як тіні, розмиття і т. д.

Цікаво також, що на додачу до традиційних choropleth і bubble типів серій тут ще є 3D columns (або, як їх іноді називають, вертикальні 3D bars).

Готової колекції карт в Kartograph немає. Але бібліотека працює з будь-якими картами у форматі SVG. Також вона пропонує утиліту Kartograph.py для створення карт.

Хоча Kartograph має залежності і не буде працювати без Raphael JS (використовується як движок для малювання) і jQuery, ця бібліотека робить процес створення карт дійсно досить зрозумілим і безпроблемним, тоді як документація та опис API даної бібліотеки, з'єднані в одну статтю, дозволяють легко і зручно дістати потрібні інтерактивні карти для ваших проектів.

Опис API: .
Залежності: jQuery і Raphael.
Ліцензія: безкоштовно.

Висновок
Всі перелічені мною JavaScript-бібліотеки для візуалізації даних за допомогою інтерактивних карт – крос-браузерні. (Ну, в XXI столітті інакше, напевно, і бути не може.) Деякі з них навіть підтримують старі браузери, такі як Internet Explorer 6. (Хоча ось це, я сподіваюся, дуже скоро перестане бути важливим, в кінці 2010-х.)

Всі безкоштовні бібліотеки, які я згадав, досить-таки непогано справляються зі створенням інтерактивних карт. Але зате вони не забезпечують таку широку підтримку, як комерційні, так і – поклавши руку на серце – не так вже сильні в кастомізації (ну, крім D3, звичайно).

Говорячи про комерційних бібліотеках – до речі, зазвичай ними можна користуватися безкоштовно для некомерційного та особистих цілей, – я не можу не відзначити AnyMap і Highmaps за їх ґрунтовні документації та опису API, так само як і за великі пули усіляких прикладів/демо JavaScript-карт з добротної інтерактивністю.

Дякую за увагу. Сподіваюся, ця стаття виявиться для когось корисною з тією метою, щоб швидко схопити основну суть топових JavaScript-бібліотек, призначених для візуалізації даних за допомогою інтерактивних карт. Будь ласка, діліться у коментарях власними думками, висновками, розуміннями і, звичайно, назвами ваших улюблених бібліотек, якщо раптом я незаслужено, на ваш погляд, не торкнувся їх в даній статті.

Всім гарного дня!
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.