Как стать автором
Обновить

Github Visualizer — Сервис визуализации истории репозиториев с GitHub

JavaScript *Git *Canvas *
Будучи поклонником программных продуктов для визуализации активности в репозиториях таких как code_swarm и gource. В один прекрасный день я был посещен музой, которая вдохновила меня создать онлайн сервис для визуализации статистики репозиториев с GitHub.
И сегодня хочу предоставить на ваш суд мой проект GitHub Visualizer (проект на GitHub).
Вот скринкаст для предварительного знакомства.

И не большая Gif'ка
image

Что использовано


Читать дальше →
Всего голосов 48: ↑46 и ↓2 +44
Просмотры 15K
Комментарии 30

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

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

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

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

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

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

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

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

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


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

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

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

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


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

Лаборатория данных

Блог компании Лаборатория данных Визуализация данных *
Сложные данные всегда были моей страстью. В 2007 году с подачи Артёма Горбунова я прочитала все книги Тафти и открыла для себя информационный дизайн. Первая визуализация — пассажиропотоки в метро — стала для меня счастливым билетиком в бюро, тогда же появился псевдоним Инфотанька. С тех пор я работала над тигриным календарём и бюрошными инфограммами, мобильным приложением «Веб-наблюдатель» со статистикой нарушений и информативным логотипом, умными маркетинговыми графиками для Зептолаба, интерфейсами Oh my stats!.



В июне этого года я, наконец, решила посвятить себя тому, что умею делать лучше всего, — визуализации данных. Так появилась лаборатория.
Читать дальше →
Всего голосов 108: ↑99 и ↓9 +90
Просмотры 23K
Комментарии 28

Мы бежали марафон

Блог компании Лаборатория данных
Рассказ о проектах лаборатории я начну с нашей гордости — визуализации результатов Московского марафона. Она показывает схему и рельеф трассы, интересные факты о забеге, меняющуюся погоду и, самое главное, интерактивную толпу бегунов.



При движении слайдера марафонцы перемещается по маршруту: на старте все бегут вместе, но со временем растягиваются вдоль трассы. Толпа состоит из «змеек», цвет которых обозначает пол и возраст бегунов. В голове и хвосте «удава» видны разноцветные точки — лидеры и отстающие. Когда финишируют победители, замыкающие спортсмены находятся на Садовом кольце, пробежав только треть пути. Обратите внимание на серые блоки слева и внизу — это высотный профиль трассы. Левая часть показывает подъёмы и спуски на пути от старта до Парка Горького, нижняя — оттуда до финиша. Суммарный подъём на трассе составил 230 м, что равно высоте главного здания МГУ вместе со шпилем. Непростое испытание для марафонцев!
Читать дальше →
Всего голосов 57: ↑49 и ↓8 +41
Просмотры 17K
Комментарии 34

Мы бежали марафон. Продолжение

Блог компании Лаборатория данных Визуализация данных *
В продолжение марафонской истории я расскажу, как мы создавали визуализацию. Работа над проектом шла поэтапно: идея, дизайн, реализация и наполнение данными.

Идея

Идея показать результаты забега пришла ко мне после участия в «Весеннем громе». Скучные официальные таблицы никак не отражали настроение забега, при этом данные были в открытом доступе — сложные и интересные. Лаборатория только открылась, и в качестве тестового задания для вакансии дизайнера я выбрала задачу о визуализации результатов «Весеннего грома». Из десятка вариантов мне больше всего понравилась идея Сергея Долинина svetosil — показать распределение участников в момент первого финиша:



Мы взяли за основую эту идею и оживили её временным слайдером. Визуализация марафона стала первым проектом Серёжи в лаборатории.
Читать дальше →
Всего голосов 42: ↑33 и ↓9 +24
Просмотры 16K
Комментарии 18

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

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

PlayStation 4

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

Учебный курс «Визуализация данных»

Блог компании Лаборатория данных Визуализация данных *
Tutorial
25 и 26 января лаборатория проводит практический учебный курс по визуализации данных.



Весь прошлый год мы в лаборатории решали задачи по визуализации и придумывали новые форматы представления данных, я вела обычные и живые советы, читала лекции и проводила практические занятия со студентам МАИ, МГУ и участниками питерского «Дизайн-трека». Мы собрали огромное количество материала, которым не трепится поделиться, и подготовили двухдневный практический курс для тех, кто хочет перейти «на ты» со сложными данными и с головой погрузиться в тему.

