Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Интерактивная SVG картограмма с помощью d3.js

Работа с векторной графикойВизуализация данных
Tutorial
Приветствую вас, хаброжители! Сегодня я расскажу вам как сделать интерактивную SVG картограмму при помощи d3js.org, о возможностях этой JavaScript библиотеки в общем, а также придётся немного разобраться в том как и где лучше хранить геоинформацию для веба. В финале мы получим следующее:

Картограмма
Начать сие увлекательное путешествие можно под катом.
Читать дальше →
Всего голосов 75: ↑73 и ↓2 +71
Просмотры84.8K
Комментарии 40

Интерактивный глобус — SVG versus Canvas

Разработка веб-сайтовJavaScriptРабота с векторной графикой
Tutorial
Доброго времени суток, уважаемый читатель! В прошлый раз мы изучали процесс создания интерактивной карты-хороплета, теперь предлагаю немного усложнить задачу и перейти к трёхмерной модели Земли, именуемой в народе глобусом. Глобус делать будем двух видов: SVG версия и Canvas версия. В обоих случаях будем использовать JavaScript библиотеку d3.js. У каждого варианта свои преимущества. В моём исполнении Голубая планета выглядит следующим образом:

Планета Земля

А как создать свой собственный Мир с материками и океанами можно узнать под катом.
Читать дальше →
Всего голосов 56: ↑55 и ↓1 +54
Просмотры47.1K
Комментарии 20

Crossfilter.js, dc.js и D3.js для визуализации Данных

Разработка веб-сайтовJavaScript
Приветствую ценителей красивой и функциональной визуализации данных! Предлагаю вашему вниманию небольшой обзор нескольких JavaScript библиотек, которые вкупе с D3.js позволят создать интерактивную визуализацию многомерных данных с возможностью применения фильтрации «на лету».


Заинтересовались, тогда добро пожаловать под кат.
Читать дальше →
Всего голосов 54: ↑52 и ↓2 +50
Просмотры33.9K
Комментарии 15

Анимация перехода от глобуса к двумерной карте

Разработка веб-сайтовJavaScriptВизуализация данных
Tutorial
Хочу поделиться с хабром своим картографическим экспериментом, а именно анимацией перехода от Ортографической проекции (глобус) к Равнопромежуточной (одна из проекций обычных двумерных карт). Также этот способ подойдёт и для любых других проекций. Результатом экспериментов стала вот такая анимация:

От глобуса к карте


Как и прежде будем использовать библиотеку d3.js, как и прежде сделаем несколько реализаций: SVG и Canvas. Оба варианта можно будет эффектно использовать для интерактивной инфографики. Ну что, начнём?
Приступить к эксперименту
Всего голосов 50: ↑49 и ↓1 +48
Просмотры16.9K
Комментарии 17

Визуализируем в 3D, или как подружить D3 и Three.js

CodeOrchestraJavaScriptВизуализация данных
Tutorial
Если Вы уже слышали о D3 и Three.js, эта статья может показаться Вам интересной. В ней речь пойдёт о том, как заставить эти библиотеки работать вместе для создания динамических трёхмерных сцен, на примере этой простой гистограммы:



Да, мне интересно
Всего голосов 34: ↑32 и ↓2 +30
Просмотры14.1K
Комментарии 4

Анимация SVG-элемента path

Разработка веб-сайтовВизуализация данных
Tutorial
Думаю многие видели обзоры игровых консолей нового поколения от Polygon (Vox Media). Это те, где консоли отрисовывались в стиле blueprint'ов:

PlayStation 4

Обзоры выглядели круто, довольно необычно и ново. О том как реализована основная фишка обзоров — SVG анимация, как сделать нечто подобное самому, и какие ещё «секретные» возможности скрывает старый добрый SVG в плане анимации элемента path — можно узнать под катом.
Читать дальше →
Всего голосов 64: ↑62 и ↓2 +60
Просмотры116.3K
Комментарии 15

Генератор иконок по геоданным MIG

Работа с иконками
Приветствую хабросообщество. Хочу поделиться с вами одним из своих последних мини-проектов — генератором иконок по геоданным MIG. С его помощью можно сгенерировать векторные (SVG) и растровые (PNG) иконки, с заданными параметрами (цвет, размер, обводка и прочее).

MIG demopage

Всё это работает прямо в браузере и распространяется под лицензией MIT. Под катом можно узнать, как этим пользоваться и как оно работает.
Читать дальше →
Всего голосов 40: ↑40 и ↓0 +40
Просмотры8.6K
Комментарии 10

Введение в D3

Лаборатория данныхJavaScriptВизуализация данных
Tutorial

D3.js (или просто D3) это JavaScript-библиотека для обработки и визуализации данных. Она предоставляет удобные утилиты для обработки и загрузки массивов данных и создания DOM-элементов. Эта заметка описывает работу с основными методами библиотеки, она подойдёт для изучения основ библиотеки и погружения в её логику и возможности.

Для понимания статьи пригодятся знания JS, HTML и CSS.

