Задачка, которая сломала 5 датавиз-инструментов
Или как я тестировала инструменты визуализации данных в поиске оптимального для передачи инсайтов.
У нас в датавиз-сообществе часто пишут и говорят о сравнении инструментов для визуализации данных, о том как много всего они умеют, я же хочу рассказать о другом.
Мне тут потребовалось сделать одну историю на основе данных для студентов, и хорошо бы они ее тут же смогли повторить в некоем простом инструменте у себя на ноутбуке.
Я начала сомневаться, в каком инструменте ее лучше будет показать. И начала перебирать варианты.
Казалось бы, задачка супер простая! Но нет. У каждого хорошего инструмента есть ограничения, которые, как выяснилось, просто не позволяют ее решить!
Я расскажу обо всех своих мытарствах по порядку, а заодно покажу, как построить диаграмму в этих инструментах (в учебные проекты этот кейс все равно не пойдет, мне дороги нервные клетки своих учеников).
Итак, дано
Тестовый набор данных (сгенеренный ChatGPT) об эффективности сотрудников и о том, как эта эффективность падает в зависимости от срока работы в компании.
Имеем информацию об отделе, эффективности, длительности работы, количестве отгулов, о рабочих часах нескольких сотрудников.
Чтобы увидеть проблемы с эффективностью нам нужно показать взаимосвязь между двумя числовыми переменными. Легко! Скаттерплот (он же график рассеяния) нам решит эту задачку на раз-два!
Но! Нам нужно не просто построить диаграмму, но и оформить ее таким образом, чтобы вывод был ясен. Вот с этим у нас и возникнут проблемы…
И так!
Заказываем рукава и прыгаем в первый попавшийся инструмент, что может пойти не так?
1. Тестируем DataWrapper
Мне очень нравится эта программа. Работает онлайн, регистрация простая, бесплатно, дает тебе интерактивный график, на который можно дать прямую ссылку и кому-то показать, а можно скачать картинкой.
К тому же DataWrapper сам приглядывает за стилем, цветом и шрифтами, и все у него уже по умолчанию неплохо оформлено. Даже с заголовками и аннотациями мучаться не надо много — заполни сбоку поля, программа все сделает по красоте. Но, как выяснилось, в тонкие настройки этот парень не умеет…
Но пойдем по порядку.
1.1 Загружаем данные
Тут все очень просто и удобно: можете вставить копированием, можете загрузить любой популярный формат или подключить к онлайн-таблице. Конфетка!… К сожалению, программа не умеет агрегировать, то есть надо ему давать уже готовые точки данных, сам он складывать ничего не будет (ну насколько я знаю, если кто-то умеет — подскажите мне это хитрое колдунство).
загрузка данных в DataWrapper
1.2. Проверяем и описываем
Тут мы уточняем, что все переменные нужного типа и при желании можем транспонировать данные. Но самое полезное на этом этапе — мы можем переименовать названия столбцов, если названия у них технические или, как в моем примере, на английском.
Проверка данных в DataWrapper
1.3. Визуализация
И вот самый вкусный этап! Пробуем наконец собрать нашу диаграмму рассеивания. Выбираем ее в списке и!… Программа шалит и показывает нам ариал-чарт. Что ж, это не страшно, идем в пункт Refine — именно в нем будем настраивать график.
Визуализация данных в DataWrapper
Вот, тут мы должны выбрать какая переменная будет отвечать за какую ось, и уже получим что-то вполне себе похожее на скаттерплот (диаграмму рассеяния).
Визуализация данных в DataWrapper
Теперь добавим переменную отдела — в цвет. Позже я отказалась от этого, потому что это мешало воспринимать информацию. Мне хотелось добавить данные по отделам — потому что в отделах разная ситуация, и это часть выводов на этих данных. Но для этого мне нужно получить 4 таких графика, а за один раз DataWrapper не может мне такое дать.
А четырежды заливать данные, обрабатывать их отдельно, а потом собирать в другом продукте… не вариант.
Настройка визуализации в DataWrapper
Вот наша пестрая заготовка готова — и самое ценное — это конечно же линия тренда! Она как раз и дает возможность понять, что с эффективностью что-то не так. До этого мы лишь могли догадываться о проблеме. Теперь мы ее четко видим.
1.4. Добавляем тексты
И вот мы уже способны донести какие-то выводы с помощью этого графика. Как видите, в разделе Annotate можно написать заголовок, некоторые выводы, примечания, указать ссылку на данные — что очень круто для диаграммы в общем доступе (но для примера я делать этого не буду).
Оформляем график текстом в DataWrapper
1.5. Результат
Результат решения задачки в DataWrapper
Что не устроило:
Нет разделения на несколько графиков
Нельзя красиво выделить цветом одну точку данных (можно некрасиво)
2. Тестируем Excel
Я считаю Excel самым демократичным датавиз-инструментом с невысоким порогом входа. Во-первых, он и так много у кого установлен, многие в нем работают. И на удивление, настройки диаграмм в нем тоже неплохие.
…Спойлер: до некоторых пределов.
DataWrapper, конечно, неплох, но мне все покоя не давала идея разложить данные на 4 графика. Так что время нырять в настройки продукта от MS!
2.1 Делаем график
Так как данные у меня уже были в екселе, никуда импортировать их не нужно — как удобно! Я все больше надеюсь на этот вариант! И вот, упростив таблицу, выбрав в разделе Insert (Вставка) нужный мне тип диаграммы, я получаю график.
Выбираем данные и тип визуализации в Excel
2.2. Оформление графика
Мне нужно как-то показать, что на графике падает эффективность. Но по этой диаграмме не очень понятно — падает ли что-то вообще куда-то. Гуглю, как добавить линию тренда, и легко добавляю ее через плюсик в оформлении графика.
Добавляем линию тренда в Excel
В целом, получается симпатично. Но помня про желание получить несколько графиков, начинаю копаться, как это попроще тут сделать.
2.3. График на сводных таблицах
Поняв, что мне нужно как-то взаимодействовать с данными, чтобы увидеть эти 4 графика (можно конечно сделать отдельные 4 таблицы, но так себе автоматизация), я думаю применить сводные таблицы и графики на их основе. Не самый удобный инструмент, но все же умеет многое.
Что ж. Не судьба, сделав сводную таблицу и попытавшись вставить график или через Insert или через PivotChart — я натыкаюсь на отказ екселя со мной работать.
Побившись немного головой о стену, пробуя через фильтрацию обычной таблицы получить четыре графика или как-то иначе обойти проблемы, я бросаю это дело… Печально. Может быть, кто-то знает, как тут лучше настроить? Или это действительно ограничение системы?
Проблемы с графиком на сводных таблицах в Excel
Что ж, разделить на отделы у меня не получилось в Excel, хотя в остальном инструмент неплохо настраивается, в нем даже можно оформить график и аннотации и сделать цветовое выделение (даже в DataWrapper с этим все не очень хорошо). Но увы, конкретно с диаграммой рассеивания какие-то проблемы.
Что не устроило:
3. Тестируем Power BI
Тоже люблю этот Business Intelligence инструмент, в нем можно сделать отличные дашборды и у него довольно удобный интерфейс, он бесплатен до некоторых пределов, а также прекрасно умеет ворочать данными! Ммм!
Так что, конечно же я решила попробовать сделать что-то и на нем. Правда, сразу скажу, я не особо надеялась на успех, потому что хоть пример может получиться и неплохим — в Power BI довольно достойная настройка графиков —, но у моих учеников на ноутбуке точно его не будет. А установка такого тяжелого серьезного софта — дело непростое, к тому же он не работает на Mac — грустно да?
Но во мне уже взыграл азарт, так что тестируем и его!
3.1. Делаем графики
Power BI интерфейс не сильно отличается от екселя, залить чистые данные в него довольно просто (кнопка Excel в главном меню вам в помощь), а дальше получаем список переменных справа и с помощью блока Visualizations работаем с графиками.
У Power BI есть и русская версия, к слову.
Итак, выбираем скаттерплот, выбираем нужные переменные, X, Y и отделы в Legend! Красота! Еще я могу добавить например отгулы в размер кружка, но мне это так и не пригодилось. Так что в финальной версии стоит это все убрать.
Визуализация в Power BI
Красота! Все есть, я уже практически открываю шампанское.
Ибо разделить на 4 графика эту визуализацию в Power BI довольно просто — копируем график 4 раза и в фильтрации каждого указываем нужный отдел. И разместить на листе их можно как угодно, чтобы потом сформировать симпатичный отчет.
Посмотрите, какая красота получается. Цвета больше не представляют собой мешанину, и мы наконец-то видим 2-й инсайт — не все отделы страдают одинаково! Отдел инновации не подвержен разрушительному влиянию времени.
Группа графиков в Power BI
3.2. Аналитика
Остался один небольшой штрих. Я конечно же вижу, что в трех из четырех этих графиков есть некоторый тренд на падение эффективности, но здорово бы было его подчеркнуть.
И тут мы ударяемся лбом в стену, потому что именно для скаттерплота в Power BI нет линии тренда! Есть разные другие замечательные линии — константы, средние и прочие, но не то, что мне нужно. В Power BI тренд есть, судя по всему, только для временных рядов. Увы, поплакали, собрались, идем дальше!
Отсутствие линии тренда для данного типа диаграмм в Power BI
3.3. Добавляем тексты
И все-таки инструмент для презентации выводов тоже хороший. В нем чуть меньше контроля над графикой, чем в Екселе, но зато намного больше возможности фильтрации, да и данными проще ворочать.
Так что я все же оформила этот пример в почти законченную версию, добавила несколько текстовых выкладок.
Если бы были тренды нормальные — то могло бы выглядеть как-то так.
Итоговый отчет в Power BI
В итоге отмечу минусами:
Отсутствие аналитики (нет инструмента Trend Line для диаграммы рассеяния)
Нет настройки отдельных точек данных
4. Тестируем Tableau
Как только проблемы с Power BI, куда мы идем? Правильно, в другой BI инструмент, в его верного конкурента Tableau! Я уже давно забыла о студентах и низком пороге вхождения, теперь это дело чести!
На самом деле, порог вхождения в эти пакеты не такой и высокий, но все же требует времени на установку софта, поэтому для учебных целей конечно хороши Ексель — который есть у всех, Google Sheets и онлайн инструменты.
Но я знаю, что Tableau точно умеет в тренд-лайнс, так что смело загружаю туда набор данных! Понеслись!
4.1. Загружаем данные
Загрузка данных в Tableau из екселя тоже довольно простая, если у вас плоская узкая таблица без всяких проблем с форматами — то все будет готово сразу. Будьте осторожны с датами — они по умолчанию могут быть в американском формате (M/D/Y), даже если у вас в ексель все хорошо было настроено.
На этом этапе мы так же можем сделать что-то простое с данными — переименовать столбцы, сделать небольшой пивот, проверить формат. Пока все прилично, а дат у меня тут нет.
Загрузка данных в Tableau
4.2. Визуализация
Диаграмму рассеяния сделать довольно просто — берете переменные из списка слева и помещаете в строки Columns и Rows — и ваши переменные станут Y и X осями соответственно. В нашем случае это Стаж и Эффективность.
По умолчанию ваши данные будут агрегированы (появляется значок SUM перед ними), нам это никак не мешает, потому что у нас уникальные точки данных — неважно, усредняем ли мы их или складываем.
Строим график в Tableau
Следующий шаг — добавить уровень детализации — тогда вместо 1 большой точки мы получим по точке на каждого сотрудника — для этого фамилию сотрудника я кидаю в раздел Mark — Details.
Вот теперь мы видим уже что-то максимально похожее на диаграмму рассеивания.
Получаем диаграмму рассеяния в Tableau
4.3. Аналитика
Прекрасно! Еще пара трюков — я заменю колечки на кружочки в разделе Marks поменяв Automatic на Circles, добавлю количество отгулов в размер кружочка (Size в разделе Marks) и скорее в раздел Analytics, чтобы получить вожделенную линию тренда!
Отлично. Она тут есть.
Возможность добавить линию тренда в Tableau
Еще классный момент в Tableau, что при наведении мышкой на линию тренда, мы можем увидеть значение P-value, которое важно нам, если мы хотим понять, насколько полученные выводы достоверны.
P-value при наведении мышкой на линию тренда в Tableau
4.4. Группа графиков
Теперь я сделаю наконец то, что я так давно хотела — покажу тренды на разных графиках для каждого отдела.
И вроде бы я получила то, что требуется. Но мне не очень понравились склеенные графики по горизонтали. Я добавила цвета и прозрачности кругам, но все еще не была довольна результатом.
От одной мысли о необходимости бесконечно настраивать линии сетки и отступы между диаграммами у меня сводило скулы. А еще мудрить с служебными полями, чтобы поставить графики в сетку 2×2.
Люблю Tableau, но форматирование линий там просто жесть.
Группа графиков в Tableau
Так что поняв, что возможность работать тут с группой графиков есть, но мне она не очень нравится, я решила пока что сделать картинку с текстами и аннотациями для всех данных без разделения на отделы.
Хорошим плюсом Tableau является то, что можно добавлять метки аннотаций около точек данных — вы можете видеть это на примере ниже.
Итоговый дашборд с графиком в Tableau
Но я уже не старалась оформлять этот плакат, так как мне хотелось более гибкого управления отдельными графиками отделов. Tableau дает возможность реализовать мои пожелания, но мне не хотелось тратить на это время, которое необходимо для этого.
Запишу в минусы:
5.1. Тестируем RAWGraphs + Figma
Что ж, этот эксперимент давно вышел за рамки тестового задания для студентов. И большая часть из инструментов выше решило задачку в том или ином виде. Мне не хватало гибкости, так что я решила — хочется гибкости — надо идти на нижний уровень детализации — в векторную графику!
Прекрасный и невероятный RAWGraphs — дает возможность собрать по шаблону сложную диаграмму, скачать ее в SVG формате, а потом обрабатывать эти примитивы в любом векторном редакторе! Волшебно же? Я использую эту связку для создания дата-арт проектов, потому что за всей красотой в таких проектах все равно скрываются данные и четкий макет там довольно важное условие.
RAWGraphs — как и DataWrapper — бесплатный и браузерный инструмент, поэтому принцип работы у них похож.
5.1. Загружаем данные
После стартовой страницы попадаем на длинный лист, где сверху вниз мы заполняем нужные параметры — сначала мы можем просто скопировать и вставить свои данные в окошко, или залить их в одном из популярных форматов! Но не во всех.
You can load tabular (TSV, CSV, DSV) or JSON data.
Так что мне пришлось преобразовывать мой ексель в CSV, благо, это делается, а несколько секунд. Дальше проверяем, корректно ли форматы воспринимаются программой и мотаем ниже.
Загрузка данных в RAWGraphs
5.2. Выбор визуализации
Далее нас встречает довольно просторный список сложных диаграмм, которые мы можем попробовать собрать на наших данных. «Попробовать» — потому что для некоторых диаграмм нужен очень непростой формат данных и определенное количество переменных определенного типа.
Но мне некогда отвлекаться на вкусные Бамп-чарты и симпатичные хордовые диаграммы, я выбираю Скаттерплот! Здесь он скрывается под именем Бабл-чарт (пузырьковая диаграмма) так называется усложненная версия скаттерплота, когда размер круга тоже кодирует какую-то переменную. Не во всех программных пакетах эти два типа диаграмм разделяются.
Выбор типа диаграмм в RAWGraphs
5.3. Назначение переменных
Самый непростой этап работы в этой программе — если RAWGraphs немного не понравится формат вашей переменной, он откажется с ней работать. Уходите.
Но у меня довольно простая ситуация, так что я легко ставлю свои 3 основные и 1 дополнительную (отгулы) переменные в соответствующие окошки. И заметьте — тут сразу есть раздел Series, который поможет мне разделить графики по разным отделам!
Добавляю подписи с фамилиями сотрудников (чтобы проверить потом данные, если что). Тут же можно добавить отображение все необходимых меток данных. Но мне это не требуется.
Назначение переменных в RAWGraphs
5.4. Визуализация
Идем дальше — вот он час Х, промотав немного ниже мы видим сразу полученный результат!
Страшный, как смертный грех!
Где-то за кадром в обморок падает гламурный DataWrapper.
Зато графики расположены приятно — не вплотную, с удобными расстояниями.
Получаем визуализацию группы графиков в RAWGraphs
В этом окошке слева мы можем немного все улучшить, настроить цвета, оси, немного привести все в божеский вид… Но делать этого мы не будем. Потому что вместо этого пойдем в самый низ экрана и одной кнопкой экспортируем эту «рыбу» в SVG формат, чтобы потом допилить в прекрасном векторном редакторе (бесплатном и онлайн) Figma!
5.5. Доделка в Figma
Здесь мы можем менять цвета объектов, добавлять сложные элементы дизайна и работать с вектором почти как в Adobe Illustrator.
Поместить туда файл мы можем просто мышкой — Drag&Drop. Получаем вот такую красоту.
Импортируем графики в Figma
Теперь мы будем это все разгруппировываем множество раз, удаляем подложку, меняем шрифты на приличные (Inter например), делаем оси не такие черные и переименовываем их названия. Удаляем фамилии, которые совершенно напрасно я сюда добавила.
Ставим белую подложку и вставляем уже знакомые нам тексты.
Выглядит довольно симпатично, несмотря на довольно плохой исходник, это все делается довольно быстро.
Но тут мы хватаемся за сердце! Линии тренда! В RAWGraphs их нет!
Все напрасно. Несмотря на прекрасную тонкую настройку, полную свободу работы с формами и прототипом, мы падаем прямо у финиша.
Увы-увы…
Макет в Figma уже почти готов
Конечно, я уже смирилась, что ни один инструмент в полной мере не справится с этой задачкой (а если и справится, то будет стоить мне много времени и нервных клеток — как Excel и Tableau).
Поэтому я пошла на крайние меры — взяла графики из Tableau, сделала их подложкой к этим графикам и срисовала оттуда линии трендов, подогнав масштаб диаграмм. Это было немного унизительно, но я справилась.
Потому что мне хотелось бы уже получить хоть что-то готовое после всех этих мытарств!
Итоговый макет, где есть линии тренда
Вот посмотрите на итоговый результат, дитя трех инструментов по визуализации данных.
Кстати, заметьте, что размеры кругов нам тут не особо нужны, и я нигде не рассказываю, что они означают, так что нужно либо добавить легенду, либо сделать все кружки одинаковыми. Учитывая, что для этого нужно возвращаться в RAWGraphs или рисовать легенду от руки — пойти я на это в рамках этого эксперимента конечно же не могу.
Также я убрала в итоге цвет отделов, поняв, что цвет мне тут нужен для выделения важных моментов — аномального отдела и проблемных мест.
Так что все кружочки стали серыми. Это между прочем очень классный прием, всем его рекомендую. Сперва обесцветить диаграмму до оттенков серого, а потом добавить один акцентный цвет.
6. Финал битвы инструментов
Что ж, давайте подведем итоги.
Все эти инструменты прекрасны, и я очень люблю с ними работать, но к сожалению, решить легко и быстро эту задачку не смог ни один из них.
И все же отмечу плюсы и минусы каждого инструмента, как я их вижу:
DataWrapper — красивый и удобный, для небольших историй на графиках, но вы не сможете настроить ваши графики сверх необходимого минимума, который система сделает за вас. Но чертовски хорошо сделает! С данными вам правда не поможет. Бесплатный, браузерный, умеет в интерактив.
Excel — все его знают, все его любят и ненавидят, у него широкий функционал по работе с данными и визуализациями. Правда, вы можете столкнуться с ограничениями тут и там. Но зато там можно настраивать цвет и стиль каждой отдельной фигуры! Почти как в Figma. Так что не сбрасывем этого парня с корабля, просто учитываем, что со скаттер потом ему что-то не свезло. Минус — ексель стоит денег, но зато почти у всех он есть на работе.
Power BI — вообще во всем хорош и всем на зависть, еще удобнее с визуализациями, чем дедушка Ексель, еще удобнее с данными и сильтфраицей! Но где же он потерял линию тренда, я так до сих пор понять и не могу… Тоже считаю это мелкой особенностью, не выбрасывая этот прекрасный инструмент из своего арсенала. Хотя точная настройка элементов тут трудновата. С выделением отдельных столбцов и точек данных могут быть проблемы. Решаемые, но не всегда. Есть бесплатная версия!
Tableau — очень хороший продукт с тонкой настройкой всего на свете. Ограничен в работе с данными, есть бесплатная версия, которая недавно научилась сохранять файлы на компьютер (что прекрасно!), но вот банально картинку сохранить почему-то не может. И про минусы тонких настроек я писала выше — когда нужно компоновать графики друг с другом — он немного громоздкий. Хотя я все еще верю, что в нем можно решить мою задачу. Просто. Не сегодня… и не завтра…
RAWGraphs бесплатный, онлайн и очень простой. Высокие требования к формату данных, выдает вам прототип сложной диаграммы, а дальше делайте с ней что хотите. Подвел меня отсутствием аналитических средств. Увы. Зато потом какую красоту можно с этим прототипом в Figma делать! Все дата-артисты и дата-журналисты любят и ценят этот продукт.
На самом деле все страдания длились буквально один вечер, а статью я написала за вечер следующего дня, так как была полна эмоций!…
Надеюсь, этот текст будет полезен тем, кто работает с визуализацией данных.
Я рассмотрела тут не все инструменты, а только те, которыми я часто пользуюсь. Всего датавиз инструментов несколько десятков!
Еще, например, многие языки программирования могут неплохо в быстрые графики. Но поверьте, там своих проблем хватает и есть серьезные проблемы со сторителлингом и форматированием. Кому хочется попробовать решить эту задачку в своем инструменте — прикладываю ссылку на источник данных! Кидайте в комменты ваши версии, и пишите, с какими проблемами вы столкнулись.
А если вы научите меня, как решать проблемы в Excel или Power BI — которые помешали мне доделать их примеры — буду отдельно признательна!
Всем спасибо за внимание, если вас также как меня трогает тема визуализации данных и необходимость преподносить с их помощью некоторые выводы — я веду канал по этой теме — Chatting Charts, буду рада видеть.
Спасибо что дочитали!