На курсе участники учатся работать с данными с помощью дизайнерских инструментов. В первый день мы разберём хорошие и плохие примеры, по-новому взглянем на привычные таблицы, графики и диаграммы, познакомимся с необычными форматами — удавом, слоёным пирогом, мозаикой, домограммой. Во второй день Дима Тихвинский devgru, веб-технолог лаборатории, покажет как применить эти навыки при работе с библиотекой D3.js — самым современным и гибким инструментом интерактивных визуализаций. Все участники курса получат раздаточные материалы с кратким конспектом лекций:


Курс будет полезен дизайнерам, аналитикам, менеджерам, программистам, журналистам и редакторам онлайн-изданий. Предварительного знакомства с D3.js не требуется, опыт работы с HTML, CSS и JavaScript полезен, но не обязателен.

Чтобы заинтересовать хабровчан, я приготовила полезный и приятный сюрпризы. В этой заметке я поделюсь рецептами грамотной работы со сложными данными, которым мы учим на курсе, и расскажу, как получить скидку.
Читать дальше →
Всего голосов 42: ↑35 и ↓7 +28
Просмотры 32K
Комментарии 18

Роза кишечных бактерий

Блог компании Лаборатория данных Big Data *Визуализация данных *
Научные задачи, связанные с обработкой и визуализацией сложных данных, — одни из самых нетривиальных и интересных. В научных экспериментах накапливаются огромные объёмы данных с разнообразными измерения и параметрами, характерными для конкретной области знаний, зачастую взаимосвязанными. При этом удобный и наглядный способ интерпретации этих данных быстро приводит к результату и наглядно демострирует его заинтересованным лицам — а там и до важного открытия рукой подать. Вспомните таблицу Менделеева, диаграммы Фейнмана, спектральные серии веществ, геномные схемы ДНК, карты реликтового излучения.

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



Читать дальше →
Всего голосов 50: ↑48 и ↓2 +46
Просмотры 17K
Комментарии 17

BlackHole.js с привязкой к картам leaflet.js

JavaScript *Maps API *Визуализация данных *
Tutorial
Приветствую вас, сообщество!

Хочу предложить вашему вниманию, все таки доведенную до определенной точки, свою библиотеку для визуализации данных blackHole.js использующую d3.js.
Данная библиотека позволяет создавать визуализации подобного плана:
картинки кликабельные
image или

Статья будет посвящена примеру использования blackHole.js совместно с leaflet.js и ей подобными типа mapbox.
Но так же будут рассмотрено использование: google maps, leaflet.heat.

Получится вот так =)

Поведение точки зависит от того где я находился по мнению google в определенный момент времени

Посмотрите, а как перемещались вы?...
Детали...
Всего голосов 42: ↑38 и ↓4 +34
Просмотры 23K
Комментарии 4

Создавая карту комфортной прогулки

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



Мне по-прежнему нравятся карты и я их люблю и рассказываю про них, а ещё иногда что-то такое иногда с картами делаю. И сейчас рассказ тоже будет про картографический сервис.
Читать дальше →
Всего голосов 47: ↑45 и ↓2 +43
Просмотры 9.8K
Комментарии 17

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

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

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

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

Анализ взаимосвязи навыков с помощью графов в R

Data Mining *R *Открытые данные *Визуализация данных *
Из песочницы

Интересно, но такая область как профессиональное развитие остается немного в стороне от шума из-за data science. Стартапы в сфере HRtech только начинают наращивать обороты и увеличивать свою долю, замещая традиционный подход в сфере работы с профессионалами или, теми, кто хочет стать профессионалом.


Сфера HRtech очень разнообразна и включает в себя автоматизацию найма сотрудников, развитие и коучинг, автоматизацию внутренних HR процедур, отслеживание рыночных зарплат, трекинг кандидатов, сотрудников и многое другое. Данное исследование помогает с помощью методов анализа данных ответить на вопрос как взаимосвязаны навыки, какие есть специализации, какие навыки более популярны, а какие навыки следует изучить следующим.

Читать дальше →
Всего голосов 15: ↑14 и ↓1 +13
Просмотры 7.2K
Комментарии 5

Tableau от чайника или визуализация анализа ПАММ счетов

Визуализация данных *Smalltalk *

image


Друзья, добрый день.


