диаграмма сэнки что это
Диаграмма Sankey в Qlik Sense: чем она полезна?
На Data-Daily уже писали о возможностях расширенной визуализации в Qlik Sense, поэтому я решил продолжить свои эксперименты по изучению новых типов визуализации в сенсе и применению расширений. Сегодня расскажу вам о диаграмме Sankey – что это такое, где и зачем нужна такая визуализация и, как ее создать при помощи расширений Qlik Sense.
Диаграмма Sankey: Что это такое?
Начнем погружение в историю вопроса. Многие из интернет-маркетологов ежедневно видят эту диаграмму в Google Analytics, анализируя поток посетителей и источники трафика, но, вот, каковы истоки рождения этой диаграммы задумывается далеко не каждый. Итак, небольшой экскурс.
Название у диаграммы несколько странное, не находите? Берет она свое начало от имени Мэтью Сэнкея, одного ирландского инженера 19 века – именно он первым применил такую визуализацию, чтобы показать распределение энергии в двигателе и усовершествовать его.
Диаграмма Sankey относится к классу диаграмм процесса и показывает ключевые шаги процесса и интенсивность его протекания на каждом из участков в виде соединяющихся и разветвляющихся линий разной толщины (в зависимости от величины параметра).
Диаграмма Sankey: Где и зачем нужна?
Где обычно эта диаграмма применяется? Sankey традиционно используется для отображения движения потока: например, процесс передачи тепла от ТЭЦ к бойлерной станции, включая его потери по различным причинам. Кроме того, эта диаграмма может применяться и для анализа пропускной способности нефтепровода, нагрузки сети и, конечно, движения денежных средств, если речь идет о наличии нескольких источников дохода.
Итак, когда хотим показать движение потока (энергии или денег) в виде сети узлов, то смело можем использовать диаграмму Sankey.
Диаграмма Sankey: Преимущества использования
Давайте рассмотрим таблицу распределения денежных вознаграждений по департаментам компании в разрезе городов:
Таблица привычна и хорошо отображает распределение зарплат между территориями и департаментами, НО диаграмма Sankey в этом случае сработает намного лучше. Смотрите сами:
Диаграмма Sankey в Qlik Sense
Итак, наконец-то, краткая инструкция по созданию диаграммы Sankey в Qlik Sense.
Если мы представим, что наша диаграмма состоит из связей и узлов, то …
получим вот такую диаграмму.
Здесь файл JSON может быть представлен таким образом:
Отображения потоков данных в реальном времени: диаграмма Сэнки
Привет! Меня все еще зовут Таня, я все также живу в Нидерландах и в одиночку воспитываю 4 котов. В перерывах я веду канал «ИТ для тугосерь» и немного пишу для DOU. В прошлый раз я говорила о важности (или неважности) софтскилов в отдельно взятой Голландии, а сегодня хочу рассказать о диаграмме Сэнки — одном из вариантов визуализации нашей работы, внедренном нами в ходе последней инновационной недели. Статья будет полезна, если вы, как и мы, никак не найдете приемлемый инструмент для визуализации своей работы, а также если вы просто очень большой поклонник графиков и чартов.
Сначала немного предыстории
Последний год я работаю в компании, которая предоставляет платежный сервис (PSP). По сути, этот сервис у нас только один. Но он как айсберг: снаружи видно гораздо меньше, чем скрыто под водой. Казалось бы, все просто: я прихожу в магазин, делаю покупку, расплачиваюсь картой, и деньги перетекают продавцу. На самом же деле они не попадают сразу на банковский счет продавца, а проходят сначала через нас. Мы делаем много проверок, включая обнаружение всяческих попыток мошенничества, и уже потом отправляем деньги дальше.
Наш СТО — большой поклонник Spotify, поэтому все отделы разработки (а их несколько в разных странах) разбиты на трайбы. Каждый трайб отвечает за свой участок. Конкретно тот, в котором работаю я, — за бэк транзакций. Грубо говоря, мы берем транзакции на входе, проверяем их на соответствие разным всяким вещам и отдаем на выход те транзакции, которые эти сверки прошли.
Наш проект — это куча микросервисов, связанных друг с другом, но никак не связанных ни с каким GUI. То есть максимум, что мы можем показать на ревью и в ежеквартальных отчетах, это какая-нибудь картинка из RabbitMQ или красиво оформленный большой запрос к базе данных, который, по сути, вернет нам несколько цифр. Наше визибилити из-за этого сильно страдало, потому что, пока остальные команды показывают красивые интерфейсы и клацают кнопки, мы рассказываем, какие мы крутые и сколько миллионов транзакций можем обработать за день. Но при этом показать ничего не можем. А всем известно, что менеджеры всех мастей очень любят красивые и разноцветные картинки — и дайте две.
Мы попытались решить эту проблему рассылкой ежедневных писем с отчетами: сколько транзакций мы получили за предыдущие сутки с почасовой разбивкой и результатами проверок. Но опять же это просто таблица в письме. Мы туда несколько цветов добавили. Например, зеленый — это если все хорошо, а желтый — хорошо, но не очень. Это решило проблему частично. Потому что просмотр такого письма занимает полминуты. Нашей же задачей было дать менеджерам что-то, с чем можно играть гораздо дольше.
Попытки дать им доступ к какому-то дашборду типа Kibana тоже не увенчались успехом. Мы перепробовали штук 5 и сдались. А потом наш архитектор поехал в командировку в соседнюю страну для встречи с нашими испанскими коллегами. И обнаружил там гениальную в своей простоте вещь. Они взяли карту мира (а наши представительства есть в очень многих странах) и сделали на ней такую визуализацию: каждый раз, когда в мире совершается какая-то транзакция, которую мы обрабатываем, в этом месте на карте зажигается огонек. И он летит в главный офис в Амстердам. И все это выведено на большой экран прямо в холле офиса.
Понятное дело, что невозможно отследить в прямом эфире все транзакции, у нас нет такой возможности. Мы получаем данные позже и сразу кучей. Но даже если предположить, что есть, то на карте было бы сплошное месиво из летящих звезд, потому что в день мы обрабатываем очень много транзакций. То есть с технической точки зрения проект был ни о чем. Но видели бы вы глаза менеджеров и слышали бы вы их восторги по поводу такой «интерактивной карты». Так в голову нашего архитектора пришла идея о внедрении диаграммы Сэнки.
Что такое диаграмма Сэнки
Если в двух словах, то это диаграмма потоков. При этом толщина каждого из потоков зависит от количества данных в нем. Классическое представление этой диаграммы сегодня — потоки энергии на фабрике, где они разделены на производство, утилизацию и потери, а источниками при этом могут быть газ, электричество или нефть. Для нас это подходило идеально:
Примечательно, что идея этой диаграммы не нова и используется она на производствах еще с 1898 года, когда ирландский капитан Мэттью Сэнки начертил эффективность работы парового двигателя в черно-белых тонах. Выглядело это тогда страшненько, но со временем добрые люди диаграмму раскрасили, спасибо им большое.
Диаграмма Сэнки чаще всего применяется в науке, особенно в физике, но нет ничего, что помешало бы нам нагло воспользоваться наработками ученых и перенести диаграмму в ИТ.
Внедрение
Я уже упоминала, что выхода в нормальный мир у нашей части проекта нет, это сплошной бэкенд. Поэтому для реализации проекта нам потребовалось создать страничку с диаграммой Сэнки с самого нуля.
Я думаю, вы слышали о библиотеке Data-Driven Documents (d3.js) для JavaScript, которая позволяет создавать всякие чарты и графики. D3 использует SVG, Canvas и HTML.
Используется она уже повсюду. Например, New York Times использует эту библиотеку для создания своих интерактивных визуальных историй. Если о ней еще не слышали, то простой туториал для начинающих можно посмотреть тут.
В d3.js имплементируется специальный плагин для создания диаграмм Сэнки, который так и называется d3-sankey. Плагин предоставляет возможность выбрать один из двух вариантов построения диаграммы: «шаг за шагом» или «выбор из блоков». Мы решили остановиться на последнем.
Данные для нашей диаграммы предоставлял Elastic. Он у нас уже был, мы настраивали его, когда ставили Kibana в надежде привлечь менеджеров к использованию дашбордов. Затея провалилась чуть менее, чем полностью, но я как тестировщик этому дашборду несказанно рада. Все данные изо всех сервисов идут туда. Плюс удобная навигация по логам на всех environments, которых у нас 5, и у всех сервисов, которых у нас чуть больше десятка.
Данные для партнеров у нас идут также через RabbitMQ, поэтому он тоже был вовлечен во всеобщую истерию. Диаграмма Сэнки демонстрировала размеры очередей, проходящих через Rabbit, в том числе и очереди с ошибками.
В итоге была создана диаграмма Сэнки, отображающая потоки за последние 24 часа с разбивкой на часовые снепшоты. Был добавлен слайдер для навигации по снепшотам и сами транзишены мы сделали анимированными.
Получилось что-то типа такого (картинка честно нагуглена, наша картинка под NDA) 🙁
В качестве итога
По сути, эта диаграмма показывает те же данные, что приходят в нашей ежедневной рассылке: транзакции за последние 24 часа с почасовой разбивкой и результатами проверок. Но Сэнки выглядит красиво и разноцветно. За счет легкой анимации создается впечатление, что данные на диаграмме меняются в реальном времени. А слайдер позволяет «открутить» данные немного назад.
Я не скажу, что все это привело наших менеджеров в священный трепет, но определенно имело успех. Теперь у них создается впечатление, что они контролируют процесс. Повышать визибилити всегда хорошо. Как минимум теперь управленцам кажется, что наша команда действительно делает что-то важное, ведь это можно увидеть и даже поиграть с ним.
Если у вас такая же ситуация с презентацией результатов работы, то вот вам простой лайфхак.
И всего лишь неделя работы 2 разработчиков и половинки девопса.
А самих диаграмм D3 может строить великое множество. Вот здесь можно посмотреть на галерею с ними.
Диаграмма Сэнкей (Sankey diagram) на Python
Я занимаюсь аналитикой данных в Aliradar. Мы не представлены на Хабре, но у меня поднакопился материал, которым хотелось бы поделиться. Написать эту статью меня сподвигло отсутствие годных гайдов по построению диаграммы Сэнкей с использованием python на русском языке.
Забегая вперед, покажу, что получится в итоге. Для подготовки данных и построения диаграммы использовал python, pandas и plotly. Надеюсь, что эта статья будет полезна аналитикам данных, код можно запустить в colab, либо взять в репозитории на github.
А теперь разберем пошагово.
Что это такое?
Первая публикация этой диаграммы появилась в 1898 году. Ее создатель, Мэтью Сенкей (Matthew H. Sankey), показал сравнение парового двигателя и двигателя без энергопотерь.
Тепловая эффективность парового двигателя
Упрощенная схема диаграммы Сэнкей
Разберем эту схему:
есть событие event_1, которое происходит раньше других и находится левее других на схеме. Такое событие будем считать источником (source);
далее происходит «переход» уникальных пользователей от event_1 (source) к событиям event_1, event_2, event_3, которые будем считать на первом шаге (step_1) целевыми действиями (target). Количество уникальных пользователей, совершивших переход от source к target показано с помощью ширины канала между source и target;
на шаге step_2 уже event_1, event_2, event_3 будут являться источниками, а event_3 и event_4 целевыми действиями;
Подготовка данных
В качестве исходных данных для построения я сгенерировал искусственные данные.
Загрузка подготовленных данных
Первые 5 строк исходной таблицы имеют следующий вид:
Преобразование исходной таблицы
Первые 5 строк таблицы после преобразования:
Что получили в итоговой таблице:
события каждого id отсортированы по времени;
добавлен шаг между этими событиями для построения диаграммы;
удален столбец event_name, так как в дальнейших преобразованиях он использоваться не будет.
Ограничение количества шагов до 7
Создание индексов для source
Важным следующим шагом в подготовке данных является создание индексов для source. На каждом следующем шаге target становится source, и чтобы диаграмма коррректно генерировалась нужна правильная индексация source на каждом шаге.
Затем для каждого шага объединяем имена и индексы в еще один вложенный словарь. Все вложенные списки и словари потребуются в дальнейшем для генерации меток, подписей и размера каналов между source и target.
Создание словаря с индексами source
Генерация цветов для source
Цвета выберем в цветовой модели RGBA. Это необходимо, чтобы сделать каналы source-target более прозрачными, по отношению к блокам для лучшей читаемости схемы.
Цвет будем генерировать для каждого уникального источника. Для этого создадим еще один словарь, в котором будут храниться соответствия source:color. По личному субъективному мнению, автоматически сгенерированные цвета не очень нравятся. Поэтому потратив немного времени выбрал те цвета, которые интереснее выглядят на белом фоне. Их можно загрузить, указав в функции colors_for_sources значение mode=’custom’ (‘random’ для случайной генерации цвета).
Функция случайной генерации цветов
Создаем словарь с данными
Диаграмму будем отрисовывать с помощью Plotly. Для корректной (и более полной) отрисовки нужны следующие данные:
Следующие 2 функции помогут создать словарь этих списков:
Расчет количества уникальных пользователей в процентах
После подготовки данных приступим к созданию объекта диаграммы. Сохраним его в отдельную переменную senkey_diagram для дальнейшего сохранения или публикации:
Создание объекта диаграммы
Чтобы ее отобразить нужно выполнить:
Приведу фрагмент полученной диаграммы:
Что с этим делать?
Сохранение в html
Диаграмма, в зависимости от количества выбранных шагов, может получиться довольно большой. Для удобства анализа можно сохранить ее в html, а затем открыть в любом браузере. Так будет удобнее скроллить.
Сохранение диаграммы в html
Задайте любое имя html файлу. При использовании auto_open диаграмма автоматически откроется в браузере по умолчанию.
Публикация в Plotly Chart Studio
Можно опубликовать полученную диаграмму в Plotly Chart Studio для онлайн доступа с любых устройств. Для этого нужно зарегистрировать бесплатный аккаунт. После этого выполнить следующую настройку (более подробные действия описаны здесь):
Предварительная настройка chart_studio
После настройки загрузите вашу диаграмму:
Загрузка диаграммы в chart_studio
Ссылка, приведённая в начале статьи, сгенерирована именно этим способом.
Заключение
На иллюстрации показана диаграмма Сэнки, которая представляет всю первичную энергию, поступающую на завод. Ширина полос линейно пропорциональна производству, использованию и потерям энергии. Входы первичной энергии указаны в левой части диаграммы и разделены на газ, электроэнергию и уголь / нефть.
Диаграммы Санки подчеркивают основные переводы или потоки в системе. Они помогают определить наиболее важные составляющие потока. Они часто показывают сохраняемые количества в пределах определенных границ системы.
СОДЕРЖАНИЕ
История
Со временем она стала стандартной моделью, используемой в науке и технике для представления теплового баланса, потоков энергии, материальных потоков, а с 1990-х годов эта визуальная модель используется для оценки жизненного цикла продуктов.
Наука
Диаграммы Санки часто используются в областях науки, особенно в физике. Они используются для представления энергозатрат, полезного выхода и потраченного впустую.
Активные примеры
Управление энергетической информации США (EIA) ежегодно составляет множество диаграмм Санки в своем Ежегодном энергетическом обзоре, которые иллюстрируют производство и потребление различных форм энергии.
Ливерморская лаборатория Министерства энергетики США поддерживает сайт диаграмм Сэнки, включая потоки энергии в США и поток углерода.
Бен Шмидт, доцент истории Северо-Восточного университета, создал диаграмму Санки, связывающую специальности в колледже с возможной карьерой.
Знакомьтесь: диаграммы Сэнкей / Sankey
Периодически в руки попадают инфографические работы, на которых изоражены линии, объединяющие в себе две характерные черты: линиями показаны взаимосвязи объектов, а ширина линии — сила этой связи. Примеры таких работ уже публиковались уже публиковались раньше у нас на сайте:
Решили покопаться в истории вопроса, и вот что нашли. Как оказалось, подобный тип диаграмм, как оказалось, имеют свое специфическое название «Санкей / Sankey», и имеет занимательную историю. Оно происходит от имени Мэтью Сэнкея, ирландского инженера 19 века. Некоторые источники считают его первым, кто применил подобный визуализационный метод: в сноске к материалам одной из встреч Института Инженеров Механики Ирландии, он набросал схему сравнения имеющегося в то время парового двигателя с неким идеальным двигателем без энергопотерь, над созданием которого (не очень успешно) трудились в то время.
Мне все же кажется, что известного «Наполеона» (см. мой пост «Армия Наполеона в России») тоже можно отнести к сэнкейным диаграммам. Чарльз Джозеф Минард нарисовал её в 1869 году, так что он вполне может спорить с Мэтью за пальму первенства. Впрочем, это не меняет сути.
Наполеон в России 1812-13 гг. Charles Joseph Minard инфографика
На мой взгляд, подобный тип диаграмм далеко не всегда применим, да и не так просто спроектировать — но его визуальная сила стоит сотен пай-чартов. Хотя для «одноразово-данновых» иллюстрационных постеров — вообще находка.
Некий юзер Phineas поддерживает сайт, посвящённый мистеру Сэнкею и диаграммам этого типа, он собирает интересные сэнкей-работы. Кстати, «технарям» будет интересно посмотреть раздел с програмным обеспечением для создания Sankey диаграмм.