Повторим график из логотипа канала

Это не простой барчарт, а вертикальный расходящийся с накоплением.
🔹 Вертикальный
Ось со значениями показателя расположена вертикально. Противоположный вариант — горизонтальный.
🔹С накоплением
Показатели суммируются, располагаясь в одном столбце друг над другом. Противоположный вариант — с группировкой.
🔹 Расходящийся
Показатели располагаются по разные стороны от оси, чаще всего от нуля.

Построим его в 4 шага:
1. Загружаем данные.
2. Создаем вычисляемые индикаторы для показателей, которые должны принимать отрицательное значение и находиться ниже нуля.
3. Выбираем кастомный тип графика и перетаскиваем все необходимые пилюли в рабочую область. Включаем накопление для индикаторов.
4. Корректируем визуал: размер, цвета, сетка, оси и др.

❓А что в документации?
По традиции смотрим в конце😀 В документации приведены 2 способа построения, однако не учитывается кейс с накоплением.

#барчарт #практика

Соблюдаем принцип сходства (similarity)

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

Эффективным инструментом, облегчающим восприятие визуализации, является использование общего цвета.

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

Поскольку на данный момент в FineBI цветовая легенда не сохраняется от графика к графику, цвет нужно задавать вручную для каждой категории в каждом новом графике.

#uxui #гештальтпринципы #цвет

Особенности китайской визуализации

На этом фото в Ведомостях изображен обвал фондовых индексов на китайской бирже во время коронавируса в 2020 году.

Ставь реакцию, если тоже сначала подумал, что это ошибка👍
Я сначала не поверила и провела фактчекинг в Интернете, чтобы убедиться.

Особенность китайской визуализации состоит в ином восприятии цвета, противоположно привычной нам светофорной раскраске:
🟢 зеленый — падение
🔴 красный — рост
Красный цвет связан с элементом огня, который представляет жизненную силу и свет и символизирует счастье, успех и удачу. Поэтому в китайской культуре он воспринимается позитивно.

Первый раз увидела такую интересную особенность у Романа Бунина в этом посте.

#chinaviz #цвет

Чем больше я знаю, тем больше понимаю, что ничего не знаю (Сократ)

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

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

Обучение

Для подготовки к тесту для начала стоит посмотреть курс из 8 уроков на Youtube-канале "Все о BI FineBI, Qlik Sense, Tableau, Power BI". В нем подробно разбираются все темы, необходимые разработчику дашбордов. После долгих праздников не бывает лишним освежить знания😊
Upd. 18/09/24: ссылка на плейлист уроков на Rutube

Ставь 👍, если любишь тесты так же, как я! Завтра для вас будет еще одна интересная ссылка😉

#знания

Тест второй, но короче

У меня подарок для любителей тестов, поставивших 👍 к предыдущему посту!

Это ссылка на другой тест по FineBI. У него другой формат: 4 вопроса, без регистрации и без выдачи сертификата.

#news

План-факт. Перекрывающие столбцы

Для полноценного анализа важны не только сухие фактические значения, но и контекст. Например, сравнение с прошлым периодом или планом. Один из способов показать плановые и фактические значения — с помощью перекрывающих столбцов (overlapping bars). Такую диаграмму еще называют "градусник" или "термометр".

Построим их в FineBI таким образом:
🔹 Как и для всех комбинированных визуализаций, выбираем тип графика Custom Chart. Заполняем оси измерением и мерами (фактическая, плановая). Для обеих мер выбираем отображение в виде Rectangular Block. (Upd. Можно и для одной, как добавлено в этом посте)
🔹 Создаем вычисляемые индикаторы, равные выбранным мерам, но со знаком "минус", и кладем их во вкладку Size. Например, для поля Sales это будет индикатор size_Sales: - SUM_AGG(${Sales})

Остается только подобрать ширину столбцов и выбрать цвет✅

Как сделать визуализацию минималистичнее? Об этом расскажу в следующем посте✌️

#барчарт #градусник #практика

План-факт. Буллетчарт, или пулевая диаграмма

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

Построение в FineBI будет даже проще, чем для предыдущего способа в виде градусника:
🔹 Выбираем тип графика Custom Chart. Заполняем оси измерением и мерами (фактическая, плановая). Для фактической меры выбираем Column Chart, а для плановой — Rectangular Block.
🔹 Создаем вычисляемый индикатор "0" со значением 0 и кладем его в Size для плановой меры.

Готово✅

#буллетчарт #практика

Планирование с помощью диаграммы Ганта

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

Когда у задач в плане есть сроки начала и окончания, их можно представить в виде диаграммы Ганта. Визуализация сделает наглядным скопление проектов одновременно: если задач много, то стоит разнести их во времени. В виде списка такое увидеть сложнее😞

❓Что в теории?
Диаграмма Ганта — это тип столбчатых диаграмм, который используется для представления длительности и последовательности задач в проекте. График был назван в честь Генри Л. Ганта, который представил его в 1910 году.

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

В следующих постах я покажу, как визуализировала свой план обучения, и построим диаграмму Ганта по шагам😉

#гант #теория

Построение диаграммы Ганта

Строить диаграмму будем по инструкции в документации.
Если вы зарегистрированы на сайте Fanruan, из инструкции можно даже выгрузить пример данных в формате .xls и потренироваться. Если аккаунта на сайте вендора нет, тогда понадобится подготовить данные в формате "название задачи — дата начала — дата завершения".

