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

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

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

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

Теорія категорій на JavaScript. Частина 1. Категорія множин



Абстракція – це одна із основних технік у ІТ. Будь-яка мова програмування або моделювання, будь-яка парадигма програмування (процедурне, функціональна, ООП, ...) дають відповідь на питання, як і від чого потрібно абстрагуватися. Причому, адепти кожного підходу пропонують якийсь свій варіант абстракції.

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

Також трохи йдеться про класи, домішки та суміші в JavaScript.

Приклади зі статті можна переглянути тут.

Читати далі →

D3.js. Візуалізація графів

D3.js — це бібліотека JavaScript для управління документами, в основі яких лежать дані. D3 допомагає втілити дані в життя, використовуючи HTML, SVG і CSS. D3 дозволяє прив'язувати довільні дані до DOM, і потім застосовувати результати маніпуляцій з ними до документа.
Для розуміння статті стане в нагоді знання основ D3, і в ній ми розглянемо реалізацію алгоритмів візуалізації графа на основі сил (Force-directed graph drawing algorithms), яка D3 (version 3) має назву Force Layout. Це клас алгоритмів візуалізації графів, які обчислюють позицію кожного вузла, моделюючи силу тяжіння між кожною парою пов'язаних вузлів, а також відразливу силу між вузлами.

image

Читати далі →

Склади команд на Євро 2016: порівняння європейських футбольних ліг

Увагу, футбол на Хабре! Ось цей пост спонукав мене завантажити дані про розподіл гравців команд-учасниць Євро-2016 за національним лігам, в яких вони виступають. На значущий турнір у національні збірні викликають найсильніших на даний момент гравців. По цій вибірці ми можемо порівняти між собою європейські футбольні першості. Які ліги самі представницькі на Євро 2016 і за рахунок чиїх збірних? Під катом графіки (трафік) і трохи міркувань. Свисток, гра почалася!

Читати далі →

Як у проекті замінити jQuery на D3

Створюючи візуалізації або інтерактивні сторінки, ми часто використовуємо комбінацію з jQuery і D3. Причому в основному використовується D3, а з jQuery беруть невеликий набір функцій для маніпуляцій з DOM.

І хоча в D3 є потужні можливості – селектори і обгортка для ajax, часто нам не вистачає якихось функцій з jQuery. Ми покажемо, як можна замінити jQuery, використовуючи D3 повсюдно. В результаті ваш код спроститься, обсяг проекту зменшиться, і ви не будете змішувати різні підходи, а будете використовувати функції так, як прийнято в D3.

Для початку розглянемо, у чому ці дві бібліотеки сходяться. Це зручно для тих, хто вже знає jQuery, і хоче вивчити D3.

Схожості

Селектори
Обидві бібліотеки засновані на простих у використанні, але багатих на можливості селекторах.

jQuery

$('.foo').addClass('foobar');
$('.foo').removeClass('foobar');


D3

d3.selectAll('.foo').classed('foobar', true); 
d3.selectAll('.foo').classed('foobar', false); 


Управління стилями і атрибутами
jQuery

$('.foo').attr('data-type', 'foobar');
$('.foo').css('background', '#F00');


D3

d3.selectAll('.foo').attr('data-type', 'foobar'); 
d3.selectAll('.foo').style('background', '#F00'); 


Читати далі →

Веб картографія та SVG ефекти

    Останнім часом SVG все частіше використовується в front-end, тут і там відомі розробники пишуть гарні статті в своїх блогах. Загалом SVG, здається, нарешті починає займати заслужені позиції в стеці технологій сучасного веб розробника. Так що сьогодні пропоную поговорити про те, як можна використовувати SVG в веб картографії. Ми розглянемо як можна використовувати можливості SVG і перекочували з нього в CSS властивості для досягнення різних візуальних ефектів. Використовувати будемо Leaflet і іноді D3 , але ні що не заважає використовувати й інші бібліотеки. Фільтри, патерни та інші ефекти чекають вас під катом.
 
 Solar terminator
 
Читати далі →