Читать дальше →
Всего голосов 63: ↑59 и ↓4 +55
Просмотры133.2K
Комментарии 7

Веб-картография и SVG-эффекты

Геоинформационные сервисыВизуализация данных
Последнее время SVG всё чаще используется в front-end, тут и там известные разработчики пишут хорошие статьи в своих блогах. В общем, SVG, кажется, наконец-то начинает занимать заслуженные позиции в стеке технологий современного веб-разработчика. Так что сегодня предлагаю поговорить о том, как можно использовать SVG в веб-картографии. Мы рассмотрим, как можно использовать возможности SVG и перекочевавшие из него в CSS свойства для достижения различных визуальных эффектов. Использовать будем Leaflet и иногда D3, но ничто не мешает использовать и другие библиотеки. Фильтры, паттерны и другие эффекты ждут вас под катом.

Solar terminator
Читать дальше →
Всего голосов 42: ↑38 и ↓4 +34
Просмотры17K
Комментарии 9

Тренды JavaScript на 2015 год

MicrosoftРазработка веб-сайтовJavaScriptTypeScript


Всем привет! Мы как-то задумали сделать легкий вводный курс на тему JavaScript и разработки приложений (он, кстати, скоро будет опубликован): и, пока я собирал материалы к нему, как-то само собой выяснилось, что есть довольно много вещей, которые, так сказать, находятся на переднем крае развития JavaScript. Отсюда родилась идея сделать отдельную обзорную статью в жанре «X трендов на год Y по технологии Z».

Многие из тех, вещей, которые я буду описывать, можно попробовать в той или иной степени уже сегодня (собственно, иначе я бы говорил о космическом будущем, а не о трендах). В этом есть несомненный плюс: если у вас будет свободное время (а на праздниках его обычно много), вам будет чем заняться. Да и, в целом, хорошо начинать новый год с расширения своих горизонтов!
Читать дальше →
Всего голосов 108: ↑88 и ↓20 +68
Просмотры111.7K
Комментарии 76

Туториал: компонент интерактивной SVG картограммы для InstantCMS 2

Разработка веб-сайтовPHP
Tutorial
Сложность: средняя.
Необходимое время: 30 мин.
В статье представлена инструкция по созданию своего компонента для движка InstantCMS2. В конце статьи приведена ссылка на архив с исходным кодом и содержимым всех файлов из этой инструкции. Пример внешнего вида компонента, который можно создать, используя данный туториал, представлен на иллюстрации (картинка кликабельна).

Наглядное представление реального уровня зарплат в Российской Федерации

Для начала несколько слов про движок соц.сети / сообщества / блогосоциальной сети InstantCMS2. Эта бесплатная CMS может являться отличным компромиссом, возможно, лучшим из существующих.
В базовой версии уже заложен более богатый функционал по сравнению с LiveStreet CMS.
Читать дальше →
Всего голосов 10: ↑7 и ↓3 +4
Просмотры4.9K
Комментарии 0

Как в проекте заменить jQuery на D3

Разработка веб-сайтовJavaScriptjQuery
Перевод
Создавая визуализации или интерактивные страницы, мы часто используем комбинацию из 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');  

Читать дальше →
Всего голосов 25: ↑19 и ↓6 +13
Просмотры18.7K
Комментарии 16

«Война и мир» – испытание временем

Разработка веб-сайтовJavaScriptВизуализация данных
Из песочницы


4 декабрьских дня подряд, порядка 1300 человек на протяжении 60 часов из 30 городов читали «Войну и мир». Беспрецедентный мультимедийный проект от ВГТРК, в течении которого произведение Льва Толстого было прочитано от первой и до последней строчки. Проект захватывает своей грандиозностью и тянет на книгу рекордов Гиннесса.

Помимо литературного марафона была выпущена серия интерактивных инфографических работ под эгидой аналитического сообщества Tolstoy Digital. Каждая инфографика, а всего их 4, анализирует произведение под различнымы углами: человеческие отношения, места, время, история, предметы, культура в целом.

Под катом отрывки из романа, немного кода и мои мысли по процессу инфографирования данных на примере событийного таймлайна.
Читать дальше →
Всего голосов 21: ↑16 и ↓5 +11
Просмотры11K
Комментарии 7

Диагностика и устранение утечек памяти в приложениях с TypeScript

True EngineeringРазработка веб-сайтовJavaScriptTypeScript

Введение


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

