Визуализируем кофе, молоко и сахар!

Датавиз-сообщество дискутирует

Natalia Kiseleva
9 min readOct 4, 2021
скетч от Натальи Киселевой (eolay)

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

Улучшать визуализации — дело хорошее и интересное. Люблю смотреть на этот процесс, в каналах и книгах по датавизу можно увидеть много подобного контента. А также в конкурсах, где предлагается улучшить представление данных. Например, в #makeovermonday.

В этот раз предметом жаркого обсуждения стала статья Максима Ильяхова, добытая Алексеем Смагиным (в телеграме: BlackPineapple), где приводится гипотетический датасет о любителях кофе. В статье на основании датасета делаются два графика, которые сравниваются по эффективности.

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

Вот первый “ошибочный” график, и второй — “улучшенный” (где взяты проценты от общего числа гипотетических респондентов) .

Ошибочный (слева) и улучшенный (справа) графики из статьи Максима Ильяхова: https://visual-storytelling.ru/all/nixelpixel/

Но визуализаторы не были бы визуализаторами, если бы не попытались улучшить полученное итоговое представление.

Что из этого вышло:

Kyrill heifez с Алексеем Смагиным считают, что у второго графика просто больше информационная нагрузка, но и усложнен посыл, что кофе с молоком легче пить без сахара.

Павел Шорох добавляет, что тут нужно идти от цели. Если задача показать, что те кто пьют черный кофе предпочитают не использовать сахар, то верен первый вариант визуализации (обычно используют простые сгруппированные столбики). Если же хочется сфокусировать внимание на том, сколько всего людей пьют кофе с сахаром, а сколько — нет, то нужно убрать деление на черный и с молоком.

Alexey 🇷🇺 MrBinnary начинает конкурс на корректировки с рубрики «пофиксил за 7 секунд», разорвав ось Х на две части и отделив ось Y от графика, чем тут же собирает восхищение коллег и баламутит их желание подобрать другие варианты визуализации этого датасета.

Вариант кофейного графика от Alexey 🇷🇺 MrBinnary

Anton Mizinov добавляет, что в таком варианте и вертикальная ось слева не обязательна. А линии со значениями вообще можно превратить в накопительные столбцы.

Ну, и раз уж пробовать стэк (накопительную столбчатую диаграмму), то лучше делать горизонтально, а не вертикально — вносит свои пять копеек Александр Богачев. При таком расположении данных — подписи столбиков лучше читаются.

Алексей Смагин предлагает просто показать два бара (два столбика данных): “с молоком” и “без молока”.

Наталья Киселева предлагает пай-чарт (круговую диаграмму), хоть это и спорный элемент визуализации. В данном случае можно как показывать данные на двух разных пай-чартах, так и на одном. Набор данных небольшой — и это тот редкий случай, когда пай-чарт ведет себя прилично. Благо, размерность данных позволяет примерно сравнивать сектора на глаз, но о точном сравнении не идет и речи в случае применения пай-чарта. Александр Богачев же соглашается, что пай-чарты тут вполне подойдут. Позже мы к ним обязательно вернемся!

Еще один редизайн от Алексея Смагина отображает процент любителей сахара в группах любителей разного кофе (в первую версию графика закралась ошибка, он изменен).

Вариант кофейного графика от Алексея Смагина

Этот вариант вызывает крайнее одобрение коллег, но это же не повод останавливаться на пути к совершенству?

После устранения некоторой путаницы с числами Павел Шорох выражает главный инсайт этих данных: те кто пьют кофе с молоком — еще и сладкоежки. И наоборот.

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

Набросок кофейного графика от Натальи Киселевой

