На Data-Daily уже писали о возможностях расширенной визуализации в Qlik Sense, поэтому я решил продолжить свои эксперименты по изучению новых типов визуализации в сенсе и применению расширений. Сегодня расскажу вам о диаграмме Sankey – что это такое, где и зачем нужна такая визуализация и, как ее создать при помощи расширений Qlik Sense.

Диаграмма Sankey: Что это такое?

Начнем погружение в историю вопроса. Многие из интернет-маркетологов ежедневно видят эту диаграмму в Google Analytics, анализируя поток посетителей и источники трафика, но, вот, каковы истоки рождения этой диаграммы задумывается далеко не каждый. Итак, небольшой экскурс.

Название у диаграммы несколько странное, не находите? Берет она свое начало от имени Мэтью Сэнкея, одного ирландского инженера 19 века – именно он первым применил такую визуализацию, чтобы показать распределение энергии в двигателе и усовершествовать его.

Диаграмма Sankey относится к классу диаграмм процесса и показывает ключевые шаги процесса и интенсивность его протекания на каждом из участков в виде соединяющихся и разветвляющихся линий разной толщины (в зависимости от величины параметра).

Диаграмма Sankey: Где и зачем нужна?

Где обычно эта диаграмма применяется? Sankey традиционно используется для отображения движения потока: например, процесс передачи тепла от ТЭЦ к бойлерной станции, включая его потери по различным причинам. Кроме того, эта диаграмма может применяться и для анализа пропускной способности нефтепровода, нагрузки сети и, конечно, движения денежных средств, если речь идет о наличии нескольких источников дохода.

Итак, когда хотим показать движение потока (энергии или денег) в виде сети узлов, то смело можем использовать диаграмму Sankey.

Qlik Sense Sankey Diagram

Диаграмма Sankey: Преимущества использования

Давайте рассмотрим таблицу распределения денежных вознаграждений по департаментам компании в разрезе городов:

Qlik Sense Sankey Diagram

Таблица привычна и хорошо отображает распределение зарплат между территориями и департаментами, НО диаграмма Sankey в этом случае сработает намного лучше. Смотрите сами:

Qlik Sense Sankey Diagram

Диаграмма Sankey в Qlik Sense

Итак, наконец-то, краткая инструкция по созданию диаграммы Sankey в Qlik Sense.

Если мы представим, что наша диаграмма состоит из связей и узлов, то …

Qlik Sense Sankey Diagram

получим вот такую диаграмму.

Здесь файл JSON может быть представлен таким образом:

В примере описано только 6 узлов, чтобы дать понятное описание структуры данных.

‘Source’ и цифры отсылают к числу узлов. Так, “source”:1, “target”:2 означает, что ссылка от точки один идет в точку два. D3 идентифицирует положение узла не по номеру, а по расположению в области представления данных.

Описание кода

Основная задача при создании нашей диаграммы – правильно структурировать данные.

Здесь подробно опишу CSS и JavaScript.

Перед тем как перейти к JavaScript, вернемся d3.js. Добавляем дополнительной фунциональности при помощи такой строчки:

<script src=»js/sankey.js»></script>

Наш JavaScript начинается с определения числа переменных.

Определяем их как ‘Widgets’ (var units = «Widgets»;).

Определяем число переменных на диаграмме

Далее определяем путь переменной как точки на диаграмме.

var path = sankey.link();

Загружаем данные из нашего файла

d3.json(«data/sankey-formatted.json», function(error, graph) {

Вот наши данные:

На выходе у нас получится вот такая диаграмма.

Qlik Sense Sankey Diagram
И, напоследок, некоторые полезные инструменты:

Вся документация и код расширения диаграммы Sankey https://github.com/Parkman328/SenseSankey

Делитесь собственным опытом применения и разработки диаграммы Sankey.