Другие примеры ограждения
Принцип ограждения можно применить не только для выделения областей, но и для разделения зон графика.
Например, это могут быть годовые отрезки для быстрого ориентирования на протяженной оси времени. Для этого достаточно в горизонтальной оси скопировать пилюлю даты и выбрать гранулярность Year для первой по порядку пилюли.
Другим примером разделения является нулевая горизонтальная ось в визуализации показателей, принимающих не только положительные, но и отрицательные значения. Ось добавляется в виде Cordon Analysis line.
#uxui #гештальтпринципы
Принцип ограждения можно применить не только для выделения областей, но и для разделения зон графика.
Например, это могут быть годовые отрезки для быстрого ориентирования на протяженной оси времени. Для этого достаточно в горизонтальной оси скопировать пилюлю даты и выбрать гранулярность Year для первой по порядку пилюли.
Другим примером разделения является нулевая горизонтальная ось в визуализации показателей, принимающих не только положительные, но и отрицательные значения. Ось добавляется в виде Cordon Analysis line.
#uxui #гештальтпринципы
👍1
Планирование и анализ с помощью календаря
В FineBI можно реализовать даже аналог ежедневника, чтобы помнить обо всех делах и не пропустить дедлайн. Для этого используется график вида "Календарь". Он поможет визуализировать даты будущих событий. Кроме того, в нем можно отобразить фактические данные прошлого.
❓Как построить календарь?
Создать расчетное поле "День недели" с помощью функций
🥳 Кстати, прошло 2 месяца с даты первой публикации в канале, и это приятный повод, чтобы оглянуться назад и посмотреть, какой путь уже проделан.
На картинке — контент-план каналанаоборот😄 Из графика видно, что четверг — самый популярный день для публикации. В среднем посты появляются по 2-3 раза в неделю, но явную закономерность отследить сложно.
Открою секрет, что я планирую изменить частоту постов, но об этом на следующей неделе✌️
#календарь #практика
В FineBI можно реализовать даже аналог ежедневника, чтобы помнить обо всех делах и не пропустить дедлайн. Для этого используется график вида "Календарь". Он поможет визуализировать даты будущих событий. Кроме того, в нем можно отобразить фактические данные прошлого.
❓Как построить календарь?
Создать расчетное поле "День недели" с помощью функций
Switch() и Weekday() и выбрать тип графика Custom Chart, вид Rectangular Block.🥳 Кстати, прошло 2 месяца с даты первой публикации в канале, и это приятный повод, чтобы оглянуться назад и посмотреть, какой путь уже проделан.
На картинке — контент-план канала
Открою секрет, что я планирую изменить частоту постов, но об этом на следующей неделе✌️
#календарь #практика
❤4👍2
Реальный дашборд FineBI на заводе в Китае
Несколько месяцев назад один из пользователей FineBI-чата поделился находкой — рабочим китайским дашбордом в FineBI.
Это информационная панель на заводе в Гуанчжоу по производству Яндекс-станций "Алиса", которая отображает статистику по производительности, в том числе показатель брака.
Меня воодушевляет мысль, что мы не одиноки во вселенной FanRuan😊
Если кому-то тоже интересно посмотреть, держите ссылку на исходное видео на Youtube.
#chinaviz
Несколько месяцев назад один из пользователей FineBI-чата поделился находкой — рабочим китайским дашбордом в FineBI.
Это информационная панель на заводе в Гуанчжоу по производству Яндекс-станций "Алиса", которая отображает статистику по производительности, в том числе показатель брака.
Меня воодушевляет мысль, что мы не одиноки во вселенной FanRuan😊
Если кому-то тоже интересно посмотреть, держите ссылку на исходное видео на Youtube.
#chinaviz
Неделя «1 датасет — 5 графиков»
📢 Есть новости!
С сегодняшнего дня я начинаю серию тематических марафонов в формате:
🔹 одна неделя — одна тема
🔹 посты выходят каждый день, кроме выходных
В первую неделю рассмотрим, как по-разному можно визуализировать один датасет, открывая новые стороны для анализа.
Вдохновил меня на эту тему известный проект 1 датасет—100 визуализаций. Это проект, в котором авторы создали 100 графиков из таблицы, состоящей всего из двух строк и трех столбцов. Не все графики эффективно решают задачу наглядного представления данных, зато проект прекрасно демонстрирует возможности визуализации.
100 — это и правда масштабно, но на этой неделе мы не будем идти на рекорд и остановимся на 5 графиках в FineBI. За основу используем видео команды storytellingwithdata на Youtube про скетчинг и выбор графика. В ролике показан процесс зарисовки разных вариантов визуализации одной таблицы, причем каждый график проявляет данные по-разному.
#dataviz #5графиков
📢 Есть новости!
С сегодняшнего дня я начинаю серию тематических марафонов в формате:
🔹 одна неделя — одна тема
🔹 посты выходят каждый день, кроме выходных
В первую неделю рассмотрим, как по-разному можно визуализировать один датасет, открывая новые стороны для анализа.
Вдохновил меня на эту тему известный проект 1 датасет—100 визуализаций. Это проект, в котором авторы создали 100 графиков из таблицы, состоящей всего из двух строк и трех столбцов. Не все графики эффективно решают задачу наглядного представления данных, зато проект прекрасно демонстрирует возможности визуализации.
100 — это и правда масштабно, но на этой неделе мы не будем идти на рекорд и остановимся на 5 графиках в FineBI. За основу используем видео команды storytellingwithdata на Youtube про скетчинг и выбор графика. В ролике показан процесс зарисовки разных вариантов визуализации одной таблицы, причем каждый график проявляет данные по-разному.
#dataviz #5графиков
👍2
Барчарт с группировкой
В первом дне рассмотрим вертикальный барчарт со сгруппированными измерениями.
Цвета в графиках намеренно серые, чтобы не отвлекать внимание от данных — это выручка от проведения разных видов мероприятий по годам.
Чтобы визуально отделить категории друг от друга, я добавила в датасет строки с несуществующими датами и отрицательными значениями, которые отсекаются настройкой оси от 0. (Upd. Начиная с версии 6.0.15 это не требуется)
🕵️♀️ Этот вид визуализации помогает понять динамику каждой категории, но нам сложно сравнить значения категорий между собой.
Поскольку мы оцениваем высоту столбцов по верхним границам, можно упростить график, соединив верхние точки и оставив только линии.
Такой способ визуализации мы рассмотрим завтра!
#5графиков #барчарт
В первом дне рассмотрим вертикальный барчарт со сгруппированными измерениями.
Цвета в графиках намеренно серые, чтобы не отвлекать внимание от данных — это выручка от проведения разных видов мероприятий по годам.
Чтобы визуально отделить категории друг от друга, я добавила в датасет строки с несуществующими датами и отрицательными значениями, которые отсекаются настройкой оси от 0. (Upd. Начиная с версии 6.0.15 это не требуется)
Для разделения на годы используется столбец даты с гранулярностью Year, но подписью на оси служит дополнительный столбец с формулой: IF(OR(YEAR(${Дата}) = 1900,YEAR(${Дата}) = 2101), null, "'" + RIGHT(YEAR(${Дата}), 2))🕵️♀️ Этот вид визуализации помогает понять динамику каждой категории, но нам сложно сравнить значения категорий между собой.
Поскольку мы оцениваем высоту столбцов по верхним границам, можно упростить график, соединив верхние точки и оставив только линии.
Такой способ визуализации мы рассмотрим завтра!
#5графиков #барчарт
Линейные мини-графики
🕵️♀️ Такой график выглядит менее нагруженно, чем в предыдущем варианте, и тренд для каждого вида мероприятий стал более наглядным. Однако все равно сложно сравнивать значения между собой. Например, как соотносятся выручки свадеб и кейтеринга в 2022 году?
Поэтому завтра построим классический линейный график без разделения на категории.
#5графиков #лайнчарт
🕵️♀️ Такой график выглядит менее нагруженно, чем в предыдущем варианте, и тренд для каждого вида мероприятий стал более наглядным. Однако все равно сложно сравнивать значения между собой. Например, как соотносятся выручки свадеб и кейтеринга в 2022 году?
Поэтому завтра построим классический линейный график без разделения на категории.
#5графиков #лайнчарт
🔥1
Линейный график
Чтобы создать легенду для показателей, в 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