Опубликовал на днях в своём большом канале @data_csv исследование «Сетки» — о том, что нормально спрашивать на свиданиях и собесах.
Тема получилась острой и забавной — однако графики, на мой взгляд, воспринимать трудно.
Как можно было бы использовать цвета более эффективно?
Листайте карточки, чтобы узнать➡️
#разбор
Тема получилась острой и забавной — однако графики, на мой взгляд, воспринимать трудно.
Как можно было бы использовать цвета более эффективно?
Листайте карточки, чтобы узнать
#разбор
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤25🔥15❤🔥5🫡1
Нужно ли визуализировать большие цифры?
Полистал отчёт коллег из Яндекс Образования. В отчёте много цифр, почти каждую из которых на лендинге визуализируют в виде вафельной диаграммы. И это — интересный кейс, который хочется обсудить.
Почти каждый из графиков просто визуализирует количество — школьников, студентов, выпускников. Графики при этом не получится сравнить между собой: каждый из них сделан в своей размерности: где-то квадратик показывает одного человека, а где-то 100.
Помогают ли квадратики в данной ситуации как-то осмыслить число? Едва ли. Мы просто видим, что квадратиков много. И это единственное, что можно из такого графика считать.
Подобные визуализации обычно используют, чтобы впечатлить масштабом. Мол, мы выпустили так много людей, что вы будете три часа листать экран, чтобы увидеть всех наших выпускников. Кажется, что здесь такого эффекта тоже нет [да и не факт, что он нужен в таких отчётах — только позлит читателей].
Получается, что коммуникационной задачи, которую тут решали бы графики — просто нет. В лучшем случае они поддерживают композицию лендинга — но с этим можно было бы справиться и другими способами.
#разбор
Полистал отчёт коллег из Яндекс Образования. В отчёте много цифр, почти каждую из которых на лендинге визуализируют в виде вафельной диаграммы. И это — интересный кейс, который хочется обсудить.
Почти каждый из графиков просто визуализирует количество — школьников, студентов, выпускников. Графики при этом не получится сравнить между собой: каждый из них сделан в своей размерности: где-то квадратик показывает одного человека, а где-то 100.
Помогают ли квадратики в данной ситуации как-то осмыслить число? Едва ли. Мы просто видим, что квадратиков много. И это единственное, что можно из такого графика считать.
Подобные визуализации обычно используют, чтобы впечатлить масштабом. Мол, мы выпустили так много людей, что вы будете три часа листать экран, чтобы увидеть всех наших выпускников. Кажется, что здесь такого эффекта тоже нет [да и не факт, что он нужен в таких отчётах — только позлит читателей].
Получается, что коммуникационной задачи, которую тут решали бы графики — просто нет. В лучшем случае они поддерживают композицию лендинга — но с этим можно было бы справиться и другими способами.
#разбор
❤17👍10😁4🙏1
Отдельно ещё хочется рассмотреть такие вставки. Здесь коммуникационная задача уже понятнее: график должен наглядно показывать долю.
Но получается это, на мой взгляд, не очень эффективно, и беды тут две:
⭕️ Два контрастных цвета, которые сражаются за внимание
⭕️ Ритмичный паттерн, который отвлекает от сути цифр
Решить просто: во-первых, снизить контрастность «большинства» — сделать фиолетовые квадраты бледными или вообще серыми.
А ещё я бы попробовал заполнять «каждого пятого» хаотично, чтобы паттерн не гипнотизировал так сильно.
Долю, впрочем, можно визуализировать и без пары сотен квадратов — если совсем отказаться от них в проекте, можно подобрать что-то более наглядное.
#разбор
Но получается это, на мой взгляд, не очень эффективно, и беды тут две:
Решить просто: во-первых, снизить контрастность «большинства» — сделать фиолетовые квадраты бледными или вообще серыми.
А ещё я бы попробовал заполнять «каждого пятого» хаотично, чтобы паттерн не гипнотизировал так сильно.
Долю, впрочем, можно визуализировать и без пары сотен квадратов — если совсем отказаться от них в проекте, можно подобрать что-то более наглядное.
#разбор
Please open Telegram to view this post
VIEW IN TELEGRAM
❤23🙏9😁5🌚1💯1
Чиню кругосветку Тагира
#разбор
Мой коллега по телеграму и бывший коллега по Яндексу уволился с работы и теперь живёт свою лучшую жизнь — колесит по миру(возьми меня с собой, пожалуйста....) .
В своём канале Тагир выкладывает график трат, и в одном из наших диалогов я в шутку погрозился этот график прожарить. Тагир согласился. Пришлось обещание исполнять...
Исходный график Тагир сделал в Google Sheets. Стандартный инструментарий визуализации там очень скудный, а от графиков по умолчанию хочется плакать.
Что делает график непривлекательным:
⭕️ Много визуального шума. Числа с ободками. Числа, наезжающие друг на друга;
⭕️ Вертикальные и диагональные подписи;
⭕️ Слишком сложные числа. Нужны ли тысячные разряды? Нужно ли везде писать 2025 год?
⭕️ Значения слишком контрастные от дня ко дню — поэтому линейный график выглядит хаотично.
А как можно сделать иначе?⬇️
#разбор
Мой коллега по телеграму и бывший коллега по Яндексу уволился с работы и теперь живёт свою лучшую жизнь — колесит по миру
В своём канале Тагир выкладывает график трат, и в одном из наших диалогов я в шутку погрозился этот график прожарить. Тагир согласился. Пришлось обещание исполнять...
Исходный график Тагир сделал в Google Sheets. Стандартный инструментарий визуализации там очень скудный, а от графиков по умолчанию хочется плакать.
Что делает график непривлекательным:
А как можно сделать иначе?
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10🔥5🙏2👍1
Я решил не просто переделать график Тагира, а сделать его полностью в ChatGPT. В одном из последних обновлений там как раз появился режим, который позволяет «разворачивать» свои веб-приложения и делиться ссылками на них.
Ещё опытным путём я обнаружил, что простые приложения на React GPT сейчас дизайнит лучше, чем графики на d3. Поэтому решил попробовать именно реактовскую библиотеку для переделки.
Как вам результат?
Интерактивчик:
https://chatgpt.com/canvas/shared/68e7afc134fc81919efec54c47f748fb
Ещё опытным путём я обнаружил, что простые приложения на React GPT сейчас дизайнит лучше, чем графики на d3. Поэтому решил попробовать именно реактовскую библиотеку для переделки.
Как вам результат?
Интерактивчик:
https://chatgpt.com/canvas/shared/68e7afc134fc81919efec54c47f748fb
🔥29👍7🥰3🥱2
Мой специальный корреспондент передал фотографии свежего рейтинга Forbes с большим количеством инфографики.
Подход к визуализации данных… для 2025 года можно назвать по меньшей мере удивительным.
Некоторые решения просто выглядят спорно, некоторые — значительно затрудняют чтение информации.
А давайте попробуем разобраться, что не так этими графиками? Пишите в комментариях, какие ошибки совершили авторы при визуализации↘️
Подход к визуализации данных… для 2025 года можно назвать по меньшей мере удивительным.
Некоторые решения просто выглядят спорно, некоторые — значительно затрудняют чтение информации.
А давайте попробуем разобраться, что не так этими графиками? Пишите в комментариях, какие ошибки совершили авторы при визуализации
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
😱18😁12🤨8
Что я думаю про визуализации Forbes из предыдущего поста
1⃣ Трёмерные линейные графики.
Спорно, но допустимо. Меня слегка отталкивает дизайн: напоминает эксель нулевых — там как раз было в моде всё трёхмерное.
По настоящему меня напрягают только тени от Сбербанка к Роснефти и Газпрому. Не знаю, зачем их пытались сделать, но выглядит как грязь.
Искажает ли трёхмерность данные? Безусловно.
Критично ли это? Думаю, нет. Числа понятны, тренд читается, данные сами по себе очень простые. В комментариях Максим поделился 3D-эксприментами Bloomberg, которые, на мой взгляд, выглядят ещё и дико стильно.
Вообще это всё про баланс между точностью и «вау-эффектом». Поклонники Тафти должны меня уничтожить за такие высказывания, но я считаю, что не всегда при визуализации данных надо опираться только на точность и эффективность графиков. Но об этом надо написать отдельный пост)
2⃣ «Квадратики» отраслевой структуры.
А такое мы не одобряем. Здесь две важные проблемы:
a) Сравнения не работают. Данные даны за два года, однако визуально мы видим две примерно одинаковых группки, и разницу приходится вычислять буквально в ручном режиме, бегая глазами от одного квадрата к другому.
Если у вас в ходе визуализации получилось несколько очень похожих графиков — с вероятностью 90%, вид визуализации выбран неверно.
b) Нарушен принцип близости для подписей отраслей. Десятки отраслей вынесены в отдельную легенду, и каждый раз приходится совершать усилие, чтобы сопоставить цвет квадратика с его значением.
Если бы цвета было 4, это было бы терпимо. Но тут — перебор.
3⃣ Доля e-commerce и кусочки пайчарта
Снова «спорно» и «на грани», но в целом читаемо.
Пайчарты отвратительно подходят для сравнений, использовать их для визуализации динамики — это практически табу.
Но надо признать — данных немного, разница по годам читается, даже маркетплейсы можно сравнить нормально со всем e-commerce. Получается, график свою функцию выполняет?
Я бы никогда так не сделал, но и ругать такой выбор не буду.
#разбор
Спорно, но допустимо. Меня слегка отталкивает дизайн: напоминает эксель нулевых — там как раз было в моде всё трёхмерное.
По настоящему меня напрягают только тени от Сбербанка к Роснефти и Газпрому. Не знаю, зачем их пытались сделать, но выглядит как грязь.
Искажает ли трёхмерность данные? Безусловно.
Критично ли это? Думаю, нет. Числа понятны, тренд читается, данные сами по себе очень простые. В комментариях Максим поделился 3D-эксприментами Bloomberg, которые, на мой взгляд, выглядят ещё и дико стильно.
Вообще это всё про баланс между точностью и «вау-эффектом». Поклонники Тафти должны меня уничтожить за такие высказывания, но я считаю, что не всегда при визуализации данных надо опираться только на точность и эффективность графиков. Но об этом надо написать отдельный пост)
А такое мы не одобряем. Здесь две важные проблемы:
a) Сравнения не работают. Данные даны за два года, однако визуально мы видим две примерно одинаковых группки, и разницу приходится вычислять буквально в ручном режиме, бегая глазами от одного квадрата к другому.
Если у вас в ходе визуализации получилось несколько очень похожих графиков — с вероятностью 90%, вид визуализации выбран неверно.
b) Нарушен принцип близости для подписей отраслей. Десятки отраслей вынесены в отдельную легенду, и каждый раз приходится совершать усилие, чтобы сопоставить цвет квадратика с его значением.
Если бы цвета было 4, это было бы терпимо. Но тут — перебор.
Снова «спорно» и «на грани», но в целом читаемо.
Пайчарты отвратительно подходят для сравнений, использовать их для визуализации динамики — это практически табу.
Но надо признать — данных немного, разница по годам читается, даже маркетплейсы можно сравнить нормально со всем e-commerce. Получается, график свою функцию выполняет?
Я бы никогда так не сделал, но и ругать такой выбор не буду.
#разбор
Please open Telegram to view this post
VIEW IN TELEGRAM
5❤21💯7😁3
Media is too big
VIEW IN TELEGRAM
Самый эстетичный способ генерировать палитру цветов для графиков, который когда-либо мне попадался
Генерировать палитру можно прямо браузере, а можно — в вашем проекте в виде библиотеки
Лендинг пошагово проводит через возможности генератора, объясняя разные его функции
https://meodai.github.io/poline/
Генерировать палитру можно прямо браузере, а можно — в вашем проекте в виде библиотеки
Лендинг пошагово проводит через возможности генератора, объясняя разные его функции
https://meodai.github.io/poline/
❤17😍10⚡4
Линейный график нельзя делать без чисел
За последний месяц видел эту ошибку несколько раз. Дважды — в презентациях коллег, а теперь ещё и в материале «Бизнес-секректов».
Сила и одновременно слабость линейного графика — в том, что он может начинаться с какого угодно значения (да, не только с нуля!). Линейный график помогает нам видеть лишь направление тренда, но чаще всего мы не можем по одной лишь визуальной форме определить силу этого изменения.
Вот тут — с 2019 по 2024 — это какая разница? В 100 раз? В 2 раза? Или прирост совсем небольшой? Важно добавить этот контекст в виде чисел: на оси или хотя бы в виде пары подписанных точек.
В большинстве случаев графики без единого числа — это всегда плохая идея, даже если это столбики.
Могу представить несколько ситуаций, когда автор или заказчик просит сделать график без чисел:
🔗 Числа под NDA
🔗 Очень не хочется делать акцент на конкретных значениях. Важно не то, что компьютерные клубы заработали 300 млн, а что в 2024 году они заработали в 3, 5 или 10 раз больше, чем в 2019.
Но оба этих случая решаются процентами! Если это даты — можно в процентах от первой даты.
Можно ещё от среднего значения, от максимума, от суммы — когда это уместно. В общем, вариантов масса: надо подумать, зачем график вообще делали, и определиться, что за числа показывать.
Единственная ситуация, когда отсутствие значений в целом можно простить — это спарклайны (маленькие графики размером примерно как одна ячейка таблицы). Но и там можно что-то придумать.
За последний месяц видел эту ошибку несколько раз. Дважды — в презентациях коллег, а теперь ещё и в материале «Бизнес-секректов».
Сила и одновременно слабость линейного графика — в том, что он может начинаться с какого угодно значения (да, не только с нуля!). Линейный график помогает нам видеть лишь направление тренда, но чаще всего мы не можем по одной лишь визуальной форме определить силу этого изменения.
Вот тут — с 2019 по 2024 — это какая разница? В 100 раз? В 2 раза? Или прирост совсем небольшой? Важно добавить этот контекст в виде чисел: на оси или хотя бы в виде пары подписанных точек.
В большинстве случаев графики без единого числа — это всегда плохая идея, даже если это столбики.
Могу представить несколько ситуаций, когда автор или заказчик просит сделать график без чисел:
Но оба этих случая решаются процентами! Если это даты — можно в процентах от первой даты.
Можно ещё от среднего значения, от максимума, от суммы — когда это уместно. В общем, вариантов масса: надо подумать, зачем график вообще делали, и определиться, что за числа показывать.
Единственная ситуация, когда отсутствие значений в целом можно простить — это спарклайны (маленькие графики размером примерно как одна ячейка таблицы). Но и там можно что-то придумать.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤30👍22💯10😁1😢1
Текст — ключик к пониманию графика
Искренне восхищаюсь командой «Если быть точным» и часто рекомендую их графики для развития насмотренности. Но сегодня на основе их графика мы поговорим, как текст влияет на понятность работы.
Что мне не нравится в исходном графике:
Читаю: за последние два года сильнее всего реальные доходы выросли у наименее обспеченых семей. Смотрю на график.
Что за цифры? Что показывает один столбик?
Ключик к пониманию находится ниже:
Структура децильных групп 2022 года по группам изменения реального денежного дохода на человека в 2024 году.
Со скрипом декодирую — население побили на группы по 10% и для каждой из этих групп посчитали, как поменялся их доход. Цветные цифры изменение дохода и показывают.
Проблемы три:
— Сначала показали график, а НИЖЕ расшифровали, что он показывает. Это противоречит логике чтения информации и грузит мозг.
— «Структура децильных групп» — это что-то для научного журнала. «Если быть точным», насколько мне известно, позиционирует себя как издание для массовой аудитории. Надо постараться объяснить это проще.
— Вообще не подписано, что значит цвет. Догадаться можно, но классно, когда не надо догадываться.
Буквально «на коленке» набросал новую версию, где попытался эти проблемы решить. Как вам?
🔥 — стало понятнее
😢 — было лучше
❤️ — обе версии понятны
#разбор
Искренне восхищаюсь командой «Если быть точным» и часто рекомендую их графики для развития насмотренности. Но сегодня на основе их графика мы поговорим, как текст влияет на понятность работы.
Что мне не нравится в исходном графике:
Читаю: за последние два года сильнее всего реальные доходы выросли у наименее обспеченых семей. Смотрю на график.
Что за цифры? Что показывает один столбик?
Ключик к пониманию находится ниже:
Структура децильных групп 2022 года по группам изменения реального денежного дохода на человека в 2024 году.
Со скрипом декодирую — население побили на группы по 10% и для каждой из этих групп посчитали, как поменялся их доход. Цветные цифры изменение дохода и показывают.
Проблемы три:
— Сначала показали график, а НИЖЕ расшифровали, что он показывает. Это противоречит логике чтения информации и грузит мозг.
— «Структура децильных групп» — это что-то для научного журнала. «Если быть точным», насколько мне известно, позиционирует себя как издание для массовой аудитории. Надо постараться объяснить это проще.
— Вообще не подписано, что значит цвет. Догадаться можно, но классно, когда не надо догадываться.
Буквально «на коленке» набросал новую версию, где попытался эти проблемы решить. Как вам?
🔥 — стало понятнее
😢 — было лучше
❤️ — обе версии понятны
#разбор
🔥93❤15🤔1
Иногда я думаю, что меня уже нечем удивить в сфере визуализации данных. Но потом открываю интернет.
Это, если что — не интерактив. Тут отдельно кружочки, а отдельно — список значений.
Я не знаю, какой логикой пользовался дизайнер, который делал эту визуализацию — но подозреваю, это тот случай, когда график вставили просто как стоковую фотку: чтобы было что-то красивое.
Разберу проблемы:
— График не несёт никакого смысла, потому что сопоставить вид хобби и его визуальное отображение невозможно. Круги существуют отдельно, хобби — отдельно.
— Нарушен принцип подобия: круги покрашены в четыре цвета, и в нормальной ситуации цветом должны были быть объединены объекты одной группы. К примеру — одним цветом — спорт, другим — творчество. Ничего подобного я здесь не вижу — выглядит так, словно случайным образом взяли разные цвета из палитры лендинга.
— Визуализировано «прочее», хотя в нём нет никакого смысла. Типа — треть юристов имееют какое-то хобби, которое мы не учли в опросе?
Зачем это сравнивать с отдельными видами хобби, в опросе, в котором должен был быть множественный выбор ответа?
— Бонусный пункт. Виды хобби разбиты на популярные, спортивные и остальное.
Вы, наверное, ожидали в «остальном» увидеть виды хобби, которые вошли в «прочее», и которые выбрало по отдельности менее 2%?
Нет. В остальном —
Хэндмейд и рукоделие 18,6%
Чтение 11,4%
Путешествия 7,6%
Концерты / музеи / театры 7,6%
Почему там пункты более популярные, чем в «популярном», и почему проценты не бьются по разным вкладкам — вопрос открытый.
#разбор
Это, если что — не интерактив. Тут отдельно кружочки, а отдельно — список значений.
Я не знаю, какой логикой пользовался дизайнер, который делал эту визуализацию — но подозреваю, это тот случай, когда график вставили просто как стоковую фотку: чтобы было что-то красивое.
Разберу проблемы:
— График не несёт никакого смысла, потому что сопоставить вид хобби и его визуальное отображение невозможно. Круги существуют отдельно, хобби — отдельно.
— Нарушен принцип подобия: круги покрашены в четыре цвета, и в нормальной ситуации цветом должны были быть объединены объекты одной группы. К примеру — одним цветом — спорт, другим — творчество. Ничего подобного я здесь не вижу — выглядит так, словно случайным образом взяли разные цвета из палитры лендинга.
— Визуализировано «прочее», хотя в нём нет никакого смысла. Типа — треть юристов имееют какое-то хобби, которое мы не учли в опросе?
Зачем это сравнивать с отдельными видами хобби, в опросе, в котором должен был быть множественный выбор ответа?
— Бонусный пункт. Виды хобби разбиты на популярные, спортивные и остальное.
Вы, наверное, ожидали в «остальном» увидеть виды хобби, которые вошли в «прочее», и которые выбрало по отдельности менее 2%?
Нет. В остальном —
Хэндмейд и рукоделие 18,6%
Чтение 11,4%
Путешествия 7,6%
Концерты / музеи / театры 7,6%
Почему там пункты более популярные, чем в «популярном», и почему проценты не бьются по разным вкладкам — вопрос открытый.
#разбор
1😨37❤10😁8👍3
