Подготовка
1. Для расчета изменения будем использовать функцию PREVIOUS_PERIOD(). Чтобы она работала, фильтр не должен отсекать предыдущие периоды, поэтому отвязываем фильтр даты от компонента.
2. В компоненте создаем параметр типа Time и год фильтруем по значению параметра. В дашборде не забываем привязать параметр в настройках фильтрах: Bind Parameter + шестеренка для выбора параметра.
3. Создаем вычисляемый индикатор с расчетом прироста.
Трюк из Табло
4. Создаем вычисляемые индикаторы отдельно для положительного (good) и отрицательного (bad) изменения. Название начинается с "label", так как такие индикаторы используются только в качестве визуальной подсказки и сгруппируются друг с другом по алфавиту.
5. В Text добавляем пилюли и корректируем цвета. Выделяем поле с положительным значением и красим в зеленый, а отрицательное - в красный.
🥳 Вуаля, визуально понятная карточка KPI готова!
#график #kpi #цвет #практика
1. Для расчета изменения будем использовать функцию PREVIOUS_PERIOD(). Чтобы она работала, фильтр не должен отсекать предыдущие периоды, поэтому отвязываем фильтр даты от компонента.
2. В компоненте создаем параметр типа Time и год фильтруем по значению параметра. В дашборде не забываем привязать параметр в настройках фильтрах: Bind Parameter + шестеренка для выбора параметра.
3. Создаем вычисляемый индикатор с расчетом прироста.
Трюк из Табло
4. Создаем вычисляемые индикаторы отдельно для положительного (good) и отрицательного (bad) изменения. Название начинается с "label", так как такие индикаторы используются только в качестве визуальной подсказки и сгруппируются друг с другом по алфавиту.
5. В Text добавляем пилюли и корректируем цвета. Выделяем поле с положительным значением и красим в зеленый, а отрицательное - в красный.
🥳 Вуаля, визуально понятная карточка KPI готова!
#график #kpi #цвет #практика
🔥2
Почему появился этот канал
Меня зовут Алиса, и я познакомилась с FineBI в апреле 2022 года.
💥 FineBI — это китайский BI-инструмент с яркой эстетикой Востока:
• насыщенная стандартная палитра
• есть опция пульсирующего эффекта
• из коробки предлагаются графики, неоднозначные с точки зрения визуализации бизнес-данных: rose chart («петушиный гребень»), dashboard (спидометр), multi-layer pie-chart (многослойная круговая диаграмма)
📊 В то же время западный подход в визуализации придерживается минимализма и снижения когнитивной нагрузки с целью быстрого и точного восприятия информации.
Поэтому здесь я буду рассказывать о том, как делать графики и дашборды в FineBI более наглядными и приближенными к привычным западным визуальным стандартам. И возможно, о чем-нибудь еще 😉
⬆️ На картинках представлены для сравнения инсталлированный в FineBI демо-дашборд Bank Operation Capabilities Analysis и дашборд Романа Бунина, созданный для проекта DataYoga "ВизСтандАрт" и скачанный из Tableau Public.
Меня зовут Алиса, и я познакомилась с FineBI в апреле 2022 года.
💥 FineBI — это китайский BI-инструмент с яркой эстетикой Востока:
• насыщенная стандартная палитра
• есть опция пульсирующего эффекта
• из коробки предлагаются графики, неоднозначные с точки зрения визуализации бизнес-данных: rose chart («петушиный гребень»), dashboard (спидометр), multi-layer pie-chart (многослойная круговая диаграмма)
📊 В то же время западный подход в визуализации придерживается минимализма и снижения когнитивной нагрузки с целью быстрого и точного восприятия информации.
Поэтому здесь я буду рассказывать о том, как делать графики и дашборды в FineBI более наглядными и приближенными к привычным западным визуальным стандартам. И возможно, о чем-нибудь еще 😉
⬆️ На картинках представлены для сравнения инсталлированный в FineBI демо-дашборд Bank Operation Capabilities Analysis и дашборд Романа Бунина, созданный для проекта DataYoga "ВизСтандАрт" и скачанный из Tableau Public.
🔥2❤1
Барчарт не так прост, как кажется
Барчарт — это диаграмма, в которой числовая информация кодируется длиной(высотой) столбца: чем длиннее(выше) столбец, тем больше его значение. На одной оси располагаются количественные данные, на другой — названия категорий или временные периоды. Столбцы могут быть расположены вертикально или горизонтально в зависимости от того, где располагаются категории.
По умолчанию FineBI устанавливает такие настройки в 6 версии:
🔹 в Graphic Property > Size ширина столбцов равна 70% для вертикального барчарта и 40% для горизонтального.
С размером 40% столбцы выглядят узкими, как дощатый забор. В этой же настройке выставляется скругление в 2 пикселя
🔹 подпись данных не появляется автоматически в Label, а при добавлении красится в цвет столбца
🔹 длинные названия категорий располагаются по диагонали
🔹 всегда есть названия осей
🔹 есть сетка
🔹 категории с типом данных Text сортируются по алфавиту
Разберем в следующих постах, как можно улучшить визуализацию✌️
#барчарт #теория
Барчарт — это диаграмма, в которой числовая информация кодируется длиной(высотой) столбца: чем длиннее(выше) столбец, тем больше его значение. На одной оси располагаются количественные данные, на другой — названия категорий или временные периоды. Столбцы могут быть расположены вертикально или горизонтально в зависимости от того, где располагаются категории.
По умолчанию FineBI устанавливает такие настройки в 6 версии:
🔹 в Graphic Property > Size ширина столбцов равна 70% для вертикального барчарта и 40% для горизонтального.
С размером 40% столбцы выглядят узкими, как дощатый забор. В этой же настройке выставляется скругление в 2 пикселя
🔹 подпись данных не появляется автоматически в Label, а при добавлении красится в цвет столбца
🔹 длинные названия категорий располагаются по диагонали
🔹 всегда есть названия осей
🔹 есть сетка
🔹 категории с типом данных Text сортируются по алфавиту
Разберем в следующих постах, как можно улучшить визуализацию✌️
#барчарт #теория
👍3
Откорректируем барчарт в 6 шагов. Часть 1
✔️ Ширина столбцов и скругления
Size 70% выглядит оптимальным для ширины столбцов, но это зависит от количества категорий. Поэтому рекомендуется настраивать размер с ориентиром на то, что расстояние между столбцами в барчарте должно равняться половине ширине самого бара, как на картинке.
Эксперт по визуализации данных Evelina Judeikyte приводит это правило в первом пункте в статье, где она примеряет правила к графикам профессора Нью-Йоркского университета Scott Galloway. А также соотношение 2:1 упоминается в книге Александра Богачева "Графики, которых убеждают всех".
Скругление 2 пикселя малозаметно, но по принципам визуализации рекомендуется не скруглять столбцы. В этой статье наглядно описано, как скругление искажает восприятие данных. Поэтому ставим 0 в настройке Graphic Property > Size > Rounded Corner.
Продолжение дальше⬇️
#барчарт
✔️ Ширина столбцов и скругления
Size 70% выглядит оптимальным для ширины столбцов, но это зависит от количества категорий. Поэтому рекомендуется настраивать размер с ориентиром на то, что расстояние между столбцами в барчарте должно равняться половине ширине самого бара, как на картинке.
Эксперт по визуализации данных Evelina Judeikyte приводит это правило в первом пункте в статье, где она примеряет правила к графикам профессора Нью-Йоркского университета Scott Galloway. А также соотношение 2:1 упоминается в книге Александра Богачева "Графики, которых убеждают всех".
Скругление 2 пикселя малозаметно, но по принципам визуализации рекомендуется не скруглять столбцы. В этой статье наглядно описано, как скругление искажает восприятие данных. Поэтому ставим 0 в настройке Graphic Property > Size > Rounded Corner.
Продолжение дальше⬇️
#барчарт
👍5🔥2
Откорректируем барчарт в 6 шагов. Часть 2
✔️ Подписи данных
Цветную подпись может быть сложно считывать из-за низкой контрастности. Поэтому рекомендую красить подписи данных сразу для всего дашборда в настройках Dashboard Style > Chart > text Custom или в каждом компоненте отдельно в разделе Label, что более трудоемко.
По умолчанию подписи данных корректно располагаются в конце столбца, а не у основания или в центре, потому что мы сравниваем длину столбцов и сразу можем увидеть значения без лишних движений глазами.
Не могу обойти стороной, что большие значения рекомендуется округлять до тысяч-миллионов. Поскольку изменение в настройке Value Format > Number > Quantity Unit добавляет подпись Million для миллионов, следует создать вычисляемый показатель Calculation Indicator с делением на 1 млн. В формуле можно компактно указать *1e-6.
Продолжение дальше⬇️
#барчарт
✔️ Подписи данных
Цветную подпись может быть сложно считывать из-за низкой контрастности. Поэтому рекомендую красить подписи данных сразу для всего дашборда в настройках Dashboard Style > Chart > text Custom или в каждом компоненте отдельно в разделе Label, что более трудоемко.
По умолчанию подписи данных корректно располагаются в конце столбца, а не у основания или в центре, потому что мы сравниваем длину столбцов и сразу можем увидеть значения без лишних движений глазами.
Не могу обойти стороной, что большие значения рекомендуется округлять до тысяч-миллионов. Поскольку изменение в настройке Value Format > Number > Quantity Unit добавляет подпись Million для миллионов, следует создать вычисляемый показатель Calculation Indicator с делением на 1 млн. В формуле можно компактно указать *1e-6.
Продолжение дальше⬇️
#барчарт
👍5
Откорректируем барчарт в 6 шагов. Часть 3
✔️ Подписи осей
Названия осей рекомендуется выносить в заголовок, а на самих осях не указывать. Для этого убираем галочку Display Axis Title в настройках Set Category Axis и Set Value Axis. В этой же настройке для показателя Value можно убрать подписи данных на оси Display Axis Label, если значения уже указаны на графике.
✔️ Названия категорий
Если названия категорий длинные, то лучше расположить столбцы сверху вниз, а категории — горизонтально.
✔️ Сетка
Для визуальной чистоты убираем сетку: галочки в Component Style (Axis, Horizontal Grid Line, Vertical Grid Line). Базисную линию, откуда начинается отсчет, добавляем для показателя в виде сordon line со значением 0 (Upd. Начиная с версии 6.0.15 cordon line для оси не требуется)
✔️ Сортировка
Сортировать столбцы лучше по убыванию значения для быстрого восприятия. Если только нет логической сортировки, например: возрастные группы или месяцы. Тему сортировки разберем в других постах.
#барчарт
✔️ Подписи осей
Названия осей рекомендуется выносить в заголовок, а на самих осях не указывать. Для этого убираем галочку Display Axis Title в настройках Set Category Axis и Set Value Axis. В этой же настройке для показателя Value можно убрать подписи данных на оси Display Axis Label, если значения уже указаны на графике.
✔️ Названия категорий
Если названия категорий длинные, то лучше расположить столбцы сверху вниз, а категории — горизонтально.
✔️ Сетка
Для визуальной чистоты убираем сетку: галочки в Component Style (Axis, Horizontal Grid Line, Vertical Grid Line). Базисную линию, откуда начинается отсчет, добавляем для показателя в виде сordon line со значением 0 (Upd. Начиная с версии 6.0.15 cordon line для оси не требуется)
✔️ Сортировка
Сортировать столбцы лучше по убыванию значения для быстрого восприятия. Если только нет логической сортировки, например: возрастные группы или месяцы. Тему сортировки разберем в других постах.
#барчарт
👍7
Соблюдаем закон близости (proximity)
Закон близости говорит, что объекты, расположенные достаточно близко друг к другу, воспринимаются как единая группа. Подобная группировка помогает верно и быстро воспринимать информацию.
Поэтому объединяйте схожие показатели друг с другом, а элементы, относящиеся к отдельному графику, располагайте ближе к нему. Это могут быть легенда, фильтр или текстовый комментарий для конкретной визуализации.
#uxui #гештальтпринципы #теория
Закон близости говорит, что объекты, расположенные достаточно близко друг к другу, воспринимаются как единая группа. Подобная группировка помогает верно и быстро воспринимать информацию.
Поэтому объединяйте схожие показатели друг с другом, а элементы, относящиеся к отдельному графику, располагайте ближе к нему. Это могут быть легенда, фильтр или текстовый комментарий для конкретной визуализации.
#uxui #гештальтпринципы #теория
👍3
Располагаем названия показателей горизонтально
Названия воспринимаются удобнее, когда они расположены горизонтально. Для этого нужно сделать всего 5 шагов:
🔹 Положить TargetName (Upd. Начиная с версии 6.0.15 называется IndicatorName) в полку с показателями
🔹 Совместить оси в настройках полки: выбрать Indicator Aggregation
🔹 Убрать надписи TargetName в Set Category Axes
🔹 Убрать названия показателей в Set Value Axes
🔹 В этих же настройках оси для показателей заменить дефолтный диапазон осей на индивидуальный для каждого показателя
В видео инструкция, чтобы точно ничего не пропустить🤓
#график #uxui #практика #лайнчарт
Названия воспринимаются удобнее, когда они расположены горизонтально. Для этого нужно сделать всего 5 шагов:
🔹 Положить TargetName (Upd. Начиная с версии 6.0.15 называется IndicatorName) в полку с показателями
🔹 Совместить оси в настройках полки: выбрать Indicator Aggregation
🔹 Убрать надписи TargetName в Set Category Axes
🔹 Убрать названия показателей в Set Value Axes
🔹 В этих же настройках оси для показателей заменить дефолтный диапазон осей на индивидуальный для каждого показателя
В видео инструкция, чтобы точно ничего не пропустить🤓
#график #uxui #практика #лайнчарт
👍2
История про отвратительный график в FineBI
В ноябре в датавиз-чатах пронеслась новость о конкурсе отвратительных графиков в телеграм-канале с одноименным названием. На графики в этом канале лучше долго не смотреть, чтобы не тренировать насмотренность в неправильную сторону, но для юмора и прокачки критического взгляда очень любопытно.
Условием конкурса было создать отвратительный график на основе датасета из Kaggle с деталями о породах собак.
В качестве средства пытки над визуализацией я, конечно, выбрала FineBI и честно пыталась сделать ужасный график. Признаюсь, получалось тяжело: мозг упрямо хотел анализировать данные и делать что-то адекватное. Поэтому я пошла с другой стороны и задалась целью сделать бесполезное нечто, и у меня получилось ЭТО на картинке...
продолжение в следующем посте⬇️
#dataviz #coolstory
В ноябре в датавиз-чатах пронеслась новость о конкурсе отвратительных графиков в телеграм-канале с одноименным названием. На графики в этом канале лучше долго не смотреть, чтобы не тренировать насмотренность в неправильную сторону, но для юмора и прокачки критического взгляда очень любопытно.
Условием конкурса было создать отвратительный график на основе датасета из Kaggle с деталями о породах собак.
В качестве средства пытки над визуализацией я, конечно, выбрала FineBI и честно пыталась сделать ужасный график. Признаюсь, получалось тяжело: мозг упрямо хотел анализировать данные и делать что-то адекватное. Поэтому я пошла с другой стороны и задалась целью сделать бесполезное нечто, и у меня получилось ЭТО на картинке...
продолжение в следующем посте⬇️
#dataviz #coolstory
😁1
Продолжение истории
Когда в канале опубликовали работы и проводился опрос, я увлеченно следила за ходом голосования и появлением комментариев.
Во-первых, я впечатлилась разнообразием антишедевров других участников.
Во-вторых, я испытала необычные двойственные ощущения, когда ругают график, но это значит, что мы (участники) молодцы, потому что успешно справились с заданием.
Но больше всего я была рада, когда прочитала вот этот длинный комментарий про свой график, где написано про преступление против здравого смысла, потому что это означало, что я достигла цели!🥳
Для меня отвратительный график — это график, который ничего не значит, несмотря на соблюдение базовых правил и внешнюю милоту.
✍️Мораль: давайте делать содержательные графики!
P.S. Конкурс мне очень понравился. Работы всех участников можно посмотреть в этом посте. Победителем конкурса стала гуру дата-арта и датавиза Наталья Киселева, а я заняла призовое 3 место. И в качестве приза у меня теперь есть эта история☺️
#dataviz #coolstory
Когда в канале опубликовали работы и проводился опрос, я увлеченно следила за ходом голосования и появлением комментариев.
Во-первых, я впечатлилась разнообразием антишедевров других участников.
Во-вторых, я испытала необычные двойственные ощущения, когда ругают график, но это значит, что мы (участники) молодцы, потому что успешно справились с заданием.
Но больше всего я была рада, когда прочитала вот этот длинный комментарий про свой график, где написано про преступление против здравого смысла, потому что это означало, что я достигла цели!🥳
Для меня отвратительный график — это график, который ничего не значит, несмотря на соблюдение базовых правил и внешнюю милоту.
✍️Мораль: давайте делать содержательные графики!
P.S. Конкурс мне очень понравился. Работы всех участников можно посмотреть в этом посте. Победителем конкурса стала гуру дата-арта и датавиза Наталья Киселева, а я заняла призовое 3 место. И в качестве приза у меня теперь есть эта история☺️
#dataviz #coolstory
🆒2❤1
Проявляем числа или чем еще отличается Tableau от FineBI
На картинках представлены два графика с настройками по умолчанию. Один сделан в Tableau, а второй — в FineBI (Upd. Актуально до версии 6.1).
Можно заметить, что Табло автоматически красит большое значение на темном фоне в белый цвет, и поэтому оно легче считывается.
Более того, если в Файне мы захотим выбрать более яркую цветовую палитру вместо Auto, например Deep Sea, то большие значения будут еще менее различимыми.
Что же делать?🤔
#uxui #цвет
На картинках представлены два графика с настройками по умолчанию. Один сделан в Tableau, а второй — в FineBI (Upd. Актуально до версии 6.1).
Можно заметить, что Табло автоматически красит большое значение на темном фоне в белый цвет, и поэтому оно легче считывается.
Более того, если в Файне мы захотим выбрать более яркую цветовую палитру вместо Auto, например Deep Sea, то большие значения будут еще менее различимыми.
Что же делать?🤔
#uxui #цвет
Кастомизируем цвет подписей данных в тепловой карте
Для того чтобы реализовать подобную фичу в FineBI, нужно создать дополнительные вычисления для маленьких и больших значений, а затем добавить их в подписи данных по той же логике, как мы ранее красили изменения KPI.
По шагам:
1. Рассчитываем максимальное значение
2. Cоздаем два вычисляемых индикатора. Коэффициент 0.7 кажется наиболее оптимальным, но он может быть другим:
3. Перетаскиваем созданные индикаторы в Label и красим их соответствующим цветом, причем вместо белого лучше использовать светло-серый оттенок
Несмотря на то, что белый цвет создает максимально возможную контрастность, важно помнить, что при чрезвычайно высоких контрастах текст будет расплываться (эффект халяции)
#uxui #цвет #график #хитмап #практика
Для того чтобы реализовать подобную фичу в FineBI, нужно создать дополнительные вычисления для маленьких и больших значений, а затем добавить их в подписи данных по той же логике, как мы ранее красили изменения KPI.
По шагам:
1. Рассчитываем максимальное значение
MAX SUM Sales: TOTAL(SUM_AGG(${Sales}), 0, "max")2. Cоздаем два вычисляемых индикатора. Коэффициент 0.7 кажется наиболее оптимальным, но он может быть другим:
black для небольших значений: IF(SUM_AGG(${Sales})/${MAX SUM Sales} < 0.7, SUM_AGG(${Sales}), null)
и white для больших: IF(SUM_AGG(${Sales})/${MAX SUM Sales} >= 0.7, SUM_AGG(${Sales}), null)3. Перетаскиваем созданные индикаторы в Label и красим их соответствующим цветом, причем вместо белого лучше использовать светло-серый оттенок
Несмотря на то, что белый цвет создает максимально возможную контрастность, важно помнить, что при чрезвычайно высоких контрастах текст будет расплываться (эффект халяции)
#uxui #цвет #график #хитмап #практика
🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
Быстрое ограничение выборки
Интерактивное перестраивание визуализаций — одно из неотъемлемых преимуществ BI-инструментов, поэтому особенно важно использовать фильтры и параметры, чтобы наиболее полно использовать возможности BI. Для этой темы я буду использовать хештэг #интерактивность.
В сегодняшней серии постов я поделюсь тем, как реализовала переключатели с быстрым ограничением выборки типа "Вся выборка/Исключить одну группу" или "Вся выборка/Оставить одну группу", которые показаны в видео.
Они выглядят лаконично и пригодятся, если используется подобный сценарий анализа данных, а фильтр в виде обычного выпадающего списка является избыточным.
Алгоритм создания такой интерактивности дальше ⬇️
#практика
Датавиз в BI • Алиса Ручкина
Интерактивное перестраивание визуализаций — одно из неотъемлемых преимуществ BI-инструментов, поэтому особенно важно использовать фильтры и параметры, чтобы наиболее полно использовать возможности BI. Для этой темы я буду использовать хештэг #интерактивность.
В сегодняшней серии постов я поделюсь тем, как реализовала переключатели с быстрым ограничением выборки типа "Вся выборка/Исключить одну группу" или "Вся выборка/Оставить одну группу", которые показаны в видео.
Они выглядят лаконично и пригодятся, если используется подобный сценарий анализа данных, а фильтр в виде обычного выпадающего списка является избыточным.
Алгоритм создания такой интерактивности дальше ⬇️
#практика
Датавиз в BI • Алиса Ручкина
👍2
Алгоритм для быстрого ограничения выборки
Посмотреть результат в предыдущем посте
1. На дашборде создаем текстовый фильтр с одиночным выбором и с кастомными значениями, которые записываем в Custom Value List
2. В компоненте создаем параметр и вычисляемое поле Calculation Indicator с применением параметра. Затем кладем созданный индикатор в Result Filter и выбираем 1.
Логику отнесения к нужной выборке можно создать двумя способами:
🔹 прописать в формуле создаваемого индикатора
или 🔹 назначить группу в self-service dataset при подготовке данных во вкладке Data
Второй вариант бесспорно оптимален для 5 версии, где вычисляемые поля создаются раздельно для каждого компонента. Несмотря на то, что я использую 6 версию, предпочитаю второй способ, потому что бизнес-логика указывается отдельно от логики разработки визуализации, и поэтому мне легче корректировать и поддерживать дашборд.
3. Возвращаемся на дашборд и привязываем параметр к фильтру: в шестеренке Bind Parameter галочкой выбираем соответствующий параметр.
#интерактивность #практика
Датавиз в BI • Алиса Ручкина
Посмотреть результат в предыдущем посте
1. На дашборде создаем текстовый фильтр с одиночным выбором и с кастомными значениями, которые записываем в Custom Value List
2. В компоненте создаем параметр и вычисляемое поле Calculation Indicator с применением параметра. Затем кладем созданный индикатор в Result Filter и выбираем 1.
Логику отнесения к нужной выборке можно создать двумя способами:
🔹 прописать в формуле создаваемого индикатора
или 🔹 назначить группу в self-service dataset при подготовке данных во вкладке Data
Второй вариант бесспорно оптимален для 5 версии, где вычисляемые поля создаются раздельно для каждого компонента. Несмотря на то, что я использую 6 версию, предпочитаю второй способ, потому что бизнес-логика указывается отдельно от логики разработки визуализации, и поэтому мне легче корректировать и поддерживать дашборд.
3. Возвращаемся на дашборд и привязываем параметр к фильтру: в шестеренке Bind Parameter галочкой выбираем соответствующий параметр.
#интерактивность #практика
Датавиз в BI • Алиса Ручкина
🔥4