Так как главное — передача сообщения, Александр Богачев воплощает в жизнь такой вариант визуализации, оформив график и заголовком, и дополнительными аннотациями (в https://www.datawrapper.de/).

Вариант кофейного графика от Александра Богачева

Коллеги рукоплещут!

Но и это еще не финал, тут же Александр Богачев шутит, что нужно было бы нарисовать два бумажных стаканчика, один темный, другой светлый, и уровнем жидкости отметить сахар или его отсутствие. Или изобразить сахар кучками рядом со стаканами.

И окрас — напрашиваются цвета кофе и молочного кофе — добавляет Наталья Киселева.

А тем временем расцветают первые пай-чарты от Александра Богачева, но остаются сомнения: стоит ли подавать дурной пример применения этого типа визуализации. Но и тут все еще не видно доли любителей молочного кофе.

Вариант кофейного графика от Александра Богачева
Набросок варианта кофейного графика от Натальи Киселевой

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

Несмотря на отчаянные просьбы Павла Шороха остановиться, мы продолжаем, ибо ящик Пандоры открыт…

Алексей Смагин возвращается к теме пай-чартов, вспоминая вполне удачный эксперимент Нади Андриановой — где на пай-чарте были отображены данные похожей конфигурации. И конечно же, мы попробуем реализовать и эту идею чуть позже!

Удачный эксперимент с пай-чартом от Нади Андриановой

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

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

Наброски кофейных пай-чартов от Натальи Киселевой. Слева группировка по типу кофе, справа — попытка симметрии.

Повторить успех Андриановой Нади не удается — т.к. в данных не наблюдается такой же симметрии, есть большой перекос в сторону любителей сладкого кофе с молоком. Но и этот вариант приложен выше справа.

Но нам все еще трудно увидеть доли любителей сахара! И тут Роман Бунин приносит-таки долгожданную маримекко (выполненную в Tableau), чем наполняет теплом и радостью сердца коллег.

Вариант кофейной диаграммы в виде маримекко (и немного тримапа) от Романа Бунина

Artem Sheiko считает, что и представление в виде маримекко (тримапа) сбивает с толку, т.к. 100% располагается рядом с другими 100%. Он считает, что сложно делать какие-то выводы на основе этого представления, кроме того, что люди пьют разный кофе с сахаром или без. Вариант с осями решает эту проблему, но не показывает чисел на долях, что мешает точности отображения данных (этот вариант будет исполнен в конце).

Тогда как Anton Mizinov видит на этой диаграмме свой инсайт: блоки “Черный, без сахара” и “С молоком, без сахара” — примерно одинаковые по размеру, возможно, это одни и те же люди, которые не любят сахар.

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

Вариант кофейного графика от Александра Богачева, откорректированный Антоном Мизиновым

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

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

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

Вариант кофейного графика от Александра Богачева

Коллега Nick Star предлагает цвет сахарных точек сделать белым, чтобы стало еще больше похоже на сахар.

Ночь падает на страну, но обсуждения визуализаций не затихают и продолжаются даже в следующие дни. Добавляются новые варианты, например, композитное дерево от Artem Sheiko. Этот вид визуализации доступен в MS Power BI.

Вариант кофейного графика от Artem Sheiko — в виде композитного дерева

Варианты представления кофейного графика от Artem Sheiko в другом программном продукте (lucidchart) ниже. Тут композитное дерево совмещается с пиктограммным (вафельным) графиком.

Вариант кофейного графика от Artem Sheiko — в виде вафельной диаграммы с элементами композитного дерева

По мнению Нади Адриановой, композитное дерево, выполненное в Power BI, выглядит чище, чем вариант с пиктограммами.

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

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

Визуализация кофейных данных от Виталика Янушевского без цветов (слева) и с цветовым выделением (справа)

Коллеги в восторге от этого лаконичного исполнения, представляющего собой торжество здравого смысла!

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

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

Наталья Киселева не согласна, ведь визуализация — это представление данных в некоем удобном для восприятия виде. А данный вариант по сути — это таблица с форматированием (жирный шрифт, выравнивание) и сортировкой значений.

Порешили на том, что таблица — это тоже вид визуализации данных.

Виталий Балобанов высказывается, что композитное дерево еще куда не шло, но в сочетании с вафельной диаграммой просто вынос мозга. Пай-чарты — удачнее в разы, даже просто набор цифр удачнее в разы. Но пай-чарты занимают много места — высказывается Егор Ларин.

Чтобы обогатить текстовый вариант, Виталик Янушевский добавляет в него цветовые акценты — позволяющие легче группировать строки с сахаром. Этот вариант вы видите выше, на правой иллюстрации.

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

Статья уже дописана, а обсуждения и дебаты продолжаются!.. Вот еще несколько визуализаций, добавленных уже после написания статьи:

Слева маримекко с осью от Павла Шороха, в центре бар-чарт от Nick Star, справа бар-чарты в бар-чартах от Егора Ларина
Слева пиктограммы от Artem Sheiko, справа вафельная диаграмма от Юрия Тукачёва
Диаграмма Венна (слева) — идея Владимира Волохонского, финальный вариант Александра Богачева, диаграмма санкей (в центре) — идея Alexey 🇷🇺 MrBinnary, финальный вариант от Нади Андриановой, и нестандартный вариант визуализации (справа) — тоже от Нади Андриановой

Спасибо всем, кто принимал участие в обсуждении и помогал с редактурой статьи!

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

http://eolay.tilda.ws/

и в tg-канал:

Telegram, Twitter, Facebook

--

--

Natalia Kiseleva

I’m an engineer. Love dataviz, programming, and drawing comics! @eolay13