В этой статье я расскажу что такое радиальная ранговая диаграмма и как реализовать её в Tableau. По-английски она называется Radial Bump Bar Chart.

Для проекта #MakeoverMonday 2019 week 1 «NHL Attendance» я сделал визуализацию, отображающую посещение матчей НХЛ, на которой можно увидеть игры каких команд собрали больше зрителей, вся статистика собрана с сезона 2000-2001 года по 2017-18. Этот виз был выбран Tableau как ‘Visualization of the Day’. Сам датасет лежит здесь, и можно кликнуть на анимированный GIF снизу, чтобы перейти на саму визуализацию.

радиальная диаграмма

Следующая визуализация была выполнена для проекта #SportsVizSunday. На ней показаны результаты гран-при Формулы 1 сезона 2018 года с разбиением по трассам и пилотам. Тоже можно перейти на сам виз по клику.

1. Ранговые диаграммы

Что же такое радиальная ранговая диаграмма и как она работает?

Нужно отметить что визуализации выше — это первые визуализации такого типа на @tableaupublic, и они нестандартные.

Возможно раньше вы сталкивались с ранговыми диаграммами более известными как Bump Charts на английском. Такие диаграммы обычно показывают изменение каких-либо метрик с разбиением на категории по рангам (рейтингам) на некотором временном интервале.

В качестве примеров можно привести несколько визуализаций в Tableau:

  1. Matt Chambers. «Популярность цветов новых автомобилей в Северной Америке 2000-2015».

2. Ken Flerlage. «Рейтинг стран по ВВП 2000-2015» c описанием в блоге.

3. Rody Zakovich. «Кассовые сборы фильмов про Бэтмена» с описанием в блоге

4. Laine Caruzca «Рейтинг бейсбольных команд по победам с 2000 по 2017«. Эта работа вдохновила меня для визуализации посещения матчей НХЛ.

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

Сигмоиды

Сигмоида — это S — образная функция с двумя асимптотами по оси Y. При X стремящимся к +- бесконечности значение функции стремится к +1 или -1 (в случае на рисунке). Есть несколько видов сигмоидных функций, они обозначены кривыми разных цветов на рисунке. Далее мы будем использовать логистическую функцию вида y=1/(1+e^-x), которую часто понимают под сигмоидой.

2. Построение сигмоид в MS Excel

Данные для визуализации посещения матчей НХЛ выглядят так:

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

Это можно сделать в табло, как описал Rody Zakovich, автор одной из визуализаций из списка выше, в своем блоге. Либо можно все вычисления сделать до Tableau, мы сделаем это в MS Excel.

В данные в Excel были добавлены столбцы от -6 до 6 с шагом 0.5. В каждом столбце рассчитываются значения сигмоид при помощи функции VLOOKUP, которая находит следующий сезон и берет ранг этого сезона. Столбцы F,G,H и т.д. определяют каждую точку сигмоиды где X принимает значение от -6 до 6 c шагом 0.5, то есть, получаем 13 точек для каждой кривой. Названия столбцов — координаты X, а в самих ячейках рассчитываются координаты Y. Число 31 в вычислении — общее количество команд в сезоне.

13 точек для каждой сигмоиды достаточно в нашем визе, чтобы переходы не выглядели ступенчатыми. Интервал X от -6 до 6 объясняется тем, что на границах этого интервала сигмоида достаточно сильно приближается к асимптотам, чтобы этого не было заметно на нашей визуализации. Рисунок ниже поможет понять это лучше.

Сигмоида

Датасет с вычислениями лежит здесь

Следующий шаг — создание линейной ранговой диаграммы в Tableau

ранговая диаграмма в Tableau

1. Загружаем данные в Tableau и делаем Pivot для столбцов -6, -5.5 … 6.

2. Создаем вычисляемое поле XX, которое сдвигает каждую сигмоиду согласно номеру сезона НХЛ.

Parameter 1 здесь служит для изменения формы сигмоиды от крутой до более пологой.

Пропуск в данных на графике — это сезон 2004-2005, когда был объявлен локаут, и все игры НХЛ отменили.