🔹 C помощью функции DATESUBDATE cоздаем числовые вычисляемые поля "Начальная позиция" и "Длительность", которые будут служить координатами точек относительно начала года.

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

🔹 Выбираем Custom Chart, отображение в виде Rectangular Block и наполняем рабочую область, как в документации или на этой картинке.

Столбец dummy ("") в моем графике используется для появления горизонтальных осей, чтобы визуально сопоставлять полосы и названия задач.

Продолжение⬇️
#гант #практика

Визуализация диаграммы Ганта

В качестве заключительных штрихов:
✔️Добавим новый срез данных в виде раскраски по типу задачи
✔️Отсортируем задачи по дате начала: в теме сортировки есть пример
✔️Добавим на полосках подпись дат с помощью новых столбцов, рассчитанных функцией FORMAT()
✔️Добавим линию "Сегодня" с помощью нового столбца, рассчитанного аналогичного столбцу "Начальная позиция", но до даты NOW()
✔️Отредактируем оси и выровняем названия измерений по левому краю, чтобы получился ровный прямоугольник

Идея создания диаграммы Ганта из коробки уже добавлена в реестр FanRuan, а пока будем пользоваться инструкцией из документации✌️

#гант #практика

Соблюдаем принцип ограждения (enclosure)

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

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

В данном случае время промоакций определяется через создание нового индикатора вида IF(Дата промоакции попадает в интервал, 1, null).

❗️Чтобы при наведении на линию, которая находится в слое под выделенной зоной, была видна всплывающая подсказка, нужно добавить галочку Show all tips under dimensions, но в таком случае не будет возможности редактировать текст Prompt.

#uxui #гештальтпринципы

Планирование и анализ с помощью календаря

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

❓Как построить календарь?
Создать расчетное поле "День недели" с помощью функций Switch() и Weekday() и выбрать тип графика Custom Chart, вид Rectangular Block.

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

На картинке — контент-план канала наоборот😄 Из графика видно, что четверг — самый популярный день для публикации. В среднем посты появляются по 2-3 раза в неделю, но явную закономерность отследить сложно.

Открою секрет, что я планирую изменить частоту постов, но об этом на следующей неделе✌️

#календарь #практика

Реальный дашборд FineBI на заводе в Китае

Несколько месяцев назад один из пользователей FineBI-чата поделился находкой — рабочим китайским дашбордом в FineBI.

Это информационная панель на заводе в Гуанчжоу по производству Яндекс-станций "Алиса", которая отображает статистику по производительности, в том числе показатель брака.

Меня воодушевляет мысль, что мы не одиноки во вселенной FanRuan😊

Если кому-то тоже интересно посмотреть, держите ссылку на исходное видео на Youtube.

#chinaviz

Неделя «1 датасет — 5 графиков»

📢 Есть новости!
С сегодняшнего дня я начинаю серию тематических марафонов в формате:
🔹 одна неделя — одна тема
🔹 посты выходят каждый день, кроме выходных

В первую неделю рассмотрим, как по-разному можно визуализировать один датасет, открывая новые стороны для анализа.

Вдохновил меня на эту тему известный проект 1 датасет—100 визуализаций. Это проект, в котором авторы создали 100 графиков из таблицы, состоящей всего из двух строк и трех столбцов. Не все графики эффективно решают задачу наглядного представления данных, зато проект прекрасно демонстрирует возможности визуализации.

100 — это и правда масштабно, но на этой неделе мы не будем идти на рекорд и остановимся на 5 графиках в FineBI. За основу используем видео команды storytellingwithdata на Youtube про скетчинг и выбор графика. В ролике показан процесс зарисовки разных вариантов визуализации одной таблицы, причем каждый график проявляет данные по-разному.

#dataviz #5графиков

Барчарт с группировкой

В первом дне рассмотрим вертикальный барчарт со сгруппированными измерениями.

Цвета в графиках намеренно серые, чтобы не отвлекать внимание от данных — это выручка от проведения разных видов мероприятий по годам.

Чтобы визуально отделить категории друг от друга, я добавила в датасет строки с несуществующими датами и отрицательными значениями, которые отсекаются настройкой оси от 0. (Upd. Начиная с версии 6.0.15 это не требуется)

Для разделения на годы используется столбец даты с гранулярностью Year, но подписью на оси служит дополнительный столбец с формулой: IF(OR(YEAR(${Дата}) = 1900,YEAR(${Дата}) = 2101),  null, "'" + RIGHT(YEAR(${Дата}), 2))

🕵️‍♀️ Этот вид визуализации помогает понять динамику каждой категории, но нам сложно сравнить значения категорий между собой.

Поскольку мы оцениваем высоту столбцов по верхним границам, можно упростить график, соединив верхние точки и оставив только линии.

Такой способ визуализации мы рассмотрим завтра!

#5графиков #барчарт

Линейные мини-графики

🕵️‍♀️ Такой график выглядит менее нагруженно, чем в предыдущем варианте, и тренд для каждого вида мероприятий стал более наглядным. Однако все равно сложно сравнивать значения между собой. Например, как соотносятся выручки свадеб и кейтеринга в 2022 году?

Поэтому завтра построим классический линейный график без разделения на категории.

#5графиков #лайнчарт

Отображение подписи оси

В видео показано, как влияет настройка направления подписи оси по сравнению с дефолтной. При уменьшении ширины компонента подпись не наклоняется, а пропускается при наложении.

#хак #практика