Линейный график
Чтобы создать легенду для показателей, в Color добавлен TargetName (Upd. Начиная с версии 6.0.15 называется IndicatorName), как мы уже делали ранее в этом посте.
🕵️♀️ В линейном графике, отображающем непрерывные данные, можно увидеть общую картину: как в годы пандемии просела выручка всех видов мероприятий и какие из них стали восстанавливаться быстрее с 2021 года.
В то же время из-за того, что линий много, в них сложно ориентироваться, поэтому один из вариантов уменьшения сложности — это сокращение количества отображаемых годов. Рассмотрим такой вариант завтра!
#5графиков #лайнчарт
Чтобы создать легенду для показателей, в Color добавлен TargetName (Upd. Начиная с версии 6.0.15 называется IndicatorName), как мы уже делали ранее в этом посте.
🕵️♀️ В линейном графике, отображающем непрерывные данные, можно увидеть общую картину: как в годы пандемии просела выручка всех видов мероприятий и какие из них стали восстанавливаться быстрее с 2021 года.
В то же время из-за того, что линий много, в них сложно ориентироваться, поэтому один из вариантов уменьшения сложности — это сокращение количества отображаемых годов. Рассмотрим такой вариант завтра!
#5графиков #лайнчарт
👍3
Наклонный график
Его еще называют слоупчартом, слоупграфом или диаграммой наклона. В нем оценивается угол наклона между двумя точками, хотя по сути это тот же линейный график.
В зависимости от направления линии вверх или вниз можно судить о повышении или снижении показателя, а угол наклона отображает величину изменения. Такой тип графика наглядно показывает изменение данных «было-стало» или «до и после»
Для построения слоупчарта на скриншоте:
✔️ преобразована структура данных с помощью опции Column to Row (ссылка на документацию) по аналогии с unpivot в SQL
✔️ фильтром оставлены два года, равные минимальному и максимальному, рассчитанным с помощью DEF
🕵️♀️ Теперь наглядно видно, что выручка по свадьбам значительно выросла, а по праздникам — изменилась незначительно (линия плоская). Тренд будет виден сильнее, если на дашборде уменьшить ширину графика.
До этого мы рассматривали только абсолютные значения, но может, стоит изучить долю каждой категории? Об этом — в завтрашнем посте!
#5графиков #слоупчарт
Его еще называют слоупчартом, слоупграфом или диаграммой наклона. В нем оценивается угол наклона между двумя точками, хотя по сути это тот же линейный график.
В зависимости от направления линии вверх или вниз можно судить о повышении или снижении показателя, а угол наклона отображает величину изменения. Такой тип графика наглядно показывает изменение данных «было-стало» или «до и после»
Для построения слоупчарта на скриншоте:
✔️ преобразована структура данных с помощью опции Column to Row (ссылка на документацию) по аналогии с unpivot в SQL
✔️ фильтром оставлены два года, равные минимальному и максимальному, рассчитанным с помощью DEF
🕵️♀️ Теперь наглядно видно, что выручка по свадьбам значительно выросла, а по праздникам — изменилась незначительно (линия плоская). Тренд будет виден сильнее, если на дашборде уменьшить ширину графика.
До этого мы рассматривали только абсолютные значения, но может, стоит изучить долю каждой категории? Об этом — в завтрашнем посте!
#5графиков #слоупчарт
👍3
Нормированная диаграмма с накоплением
Такой тип визуализации на английском звучит как 100% stacked barchart, т.е. разновидность столбчатой диаграммы с накоплением.
График показывает соотношение долей сегментов между собой по периодам времени, при этом сегменты располагаются друг над другом.
Процентный вклад может быть от 0 до 100%, поэтому фиксируем настройки оси от 0 до 1. Для обозначения будущего периода я не нашла ничего лучше, чем добавить подпись "прогноз" с помощью формулы
Такой график отображает пропорцию выручки для каждого вида мероприятия. Когда в датасете много категорий, как сейчас, важно делать акцент и располагать более важные категории в нижней и верхней частях столбцов, чтобы было легче сравнивать.
🕵️♀️ В данном случае фокус нацелен на увеличение доли свадеб в выручке и уменьшение доли кейтеринга. Остальные категории имеют относительно ровную динамику.
#5графиков #барчарт
Такой тип визуализации на английском звучит как 100% stacked barchart, т.е. разновидность столбчатой диаграммы с накоплением.
График показывает соотношение долей сегментов между собой по периодам времени, при этом сегменты располагаются друг над другом.
Процентный вклад может быть от 0 до 100%, поэтому фиксируем настройки оси от 0 до 1. Для обозначения будущего периода я не нашла ничего лучше, чем добавить подпись "прогноз" с помощью формулы
IF(MIN_AGG(${прогноз}) = 1, "прогноз", null), где значение {прогноз} определяется как ${Дата}> TODAY().Такой график отображает пропорцию выручки для каждого вида мероприятия. Когда в датасете много категорий, как сейчас, важно делать акцент и располагать более важные категории в нижней и верхней частях столбцов, чтобы было легче сравнивать.
🕵️♀️ В данном случае фокус нацелен на увеличение доли свадеб в выручке и уменьшение доли кейтеринга. Остальные категории имеют относительно ровную динамику.
#5графиков #барчарт
Нормированная диаграмма с накоплением (2 способ)
В документации FineBI такой тип графика называется Percentage Stacked Column Chart и по ссылке описан другой способ построения.
В этом варианте не требуется транспонировать столбцы в строки, но нужно создать вычисляемые поля с расчетом доли каждого сегмента.
❓ Будут ли у вас еще идеи визуализации этого датасета? Присылайте в комментарии скрины ваших графиков в FineBI😉
#5графиков #барчарт
В документации FineBI такой тип графика называется Percentage Stacked Column Chart и по ссылке описан другой способ построения.
В этом варианте не требуется транспонировать столбцы в строки, но нужно создать вычисляемые поля с расчетом доли каждого сегмента.
❓ Будут ли у вас еще идеи визуализации этого датасета? Присылайте в комментарии скрины ваших графиков в FineBI😉
#5графиков #барчарт
И еще хочу поделиться интересной подсказкой от лида аналитики в Сбере: выбор графика в зависимости от слов-триггеров заказчика отчетности https://xn--r1a.website/Lady_Analyst/26
#график #теория
#график #теория
Telegram
Госпожа аналитик 💚 Ия Зотова
Кроме основных принципов дизайна дешей (соблюдение сетки и цветовой палитры, не диссонирующего цветового кодирования и др.), я топлю еще и за логику представления данных.
Когда фиксируете требования обращайте внимание на формулировки, которые использует…
Когда фиксируете требования обращайте внимание на формулировки, которые использует…
Что в первую очередь вы видите на левой картинке?
Anonymous Poll
58%
один белый треугольник
42%
три черных обрезанных круга
Соблюдаем принцип замкнутости/завершения образа (closure)
Если вы увидели белый треугольник в предыдущем посте, значит сработал гештальт-принцип замкнутости.
Он заключается в том, что люди склонны заполнять пробелы, чтобы воспринимать объект целиком, поэтому неполные объекты, такие как разорванные круги и квадраты, воспринимаются как замкнутые фигуры.
Таким образом, мы можем уменьшить количество элементов, необходимых для передачи информации, снижая запутанность и делая дизайн более привлекательным. Завершение может помочь нам минимизировать визуальный шум и передать сообщение, усиливая концепцию в довольно небольшом пространстве.
Этот принцип часто используется в дизайне логотипов, но и в визуализации данных его тоже можно применить. Например, когда мы убираем лишнее из графиков и чистим от избыточных элементов: рамочек вокруг графиков, лишних линий, разделителей и т.д. Даже при их отсутствии диаграмма будет восприниматься как целое, зато данные станут заметнее.
#uxui #гештальтпринципы
Если вы увидели белый треугольник в предыдущем посте, значит сработал гештальт-принцип замкнутости.
Он заключается в том, что люди склонны заполнять пробелы, чтобы воспринимать объект целиком, поэтому неполные объекты, такие как разорванные круги и квадраты, воспринимаются как замкнутые фигуры.
Таким образом, мы можем уменьшить количество элементов, необходимых для передачи информации, снижая запутанность и делая дизайн более привлекательным. Завершение может помочь нам минимизировать визуальный шум и передать сообщение, усиливая концепцию в довольно небольшом пространстве.
Этот принцип часто используется в дизайне логотипов, но и в визуализации данных его тоже можно применить. Например, когда мы убираем лишнее из графиков и чистим от избыточных элементов: рамочек вокруг графиков, лишних линий, разделителей и т.д. Даже при их отсутствии диаграмма будет восприниматься как целое, зато данные станут заметнее.
#uxui #гештальтпринципы
Неожиданные результаты опроса
Ситуация вышла из-под контроля😄
Опрос показал, что большинство видит три пак-мана, а не фигуру треугольника:55% против 45%, всего 22 голоса, 14.02 17:00 (мск)
Возможно, это связано с тем, что образ пак-манов слишком знаком или их размер слишком маленький, чтобы образовать узнаваемые границы треугольника.
Поэтому ключ к использованию принципа замкнутости — предоставить пользователю достаточно информации, чтобы он мог «дорисовать» в своем восприятии недостающие элементы. Если информации мало, то элементы будут рассматриваться как отдельные объекты, а не части целого; если ее слишком много, то нет никакой необходимости в том, чтобы в процессе восприятия произошло завершение.
#uxui #гештальтпринципы
Ситуация вышла из-под контроля😄
Опрос показал, что большинство видит три пак-мана, а не фигуру треугольника:
Возможно, это связано с тем, что образ пак-манов слишком знаком или их размер слишком маленький, чтобы образовать узнаваемые границы треугольника.
Поэтому ключ к использованию принципа замкнутости — предоставить пользователю достаточно информации, чтобы он мог «дорисовать» в своем восприятии недостающие элементы. Если информации мало, то элементы будут рассматриваться как отдельные объекты, а не части целого; если ее слишком много, то нет никакой необходимости в том, чтобы в процессе восприятия произошло завершение.
#uxui #гештальтпринципы
А вы знали, что у FanRuan есть документация по визуализации данных?
Про гештальт-принципы, например, написано тут. Как обычно, перевести с китайского поможет встроенный переводчик в браузере. А в Яндекс-браузере можно переводить еще и картинки.
#news #chinaviz
Про гештальт-принципы, например, написано тут. Как обычно, перевести с китайского поможет встроенный переводчик в браузере. А в Яндекс-браузере можно переводить еще и картинки.
#news #chinaviz
Fanruan
格式塔原则- 数据分析与可视化指南
1. 视觉认知的格式塔原则 & 应用如何识别图形中的信号（希望沟通的信息）和噪声（杂乱），我们可以通过「视觉认知的格式塔原则」有效的运用这些原则，通过有序的视觉传达、恰当的使用对比和合适的留白来
👌1
Точка как акцент на линейном графике
Одним из приемов интерактивности является добавление акцента на то, что пользователь выбрал в фильтре.
Например, на линейном графике выбор можно подсветить точкой.
Как я это сделала? Поделюсь в следующем посте✌️
#интерактивность #лайнчарт
Одним из приемов интерактивности является добавление акцента на то, что пользователь выбрал в фильтре.
Например, на линейном графике выбор можно подсветить точкой.
Как я это сделала? Поделюсь в следующем посте✌️
#интерактивность #лайнчарт
Для того, чтобы на линейном графике выделить точкой значения, выбранные в фильтре:
✅ На дашборде отвязываем действие фильтра на компонент
✅ В компоненте:
- создаем параметр и вычисляемое поле вида
- копируем пилюлю с мерой и совмещаем вертикальные оси
- для второго графика выбираем тип Point и перетаскиваем созданный столбец в Color
✅ Возвращаемся на дашборд и привязываем фильтр к параметру
#интерактивность #лайнчарт #практика
Датавиз в BI • Алиса Ручкина
✅ На дашборде отвязываем действие фильтра на компонент
✅ В компоненте:
- создаем параметр и вычисляемое поле вида
IN(Измерение, Параметр)- копируем пилюлю с мерой и совмещаем вертикальные оси
- для второго графика выбираем тип Point и перетаскиваем созданный столбец в Color
✅ Возвращаемся на дашборд и привязываем фильтр к параметру
#интерактивность #лайнчарт #практика
Датавиз в BI • Алиса Ручкина
👍8
Цвет как акцент в барчарте
Для столбчатой диаграммы подойдет раскраска выбранной категории более ярким цветом.
Алгоритм проще, чем для линейного графика — достаточно перетащить созданный столбец вида
#интерактивность #барчарт #цвет
Для столбчатой диаграммы подойдет раскраска выбранной категории более ярким цветом.
Алгоритм проще, чем для линейного графика — достаточно перетащить созданный столбец вида
IN(Измерение, Параметр) в Color.#интерактивность #барчарт #цвет
👍4
Обновления в 6.0.15
На прошлой неделе на Хабре была опубликована статья Александра Ларина (Glowbyte) с обзором новых функций в версиях FineBI 6.0.15 и 6.0.16. Вдохновившись, я установила себе актуальную версию и вот на что я обратила внимание.
В интерфейсе редактирования компонента:
🔹 TargetName переименован в Indicator Name, а функция накопления для показателей Turn on stacking теперь называется Enable stacking
🔹 Во вкладке Component Style для графиков появились опции настройки вспомогательных линий Grid Line и Partition Line, а для графиков и таблиц — настройка внутренних отступов компонента Component Padding
#news
На прошлой неделе на Хабре была опубликована статья Александра Ларина (Glowbyte) с обзором новых функций в версиях FineBI 6.0.15 и 6.0.16. Вдохновившись, я установила себе актуальную версию и вот на что я обратила внимание.
В интерфейсе редактирования компонента:
🔹 TargetName переименован в Indicator Name, а функция накопления для показателей Turn on stacking теперь называется Enable stacking
🔹 Во вкладке Component Style для графиков появились опции настройки вспомогательных линий Grid Line и Partition Line, а для графиков и таблиц — настройка внутренних отступов компонента Component Padding
#news
❤2
Другие обновления в 6.0.15
🔹 Для пайчартов теперь есть готовая кнопка Filled — я добавила ремарку в этот пост.
🔹 Для разграничения групп в барчарте с группировкой больше не требуются "костыли". Теперь пустое пространство между группами столбцов формируется по умолчанию, поэтому я обновила недавний пост. Хочу отметить, что если групп больше 2, эффективнее будет использовать другой тип визуализации.
🔹 При удалении сетки теперь не нужно создавать "костыль" в виде линии Cordon для одной из осей. Начиная с версии 6.0.15 это реализуется снятием галочки в Grid Line, тогда сетка исчезнет, но ось останется (это выделено на скриншоте). Поэтому я добавила ремарку в пост о барчарте.
Пример использования разделительной линии Partition Line приведен в документации в статье о настройках стиля компонента.
В следующем посте рассмотрим паддинги, которые появились в версии 6.0.15. Они заслуживают отдельного внимания✌️
#news #барчарт #пайчарт
🔹 Для пайчартов теперь есть готовая кнопка Filled — я добавила ремарку в этот пост.
🔹 Для разграничения групп в барчарте с группировкой больше не требуются "костыли". Теперь пустое пространство между группами столбцов формируется по умолчанию, поэтому я обновила недавний пост. Хочу отметить, что если групп больше 2, эффективнее будет использовать другой тип визуализации.
🔹 При удалении сетки теперь не нужно создавать "костыль" в виде линии Cordon для одной из осей. Начиная с версии 6.0.15 это реализуется снятием галочки в Grid Line, тогда сетка исчезнет, но ось останется (это выделено на скриншоте). Поэтому я добавила ремарку в пост о барчарте.
Пример использования разделительной линии Partition Line приведен в документации в статье о настройках стиля компонента.
В следующем посте рассмотрим паддинги, которые появились в версии 6.0.15. Они заслуживают отдельного внимания✌️
#news #барчарт #пайчарт
👍3
Коротко о паддингах
Паддинги — это пространство между содержимым компонента и его границами.
Дашборд, состоящий из компонентов с внутренними отступами, выглядит менее перегруженным. Кроме того, пустое место вокруг объекта выделяет его, поэтому внимание пользователя фокусируется на визуализациях.
В дизайне свободное пространство, образующееся между, внутри или вокруг элементов, еще называют негативным пространством или «воздухом».
#uxui #теория
Паддинги — это пространство между содержимым компонента и его границами.
Дашборд, состоящий из компонентов с внутренними отступами, выглядит менее перегруженным. Кроме того, пустое место вокруг объекта выделяет его, поэтому внимание пользователя фокусируется на визуализациях.
В дизайне свободное пространство, образующееся между, внутри или вокруг элементов, еще называют негативным пространством или «воздухом».
#uxui #теория
🔥2
Рассмотрим паддинги на конкретном примере
Расстояние от графика до границ компонента регулируется изменением значений в настройках Component Padding. Замочек нужен, чтобы изменять отступ сразу для двух противоположных сторон.
Однако есть одна особенность — на данный момент при изменении верхнего паддинга изменяется расстояние между заголовком графика и визуализацией. Таким образом, при увеличении отступа они расходятся друг от друга и не соблюдается правило близости. Поэтому я добавила идею в сервис развития FineBI, чтобы этот отступ регулировал расстояние от верхней границы компонента, а не от заголовка.
#uxui #news
Расстояние от графика до границ компонента регулируется изменением значений в настройках Component Padding. Замочек нужен, чтобы изменять отступ сразу для двух противоположных сторон.
Однако есть одна особенность — на данный момент при изменении верхнего паддинга изменяется расстояние между заголовком графика и визуализацией. Таким образом, при увеличении отступа они расходятся друг от друга и не соблюдается правило близости. Поэтому я добавила идею в сервис развития FineBI, чтобы этот отступ регулировал расстояние от верхней границы компонента, а не от заголовка.
#uxui #news
👍4