Forwarded from Сделай это красиво
Как понять, что вы правильно визуализировали данные
Когда я оцениваю графики, то всегда начинаю с вопроса: какая была цель? Все дизайнерские решения должны работать именно на неё.
Рассмотрим этот принцип на примере. Вот — две картинки, на которых показаны разные составы Госдумы. Очевидно, задача авторов — помочь читателям сравнить присутствие разных партий в парламенте. Какой из вариантов позволяет вам сделать это быстрее?
Думаю, что не первый 🌚. Здесь неудобно расположена легенда, а для сравнения нужно сопоставлять фигуры сложной формы или пересчитывать кружочки.
Второй график — более удачный, хотя и не самый лучший. Например, я не уверен, что здесь стоило показывать долю от 100%.
Вот главные признаки верно выбранного типа визуализации:
1. График решает задачу (сравнить одно с другим, увидеть рост или падение чего-либо, оценить масштабы чего-либо),
2. Из графика можно сделать вывод — ответить на внутренний вопрос «И что?»,
3. График не надо долго изучать, чтобы понять, какую задачу он решает и какой вывод транслирует.
А как бы вы визуализировали такие данные? Пишите в комментариях, что бы поправили.
Когда я оцениваю графики, то всегда начинаю с вопроса: какая была цель? Все дизайнерские решения должны работать именно на неё.
Рассмотрим этот принцип на примере. Вот — две картинки, на которых показаны разные составы Госдумы. Очевидно, задача авторов — помочь читателям сравнить присутствие разных партий в парламенте. Какой из вариантов позволяет вам сделать это быстрее?
Думаю, что не первый 🌚. Здесь неудобно расположена легенда, а для сравнения нужно сопоставлять фигуры сложной формы или пересчитывать кружочки.
Второй график — более удачный, хотя и не самый лучший. Например, я не уверен, что здесь стоило показывать долю от 100%.
Вот главные признаки верно выбранного типа визуализации:
1. График решает задачу (сравнить одно с другим, увидеть рост или падение чего-либо, оценить масштабы чего-либо),
2. Из графика можно сделать вывод — ответить на внутренний вопрос «И что?»,
3. График не надо долго изучать, чтобы понять, какую задачу он решает и какой вывод транслирует.
А как бы вы визуализировали такие данные? Пишите в комментариях, что бы поправили.
О пропорциях линейных графиков ⬇️
Прошел год, но актуальность темы кажется вечной. Плюс запись дискуссии Романа Бунина и Александра Богачева на Youtube по этой ссылке.
#dataviz
Прошел год, но актуальность темы кажется вечной. Плюс запись дискуссии Романа Бунина и Александра Богачева на Youtube по этой ссылке.
#dataviz
YouTube
Стрим про пропорции линейных графиков
Вместе с Сашей Богачевым спорим про пропорции линейных графиков.
Исходный посты :
Мой — https://xn--r1a.website/revealthedata/929
Саши — https://xn--r1a.website/chartomojka/988
Исходный посты :
Мой — https://xn--r1a.website/revealthedata/929
Саши — https://xn--r1a.website/chartomojka/988
👍1
Forwarded from Reveal the Data
📈Пропорции графиков
Недавно столкнулся с частой ошибкой и чуть не сделал неправильный вывод из графика. Посмотрел на график и подумал — «О, метрика почти не меняется!», а затем попробовал другую пропорцию чарта и понял, что на самом деле это не так и метрика падает. Возникают такие ошибки из-за искажения восприятия лайн-чарта при разных его пропорциях. Посмотрите сами на картинке:
1️⃣ График слишком плоский. Кажется, что метрика почти не меняется. Именно с этим графиком я чуть не ошибся.
2️⃣ График слишком высокий. Кажется, что метрика очень сильно шумит, а падение более драматичное, чем есть.
3️⃣ График — то что надо. Видна и общая динамика, и сезонность внутри недель.
Почувствовали смотря на графики, что это как будто даже разные данные? Как же тогда выбрать пропорции лайн-чарта?
Сложный способ
Используя технику «banking to 45º» из книги Вильяма Кливленда, когда мы стремимся к тому, чтобы средний угол наклона всех кусочков линий, соединяющих точки был равен 45°. Но для этого надо рассчитать средний угол, что звучит непросто, есть даже целая 🤓 научная статья со сложными формулами.
Простой способ
Делайте лайн-чарты примерно с соотношением 16:9, тогда скорее всего пропорции будут подходящие. Но чем больше точек, тем обычно «длиннее» должен быть график. Ну или просто не забывайте про особенность этого типа графиков и пробуйте разные пропорции, когда делаете дашборд.
П.С. Очень показательно, как даже такая мелочь, как пропорции графика может повлиять на качество дашаборда.
П.П.С. Как отмечают в комментах, непонятно, что делать когда пользователь ставит разные фильтры дат. Это и правда проблема и хорошего решения не знаю 🤷♂️
#наблюдение
Недавно столкнулся с частой ошибкой и чуть не сделал неправильный вывод из графика. Посмотрел на график и подумал — «О, метрика почти не меняется!», а затем попробовал другую пропорцию чарта и понял, что на самом деле это не так и метрика падает. Возникают такие ошибки из-за искажения восприятия лайн-чарта при разных его пропорциях. Посмотрите сами на картинке:
1️⃣ График слишком плоский. Кажется, что метрика почти не меняется. Именно с этим графиком я чуть не ошибся.
2️⃣ График слишком высокий. Кажется, что метрика очень сильно шумит, а падение более драматичное, чем есть.
3️⃣ График — то что надо. Видна и общая динамика, и сезонность внутри недель.
Почувствовали смотря на графики, что это как будто даже разные данные? Как же тогда выбрать пропорции лайн-чарта?
Сложный способ
Используя технику «banking to 45º» из книги Вильяма Кливленда, когда мы стремимся к тому, чтобы средний угол наклона всех кусочков линий, соединяющих точки был равен 45°. Но для этого надо рассчитать средний угол, что звучит непросто, есть даже целая 🤓 научная статья со сложными формулами.
Простой способ
Делайте лайн-чарты примерно с соотношением 16:9, тогда скорее всего пропорции будут подходящие. Но чем больше точек, тем обычно «длиннее» должен быть график. Ну или просто не забывайте про особенность этого типа графиков и пробуйте разные пропорции, когда делаете дашборд.
П.С. Очень показательно, как даже такая мелочь, как пропорции графика может повлиять на качество дашаборда.
П.П.С. Как отмечают в комментах, непонятно, что делать когда пользователь ставит разные фильтры дат. Это и правда проблема и хорошего решения не знаю 🤷♂️
#наблюдение
❤3
Датавиз в BI • Алиса Ручкина
План-факт. Перекрывающие столбцы Для полноценного анализа важны не только сухие фактические значения, но и контекст. Например, сравнение с прошлым периодом или планом. Один из способов показать плановые и фактические значения — с помощью перекрывающих столбцов…
Добавление
Можно применить "rectangular block + в Size мера со знаком минус" только для одного показателя☝️
#барчарт #практика
Можно применить "rectangular block + в Size мера со знаком минус" только для одного показателя☝️
#барчарт #практика
👍2
Датавиз в BI • Алиса Ручкина
Полным ходом идет подготовка к Fine Talks... ... присоединяйтесь в следующую пятницу к онлайн-встрече дискуссионного клуба✌️ Дата и время: 31 мая в 16:00 (МСК) Регистрация по ссылке: https://clck.ru/3AcanG. Запись тут #news
FineBI + датавиз = вопрос.pptx
11.3 MB
Запись и презентация к Fine Talks 31.05.24
Запись выложена на Youtube в канале Glowbyte по этой ссылке, а в презентации кликабельные ссылки✌️
#эфир
Запись выложена на Youtube в канале Glowbyte по этой ссылке, а в презентации кликабельные ссылки✌️
#эфир
👍5
Пост с полезными ссылками по датавизу
Знаете ли вы про карточки визуализации от DataYoga? Если нет, то вот они. Это подборка разных видов диаграмм с описанием в зависимости от задачи визуализации.
Для тех, кто знает, ЧТО делать, и хочет знать КАК, пригодятся датавиз-стратагемы от DataYoga. На доске в Miro собраны полезные советы для эффективной визуальной передачи данных с эстетичными понятными примерами. Можно бродить по ней долго и не раз😍
Рекомендацию "Сравнивайте самое важное" я применяла на практике в виде интерактивной сортировки мер для диаграммы с накоплением в этом посте.
И кстати говоря о предыдущих постах: к одному из них набралось 20 реакций, и я, как обещала, добавила в комментарии pdf-файл с книгой Альберто Кайро "The Truthful Art: Data, Charts, and Maps for Communication".
#dataviz #знания #подборка
Знаете ли вы про карточки визуализации от DataYoga? Если нет, то вот они. Это подборка разных видов диаграмм с описанием в зависимости от задачи визуализации.
Для тех, кто знает, ЧТО делать, и хочет знать КАК, пригодятся датавиз-стратагемы от DataYoga. На доске в Miro собраны полезные советы для эффективной визуальной передачи данных с эстетичными понятными примерами. Можно бродить по ней долго и не раз😍
Рекомендацию "Сравнивайте самое важное" я применяла на практике в виде интерактивной сортировки мер для диаграммы с накоплением в этом посте.
И кстати говоря о предыдущих постах: к одному из них набралось 20 реакций, и я, как обещала, добавила в комментарии pdf-файл с книгой Альберто Кайро "The Truthful Art: Data, Charts, and Maps for Communication".
#dataviz #знания #подборка
datayoga.ru
Карточки визуализации | DATAYOGA
Набор карточек для визуализации данных
👍3❤1
F/Z паттерны vs верстка дашборда "по-китайски"
🤓 F- и Z-образные паттерны отражают способ сканирования глазами пользователей во время просмотра веб-страницы. Оба паттерна основаны на понимании того, как пользователи сканируют информацию и где они обычно ожидают найти ключевые элементы на странице.
В "прожарке" на FineTalks 31/05 Наталья Киселева зорко отметила, что нередко в китайских демо-дашбордах блоки расположены симметрично от центра и основное внимание уделяется центральной части.
Мое расследование выявило, что на сайте FineReport в статье "Как спроектировать дашборд" рекомендуют располагать важную информацию сверху или по центру, потому что люди читают сверху вниз и расположение в середине является предпочтительным — о как🤔
#chinaviz #дашборд
🤓 F- и Z-образные паттерны отражают способ сканирования глазами пользователей во время просмотра веб-страницы. Оба паттерна основаны на понимании того, как пользователи сканируют информацию и где они обычно ожидают найти ключевые элементы на странице.
В "прожарке" на FineTalks 31/05 Наталья Киселева зорко отметила, что нередко в китайских демо-дашбордах блоки расположены симметрично от центра и основное внимание уделяется центральной части.
Мое расследование выявило, что на сайте FineReport в статье "Как спроектировать дашборд" рекомендуют располагать важную информацию сверху или по центру, потому что люди читают сверху вниз и расположение в середине является предпочтительным — о как🤔
#chinaviz #дашборд
🔥6❤1
Расписание обновлений в дашборде
Вчера я смотрела прожарку маркетингового дашборда Edtech-компании с Романом Буниным (запись на Youtube). В исходном дашборде помимо даты обновления написано, когда обновляются данные. Не помню, чтобы кто-то акцентировал на этом внимание, а это кажется полезным: пользователи будут знать, когда им вернуться за свежими данными.
Что касается самой прожарки, то это просто образец прожарки💪
Сначала последовательное рассмотрение по разным аспектам:
1. Бизнес-цель/контекст
2. Графики и датавиз
3. Графический дизайн
4. UX-дизайн
5. Техническая часть
Благодаря разделению на области знаний можно понять, что именно больше "проседает" и что стоит подучить/повторить.
Затем — глубокая переработка структуры дашборда и логики анализа данных. Что и говорить, надо смотреть😀
#дашборд
Вчера я смотрела прожарку маркетингового дашборда Edtech-компании с Романом Буниным (запись на Youtube). В исходном дашборде помимо даты обновления написано, когда обновляются данные. Не помню, чтобы кто-то акцентировал на этом внимание, а это кажется полезным: пользователи будут знать, когда им вернуться за свежими данными.
Что касается самой прожарки, то это просто образец прожарки💪
Сначала последовательное рассмотрение по разным аспектам:
1. Бизнес-цель/контекст
2. Графики и датавиз
3. Графический дизайн
4. UX-дизайн
5. Техническая часть
Благодаря разделению на области знаний можно понять, что именно больше "проседает" и что стоит подучить/повторить.
Затем — глубокая переработка структуры дашборда и логики анализа данных. Что и говорить, надо смотреть😀
#дашборд
👍11❤2
Собираем дашборд в FineBI на скорость💨
3️⃣ Осваиваем китайский BI. Как построить дашборд в FineBI всего за 1 час (5 версия)
2️⃣ Подробный гайд: Как собрать дашборд в FineBI за 30 минут (6 версия)
1️⃣ Как сделать дашборд в FineBI за 15 минут? Инструкция по созданию визуализаций (6 версия)
#знания #дашборд #база #подборка
3️⃣ Осваиваем китайский BI. Как построить дашборд в FineBI всего за 1 час (5 версия)
2️⃣ Подробный гайд: Как собрать дашборд в FineBI за 30 минут (6 версия)
1️⃣ Как сделать дашборд в FineBI за 15 минут? Инструкция по созданию визуализаций (6 версия)
#знания #дашборд #база #подборка
🔥6
6.1 Показать все, что скрыто в компоненте😎
c помощью переключателя просмотра на темном фоне
Было ли у вас такое, что после обновления с 5 на 6 версию вы «теряли» белые элементы в компонентах дашбордов с темной темой?
Это происходило потому, что в 6 версии стиль дашборда перестал влиять на стиль компонента и белый цвет стал незаметным на белом фоне.
Теперь в 6.1 появился переключатель Dark Preview Mode, который воспроизводит темный фон в компонентах✅
Какие еще фишки появились в версии 6.1, послушаем на стриме с вендоромв этот четверг 25.07 в 16.00 в Telegram-чате FineBI Chat в записи на Youtube по этой ссылке.
#news #график
c помощью переключателя просмотра на темном фоне
Было ли у вас такое, что после обновления с 5 на 6 версию вы «теряли» белые элементы в компонентах дашбордов с темной темой?
Это происходило потому, что в 6 версии стиль дашборда перестал влиять на стиль компонента и белый цвет стал незаметным на белом фоне.
Теперь в 6.1 появился переключатель Dark Preview Mode, который воспроизводит темный фон в компонентах✅
Какие еще фишки появились в версии 6.1, послушаем на стриме с вендором
#news #график
👍3❤2🔥1
Датавиз в BI • Алиса Ручкина
Визуализация нового офиса FanRuan в FineVis На прошлой неделе в Уси (город неподалеку от Шанхая) открылся новый офис FanRuan🥳 В Telegram-чате FanRuan для пользователей FineBI опубликовали виртуальный тур, который сделан с помощью no-code продукта для визуализации…
Обновление для участников чата FanRuan FineBI User Group
Товарищи, расходимся😁
Группу расформируют, предлагают подписаться на канал FanRuanofficialchannel. Я обновила свой пост от 24/04.
#news
Товарищи, расходимся😁
Группу расформируют, предлагают подписаться на канал FanRuanofficialchannel. Я обновила свой пост от 24/04.
#news
Telegram
Momo FanRuan in FanRuan FineBI User Group
Мы хотим вас еще раз уведомить~
Здравствуйте! 🥂🥂FanRuan создала официальную группу. Мы искренне приветствуем вас присоединиться.🎉 В официальной группе мы будем публиковать самую последнюю информацию о мероприятии FanRuan и его продуктах. Еще есть периферийные…
Здравствуйте! 🥂🥂FanRuan создала официальную группу. Мы искренне приветствуем вас присоединиться.🎉 В официальной группе мы будем публиковать самую последнюю информацию о мероприятии FanRuan и его продуктах. Еще есть периферийные…
Еще один пирог из сериала
В продолжение темы сериальных графиков (еще было тут) рассмотрим пайчарт из 3 серии 6 сезона сериала «Офис».
Это круговая диаграмма, которую сделал один из героев (Джим Халперт) про основные занятия своего босса:
• прокрастинировать
• отвлекать других
• критически мыслить
А вы встречали графики в фильмах или сериалах?🙃
#fun #пайчарт
В продолжение темы сериальных графиков (еще было тут) рассмотрим пайчарт из 3 серии 6 сезона сериала «Офис».
Это круговая диаграмма, которую сделал один из героев (Джим Халперт) про основные занятия своего босса:
• прокрастинировать
• отвлекать других
• критически мыслить
А вы встречали графики в фильмах или сериалах?🙃
#fun #пайчарт
😁4👍2
Про диаграмму Флоренс Найтингейл. Часть 1
Продолжая тему датавиза в кинематографе, можно вспомнить фильм «Назад в будущее», в котором один из героев (Док) упомянул эффект Флоренс Найтингейл.
И хотя сам эффект относится к области психологии и к визуализации данных отношения не имеет, само имя Флоренс Найтингейл прочно вошло в мир датавиза, ведь даже международный журнал о датавизе называется Nightingale 😊
Ее самый известный график «Роза Найтингейл» (или «петушиный гребень») стал одним из 5 графиков, которые изменили мир по версии BBC.
⬇️Продолжим в следующей части — в один пост не поместилось✌️
Изображение диаграммы с описанием происходящего на графике скопировано из статьи Алексея Смагина в Тинькофф-журнале.
#dataviz #роза
Продолжая тему датавиза в кинематографе, можно вспомнить фильм «Назад в будущее», в котором один из героев (Док) упомянул эффект Флоренс Найтингейл.
И хотя сам эффект относится к области психологии и к визуализации данных отношения не имеет, само имя Флоренс Найтингейл прочно вошло в мир датавиза, ведь даже международный журнал о датавизе называется Nightingale 😊
Ее самый известный график «Роза Найтингейл» (или «петушиный гребень») стал одним из 5 графиков, которые изменили мир по версии BBC.
⬇️Продолжим в следующей части — в один пост не поместилось✌️
Изображение диаграммы с описанием происходящего на графике скопировано из статьи Алексея Смагина в Тинькофф-журнале.
#dataviz #роза
❤1
Про диаграмму Флоренс Найтингейл. Часть 2
По сути она представляет собой столбчатый график с накоплением, построенный в полярной системе координат.
Несмотря на сходство с пайчартом, угол у секторов одинаковый, а сегменты различаются по радиусу, как столбцы в барчарте по длине/высоте.
Заворачивание в круг в данном случае уместно, потому что используется для визуализации циклических данных (месяцы в годовом цикле).
Поясняющий пример приведен из описания на сайте datavizcatalogue.com.
И еще по теме: на LinkedIn есть интересный пример переверстки диаграммы Найтингейл в столбчатую диаграмму с группировкой (справа).
Можно ли повторить петушиный гребень в FineBI с помощью Rose Chart?
Точно такую же диаграмму, как у Найтингейл, воссоздать в FineBI не получится, потому что при добавлении категории от в Color сектора разделятся на отдельные лепестки для каждой категории, а не на пропорции внутри сектора.
Но можно построить график без отображения структуры. Рассмотрим Rose Chart подробнее ⬇️
#роза #теория
По сути она представляет собой столбчатый график с накоплением, построенный в полярной системе координат.
Несмотря на сходство с пайчартом, угол у секторов одинаковый, а сегменты различаются по радиусу, как столбцы в барчарте по длине/высоте.
Заворачивание в круг в данном случае уместно, потому что используется для визуализации циклических данных (месяцы в годовом цикле).
Поясняющий пример приведен из описания на сайте datavizcatalogue.com.
И еще по теме: на LinkedIn есть интересный пример переверстки диаграммы Найтингейл в столбчатую диаграмму с группировкой (справа).
Можно ли повторить петушиный гребень в FineBI с помощью Rose Chart?
Точно такую же диаграмму, как у Найтингейл, воссоздать в FineBI не получится, потому что при добавлении категории от в Color сектора разделятся на отдельные лепестки для каждой категории, а не на пропорции внутри сектора.
Но можно построить график без отображения структуры. Рассмотрим Rose Chart подробнее ⬇️
#роза #теория
❤3
Как не уколоться о розу в FineBI
В графиках типа Rose Chart можно визуально кодировать:
1️⃣ величину показателя радиусом сегмента
2️⃣ величину показателя и радиусом, и углом сегмента
3️⃣ величину одного показателя радиусом, а другого — углом сегмента
В случае 1️⃣ расширение сектора к внешнему краю воспринимается глазом как бОльшая площадь и значит бОльшее значение показателя, чем на самом деле. Минимизировать эффект можно, увеличив внутренний радиус, как в примере 1А.
В случае 2️⃣ разница в числах увеличивается кратно и крупные «кусочки» выглядят еще больше, чем они есть на самом деле, поэтому такой график больше похож на манипуляцию.
В случае 3️⃣ диаграмма становится сложной для понимания и восприятия. Если нужно сравнить объекты по двум переменным, лучше выбрать диаграмму рассеяния.
Кто же использует такие графики,если есть барчарты ?
Такой тип диаграмм применяют в своей работе, например, метеорологи для иллюстрации розы ветров и hr-специалисты при оценке потенциала тестом PIF.
#роза
В графиках типа Rose Chart можно визуально кодировать:
1️⃣ величину показателя радиусом сегмента
2️⃣ величину показателя и радиусом, и углом сегмента
3️⃣ величину одного показателя радиусом, а другого — углом сегмента
В случае 1️⃣ расширение сектора к внешнему краю воспринимается глазом как бОльшая площадь и значит бОльшее значение показателя, чем на самом деле. Минимизировать эффект можно, увеличив внутренний радиус, как в примере 1А.
В случае 2️⃣ разница в числах увеличивается кратно и крупные «кусочки» выглядят еще больше, чем они есть на самом деле, поэтому такой график больше похож на манипуляцию.
В случае 3️⃣ диаграмма становится сложной для понимания и восприятия. Если нужно сравнить объекты по двум переменным, лучше выбрать диаграмму рассеяния.
Кто же использует такие графики,
Такой тип диаграмм применяют в своей работе, например, метеорологи для иллюстрации розы ветров и hr-специалисты при оценке потенциала тестом PIF.
#роза
❤6
Как мы с FineBI провели это лето
Всем привет!👋
Встречаем осень и вспоминаем, сколько событий произошло этим летом:
🔹стрим RoadMap FineBI 2024
🔹стрим FineBI 6.1 - демонстрация основных изменений
🔹стрим FineBI 6.1 - первые впечатления экспертов
🔹стрим Зачем нужна аналитика для FineBI? Выжимаем максимум из FineDB и LogDB
По клику на название вы перейдете на запись в Youtube.
🌟А также появилась версия 6.1.2, и теперь все скриншоты FineBI в канале будут сделаны именно в этой версии или новее. В предыдущих постах использовались версии до 6.0.16.
#news #знания #подборка
Всем привет!👋
Встречаем осень и вспоминаем, сколько событий произошло этим летом:
🔹стрим RoadMap FineBI 2024
🔹стрим FineBI 6.1 - демонстрация основных изменений
🔹стрим FineBI 6.1 - первые впечатления экспертов
🔹стрим Зачем нужна аналитика для FineBI? Выжимаем максимум из FineDB и LogDB
По клику на название вы перейдете на запись в Youtube.
🌟А также появилась версия 6.1.2, и теперь все скриншоты FineBI в канале будут сделаны именно в этой версии или новее. В предыдущих постах использовались версии до 6.0.16.
#news #знания #подборка
👍5❤1🔥1
Реестр улучшения продукта
🕵️♂️Отдельного поста заслуживает обновленный реестр улучшения продукта для мониторинга бэклога доработок FineBI.
В дашборде отображается наиболее своевременная информация от команды разработки:
✅ столбец Plan содержит планируемую дату выпуска
✅ столбец Exact Time подтверждает планируемую дату, обозначая ее датой релиза при зеленом флаге "Confirmed"
🔗 Добавляю на него ссылку. Upd. 20.10.2025: реестр заархивировали
Посмотрим, какой сейчас статус у диаграммы Ганта⬇️
#news
🕵️♂️Отдельного поста заслуживает обновленный реестр улучшения продукта для мониторинга бэклога доработок FineBI.
В дашборде отображается наиболее своевременная информация от команды разработки:
✅ столбец Plan содержит планируемую дату выпуска
✅ столбец Exact Time подтверждает планируемую дату, обозначая ее датой релиза при зеленом флаге "Confirmed"
Посмотрим, какой сейчас статус у диаграммы Ганта⬇️
#news