Давно не писал, и тут подписался на рассылку компании Абвгд. Красивые письма пишут мОлодцы :) Уговаривают вложиться в ПАММ счета. Что это такое не знаю. Зато понятно, как эти данные анализировать.


Терминология – есть ПАММ-счет и у него есть управляющий. Буду использовать термин «ПАММ-счет» и «управляющий» — здесь это синонимы.


По теме хотелось сделать визуализацию в инструменте Tableau Public. Статьи об этом «в доступной для меня форме» не нашел. Она ниже.


План атаки:


  1. Формулируем задачу,
  2. Собираем данные,
  3. Причёсываем,
  4. Делаем несколько графиков,
  5. Сводим на один дашборд,
  6. Выкладываем на https://public.tableau.com
  7. Формулируем резюме. Профит.

Задача


Работаю на работе работу. Получаю зарплату, аванс там или ещё что-то. Пусть деньги приходят еженедельно в ночь с воскресенья на понедельник. Хочу вложиться в высокодоходные активы, например в ПАММ счет. И вкладываться еженедельно понемногу.


Надо понимать, когда и куда вкладываться. Доходность нужна высокая, просадки должны быть минимальными.

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

Web scraping с помощью R. Сравнение оценок фильмов на сайтах Кинопоиск и IMDB

Data Mining *R *Визуализация данных *

image


Всемирная паутина — это океан данных. Здесь можно посмотреть практически любую интересующую Вас информацию. Однако, "вытащить" эту информацию из интернета уже сложнее. Есть несколько способов получить данные и web-scraping один из них.

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

Информационная панель распространения Коронавируса COVID-19 (React + Chart.js + BootstrapTable)

Open source *JavaScript *Визуализация данных *

Я выложил в "оупен-сорс" новую информационную панель распространения Коронавируса COVID-19, которая позволяет анализировать динамику (кривизну графика) распространения Коронавируса для разных стран.


Информационная панель распространения Коронавируса COVID-19

Читать дальше →
Всего голосов 16: ↑11 и ↓5 +6
Просмотры 5.4K
Комментарии 9

Критерии оценки российских BI-систем

IT-инфраструктура *
Из песочницы
Я уже много лет возглавляю компанию, являющуюся одним из лидеров по внедрению BI-систем в России и регулярно входящую в топ-списки аналитиков по объему бизнеса в области BI. За время работы я участвовал во внедрении BI-систем в компаниях из различных областей экономики – от ретейла и производства до индустрии спорта. Поэтому мне хорошо знакомы потребности заказчиков решений для бизнес-аналитики.

Решения зарубежных вендоров хорошо известны, у большинства из них сильный бренд, их перспективы анализируют крупные аналитические агентства, то отечественные BI-системы в большинстве своем пока остаются нишевыми продуктами. Это серьезно усложняет выбор тем, кто ищет решение для удовлетворения своих запросов.

Чтобы устранить этот недостаток, мы с командой единомышленников решили сделать обзор BI-систем, созданных российскими разработчиками — «BI-круг Громова». Мы проанализировали большинство представленных на рынке отечественных решений и постарались выделить их сильные и слабые стороны. В свою очередь, разработчики вошедших в обзор систем благодаря ему смогут со стороны взглянуть на плюсы и минусы своих продуктов и, возможно, внести коррективы в стратегию их развития.

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

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

В обзоре приняли участие решения: Visiology, Alpha BI, Форсайт.Аналитическая платформа, Модус BI, Polymatica, Loginom, Luxms BI, Yandex.DataLens, Криста BI, BIPLANE24, N3.АНАЛИТИКА, QuBeQu, BoardMaps ОАО «Дэшборд Системс», Slemma BI, KPI Suite, Malahit: BI, Naumen BI, МАЯК BI, IQPLATFORM, А-КУБ, NextBI, RTAnalytics, Simpl.Платформа управления данными, DATAMONITOR, Галактика BI, «Эттон Платформ», Модуль BI

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

Рейтинг знаков зодиака среди Великих людей мира

Занимательные задачки Big Data *Визуализация данных *
Recovery mode
Однажды мы размышляли о рейтинге знаков зодиака среди Великих людей. Задачу выполнили и представляю результаты на ваш суд.

Со скорбью замечу, что Весы (ЭТО Я!) на последнем месте… Хотя что-то по данным мне кажется, что есть аномалии. Как-то подозрительно мало Весов!


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