Мы получили линейную ранговую диаграмму, в которой границы сигмоид определяют значения рейтинга команды в сезоне.

3. Делаем круговую диаграмму

В следующем шаге мы превратим линейную ранговую диаграмму в радиальную ранговую диаграмму. Для этого каждую тоску диаграммы повернем на некоторый угол, то есть, закрутим диаграмму относительно одной точки (она будет центром диаграммы). Сделаем вычисляемое поле Angle (угол), содержащее вычисление XX. В вычисление ниже есть константы, определяющие начальную позицию диаграммы и угол поворота каждой точки.

Не обращайте внимания на то, что в вычислении много констант (обычно я подгоняю так графики коэффициентами). На самом деле это функция имеет вид: ratio(xx)+constant где ratio — коэффициент, определяющий угол поворота, а constant определяет сдвиг позицию старта графиков. Ниже будет раздел «Как найти верные углы», где рассмотрим это подробнее.

Вычисляемые поля X и Y используют формулы поворота (обычный геометрический поворот):

Цифра 5 в формулах — это расстояние от центра до края ближайшей кривой, то есть, 5 определяет размер пустого пространства в центре диаграммы.

4. Как найти верные углы?

В воркбуке все углы рассчитаны для ненормализованных значений, то есть, я использую значения SIN и COS больших значений. Это пока сложно понять, поэтому поясню далее на примере.

Шаг 1. Нормализация линейного графика

В этом контексте нормализация означает что все точки графика находятся в диапазоне XX=(0;1). Соответственно мы можем изменить вычисление XX:

([Parameter 1]*FLOAT(RIGHT([Season],2))+ (6+[Pivot Field Names]) —[Parameter 1]/210

Parameter 1 = -12.28 в нашей визуализации, он сдвигает начало графика на начало координат по X, сейчас кривые начинаются с точки X=0. Число 210 в конце вычисления определяет степень сжатия диапазона графика, или, разделив выражение на 210 получим пределы от 0 до 1 для графика по оси X (см. рисунок внизу).

ранговая диаграмма

Мы получили нормализованный график!

Шаг 2. Расчет углов

В нашем случае радиальная ранговая диаграмма начинается с 0 и закручивается по часовой стрелке. Здесь нам не нужен сдвиг от нуля в вычислении, нужно только добавить коэффициент, определяющий угол. На следующей картинке этот коэффициент 90. Вы можете выбрать другое значение.

радиальная ранговая диаграмма

5. Завершение диаграммы

Для завершения диаграммы превращаем точки в кривые, создаем вычисление Season Rank и кидаем его в Path.

радиальная диаграмма в Tableau

Делаем вычисляемое поле Text, в которое добавляем название команд. Добавляем фильтры.

6. Делаем оси для диаграммы

Для осей, показанных на картинку снизу, нам нужны 3 вычисления: X axis, Y axis, Angle Axis.

радиальная ранговая диаграмма

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

Подобные радиальные графики достаточно часто используются Tableau Community, поэтому описывать весь процесс создания здесь не буду.

Заключение

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

радиальная ранговая диаграмма в Tableau

Далее добавляем фильтры и надписи как background, листы с графиками и осями совмещаем, сделав для каждого прозрачный фон. Получаем виз:

Я использовал такую же технику для визуализации «Formula 1. Results». Давайте оценим, насколько лучше смотрятся сигмоиды по сравнению с прямыми линиями в радиальной ранговой диаграмме.

радиальная ранговая диаграмма
Сигмоиды

радиальная ранговая диаграмма
Прямые

Мне больше нравится вариант с сигмоидами.

Дополнительно про визуализации данных Формулы 1 и создание трасс на картах Mapboх можно прочитать мою статью «Создание карт Mapbox GL JS и их использование в Tableau и Power BI«.

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

P.S. В статье я описал диаграммы для случаев рангов, хотя эти визы позволяют переключать диаграммы на абсолютные значения. Алгоритм для любых Measures при создании радиальных графиков с сигмоидными функциями такой же.