По теме утечек памяти в клиентских приложениях написано уже немало. Изначально основную проблему представляли из себя браузеры IE8 и младших версий (смотрите, например:
http://habrahabr.ru/post/141451/
http://habrahabr.ru/post/146784/
https://learn.javascript.ru/memory-leaks).
Но и теперь, когда можно сказать, что IE8 в прошлом, проблемы остаются. Даже применение такого языка как TypeScript не гарантирует их отсутствия. А с учетом того что front-end в web-приложениях становится все сложнее, актуальность проблемы только возрастает.
Читать дальше →
Всего голосов 16: ↑13 и ↓3 +10
Просмотры7.9K
Комментарии 3

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

JavaScriptАлгоритмыВизуализация данных
Tutorial
D3.js — это библиотека JavaScript для управления документами, в основе которых лежат данные. D3 помогает претворить данные в жизнь, используя HTML, SVG и CSS. D3 позволяет привязывать произвольные данные к DOM, и затем применять результаты манипуляций с ними к документу.

Для понимания статьи пригодится знание основ D3, и в ней мы рассмотрим реализацию алгоритмов визуализации графа на основе сил (Force-directed graph drawing algorithms), которая в D3 (version 3) имеет название Force Layout. Это класс алгоритмов визуализации графов, которые вычисляют позицию каждого узла, моделируя силу притяжения между каждой парой связанных узлов, а также отталкивающую силу между узлами.

image
Читать дальше →
Всего голосов 16: ↑16 и ↓0 +16
Просмотры45.3K
Комментарии 8

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

RОткрытые данныеВизуализация данных

Внимание, футбол на Хабре! Вот этот пост побудил меня загрузить данные о распределении игроков команд-участниц Евро 2016 по национальным лигам, в которых они выступают. На значимый турнир в национальные сборные вызывают сильнейших на данный момент футболистов. По этой выборке мы можем сравнить между собой европейские футбольные первенства. Какие лиги самые представительные на Евро 2016 и за счет чьих сборных? Под катом графики (трафик) и немного рассуждений. Свисток, игра началась!


Читать дальше →
Всего голосов 11: ↑10 и ↓1 +9
Просмотры14.8K
Комментарии 7

Простые графики с помощью D3.js

JavaScript
Из песочницы
Tutorial

Gualtiero Boffi | Dreamstime.com


D3.js (или просто D3) — это JavaScript-библиотека для обработки и визуализации данных с невероятно огромными возможностями. Я, когда впервые узнал про нее, наверное, потратил не менее двух часов, просто просматривая примеры визуализации данных, созданных на D3. И конечно, когда мне самому понадобилось строить графики для небольшого внутреннего сайта на нашем предприятии, первым делом вспомнил про D3 и с мыслью, что “сейчас я всех удивлю крутейшей визуализацией”, взялся изучать исходники примеров…

Читать дальше →
Всего голосов 20: ↑19 и ↓1 +18
Просмотры59.3K
Комментарии 22

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

ООО «ЦИТ»JavaScriptООПМатематикаФункциональное программирование
Tutorial


Абстракция – это одна из основных техник в ИТ. Любой язык программирования или моделирования, любая парадигма программирования (процедурная, функциональная, ООП, …) дают ответ на вопрос, как и от чего нужно абстрагироваться. Причём, адепты каждого подхода предлагают какой-то свой вариант абстракции.

Если вы хотите увидеть истинную, универсальную абстракцию, то вступайте в нашу… изучайте теорию категорий. В статье на примере категории множеств с картинками и JavaScript-кодом объясняются самые базовые понятия теории категорий: пределы, универсальное свойство. Рассматривается вычислительный аспект теории категорий.

Также немного говорится про классы, примеси и смеси в JavaScript.

Примеры из статьи можно посмотреть тут.
Читать дальше →
Всего голосов 48: ↑48 и ↓0 +48
Просмотры30.8K
Комментарии 47

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

JavaScriptBig DataВизуализация данных
Из песочницы
Визуализация данных стала неотъемлемой частью жизни практически каждого веб-разработчика. Если построение графиков, диаграмм, карт и дашбордов до сих пор никогда не были вашей головной болью, просто немного подождите: наверняка и вы скоро вступите в наш «клуб».

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

Заглавная картинка: визуализация данных с помощью интерактивных карт
Читать дальше →
Всего голосов 28: ↑28 и ↓0 +28
Просмотры29.4K
Комментарии 14

Карта артистов, неуклюжий поиск связей в данных и как можно изобрести велосипед

JavaScriptData MiningОткрытые данныеВизуализация данных
Недавно смотрел серию видео популяризатора математики. Там он пытается рассказывать про математический анализ и линейную алгебру немного с позиции человека, который «как бы» изобрел бы ее с нуля. То есть пытается делать доступными простые и понятые визуализации относительно сложных концепций, как бы объясняя их с позиции человека, который как будто бы придумал это впервые. Относительно недавно читал статью на Хабре про unsupervised learning и увидел там раздел про Affinity Propagation. Как оказалось, мы использовали именно этот метод кластерного анализа чисто интуитивно, сами того не ведая.

TLDR для данной статьи. Если хотите интерактивную визуализацию, проследуйте сюда.
В данной визуализации в виде графа показаны связи между музыкальными жанрами ~25,000 самых популярных артистов мира, причем размер кругляшка показывает популярность данного жанра, а размер ребра графа — силу связи.

image
Читать дальше →
Всего голосов 20: ↑15 и ↓5 +10
Просмотры4.1K
Комментарии 6
1