1. Настроить подписи категорий рядом с метками данных.
2. Удалить легенду, которая будет дублировать информацию в подписях данных.
3. Настроить внутренний радиус (для кольцевой диаграммы).
4. Отредактировать название диаграммы.
В конце мы разберем пару дополнительных опций и типовых ошибок.
Пошаговое руководство для круговой и кольцевой диаграммы
Шаг 1. Настроить метки данных
В отличие от столбчатых диаграмм, на круговой метки данных появились сразу, и включать их не нужно. Но на рисунке 4–2 вы видите, что они показывают и абсолютные, и процентные значения. Мы понимаем, что бывает важно видеть и то, и другое, но с точки зрения визуализации следует расставить приоритеты. В противном случае, при попытке показать “все и сразу” не будет видно ничего.
Не удивляйтесь, если вы не увидите пункт Метки данных в опциях визуального форматирования. Здесь он называется Метки подробностей (Detail labels).
На рисунке 4–3 показаны варианты Содержания метки (Label contents) в выпадающем меню:
* Категория – отображает только название категории.
* Значение данных – отображает только числовой показатель (в нашем случае факт продаж).
* Процент от общего – отображает долю сегмента
в общем объеме. Обычно это – самый важный аспект круговой диаграммы.
Далее следуют различные комбинации этих элементов.
Пользователя отчета в первую очередь интересует структура. Поэтому, мы советуем выбрать вариант Категория + Процент от общего. Категорию важно показывать рядом с числовым значением, а не уносить в легенду, чтобы облегчить восприятие данных. В случае с легендой пользователь вынужден соотносить маленькие цветные точки в легенде с цветами сегментов диаграммы и всегда держать в голове название категории, когда он видит числовое значение. Это неудобно.
Рисунок 4–3. Варианты меток подробностей (меток данных).
Перейдем к подписям значений (рисунок 4–4) и настроим их по тому же алгоритму, что и в столбчатой диаграмме:
* Выставляем размер шрифта 12 пт. Если при этом названия категорий или метки данных помещаются не полностью (обрезаются), то уменьшить шрифт 9-11 пт.
* Единицы измерения оставляем Авто или Нет, так как данные представлены в процентах. Если для других задач вы будете выбирать отображение значений данных, то на них будут действовать такие же правила по настройке единиц измерения, как для столбчатых диаграмм.
* В Десятичных разрядах для процентов указываем 0 или 1. 2 и более знаков после запятой для процентов не будет нести большого смысла.
Рисунок 4–4. Значения меток подробностей.
Шаг 2. Отключить легенду
Названия категорий теперь размещаются рядом с сегментами, а легенда их дублирует. Соответственно, в ней нет необходимости и нам следует отключить этот элемент (также, как в столбчатых диаграммах при настроенных метках данных мы поступили с осью Y). Обратим ваше внимание, что легенда в настройках круговой диаграмме называется Условные обозначения.
Шаг 3. Настроить внутренний радиус
При работе с кольцевой диаграммой первые два шага идентичны. Дополнительно добавляется настройка внутреннего радиуса, который влияет на размер пустого пространства в центре диаграммы. Развернем раздел Срезы и пункт Интервал в нем (рисунок 4–5).
По умолчанию радиус внутреннего круга составляет 60 %. Не советуем его увеличивать. На рисунке 4–5 слева показан вариант с радиусом 80 %. На нем сама визуализация стала слишком тонкой, а доминирующее пустое пространство переключает на себя внимание и читателю сложно сфокусироваться на данных. Мы рекомендуем оставить радиус по умолчанию или уменьшить его до 50 % (рисунок 4–5 справа). Так диаграмма будет выглядеть сбалансированно.
Рисунок 4–5. Кольцевая диаграмма с радиусом 80 % (слева) и 50 % (справа).
Шаг 4.Отредактировать название диаграммы
Этот шаг характерен для любого типа диаграмм (мы обсуждали его в главе 1 в разделе "Анатомия диаграмм/ Заголовок диаграммы"). Для настройки заголовка перейдите на вкладку Общие, выберите Заголовок и введите лаконичное название в параметре Текст. Например, вместо "Сумма факта продаж по странам" вы можете указать "Факт продаж по странам".
Типовые ошибки
Круговая диаграмма довольно проста в построении, и иногда хочется добавить в нее какую то фичу, изюминку. Но обычно такие эксперименты терпят неудачу. На классических визуализациях старайтесь следовать подходу “одна мысль – одна диаграмма”. Как работать с комплексными данными мы расскажем во второй части книги “Продвинутая визуализация”.
Ошибка 1. Поворот
Поворот (Rotation) – это последний параметр на панели настройки визуализации, который есть как у круговых, так и у кольцевых диаграмм.
По умолчанию диаграмма сортируется по убыванию – от большего числового показателя к наименьшему, а первый сектор начинается с 0° (как циферблат часов начинается с 12). Это – традиционный способ представления структурных данных.
Вы, конечно, можете проявить творческий подход и изменить начальную точку отсчета, например, на 90°, как показано слева на рисунке 4–6. В этом случае на первом месте окажется Germany, затем France и, наконец, USA с наибольшей долей. Однако, это вызовет вопросы о принципе сортировки, особенно у сегментов с незначительной разницей (Germany и France). Точно также может произойти, если вы решите отсортировать сегменты не по числовому значению, а, например, в алфавитном порядке категорий. Это значительно усложнит восприятие данных. Поэтому, в круговых диаграммах всегда оставляйте угол поворота по умолчанию 0° и сортировку по числовому показателю.
Рисунок 4–6. Ротация на 90° вызывает вопросы к сортировке данных (слева) и угол поворота по умолчанию 0° (справа).
Ошибка 2. Детали (иерархический вид)
В начале главы, когда мы создавали круговую диаграмму, мы разместили данные в полях Условные обозначения и Значения (рисунок 4–2). Однако, необходимо рассмотреть еще одно поле – Подробнее (Details). Оно позволяет создавать иерархическое представление. На рисунке 4–7 мы видим структуру продаж по категориям: каждая категория обозначена своим цветом. Внутри категории разделены на более мелкие сегменты – подкатегории.
Рисунок 4–7. Неупорядоченное представление иерархических данных.
Мы понимаем, что обычная круговая диаграмма может показаться слишком простой, и кому-то захочется добавить в нее больше информации. Но, как мы видим, при добавлении деталей диаграмма становится перегруженной – слишком узкие сегменты, много подписей данных и часть из них сокращается или не отображаться совсем. К тому же, сегменты подкатегорий внутри категорий можно отсортировать только в алфавитном порядке, что не позволяет анализировать информацию должным образом.
Такое представление может быть эффективным только в том случае, если каждая категория содержит 2–3 категории, не больше. Мы могли бы создать такой учебный пример, но на практике с подобным сценарием мы не сталкивались. Второй уровень иерархии всегда содержит более 10 элементов, и они не помещаются на круговой или кольцевой диаграмме. Для этих целей существуют другие типы диаграмм, которые мы рассмотрим в следующих главах.
Резюме
Круговая и кольцевая диаграммы имеют одинаковый смысл – визуализируют структуру для небольшого числа категорий (обычно не больше 6). Диаграммы строятся по одинаковым параметрам и отличаются только тем, что кольцевая имеет пустое пространство внутри. У них нет осей Х и Y и для их настройки достаточно сделать 4 простых шага.
Чек-лист для круговой / кольцевой диаграммы
1. Настроить метки данных: категория и процент от общего.
2. Удалить легенду, которая дублирует информацию в метках данных.
3. Настроить внутренний радиус (для кольцевой диаграммы).
4. Отредактировать название диаграммы.
Помимо этих настроек есть еще 2 параметра с которыми нужно быть осторожными:
* Поворот. Всегда оставляйте угол поворота по умолчанию 0° (другими словами на 12 часов).
* Детали. Мы не рекомендуем добавлять подкатегории внутри секторов диаграммы. С ними она становится перегруженной, а подкатегории – неупорядоченными.
Скачать pbix файл с настроенными визуалами
Глава 5. Тримап
Для отображения структуры в нашей азбуке визуализации есть еще один визуал – тримап (от англ. treemap – диаграмма дерева). Если раньше на секторы мы нарезали круг, то теперь это прямоугольник. Благодаря тому, что мы заполняем данными всю область диаграммы, на тримап помещается больше элементов, чем на круговой диаграмме. На рисунке 5–1 вы видите структуру продаж по подкатегориям.
Рисунок 5–1. Тримап для одного уровня подкатегории.
Но какое отношение это имеет к деревьям? Изначально тримап применялся к иерархическим данным, имеющим древовидную структуру. Каждая ветвь этого "логического дерева" представлена прямоугольником, который затем делится на меньшие прямоугольники, чтобы показать подветви. В конце предыдущей главы мы не рекомендовали заполнять поле Детали и вводить подкатегории для круговой диаграммы, поскольку это перегружает ее информацией (рисунок 4–7). Трипам же можно использовать для такой задачи. На рисунке 5–2 видно, что примерно ⅔ продаж приходится на аксессуары, и это дает представление о доле каждой подкатегории.
Рисунок 5–2. Тримап для иерархии.
Пропорции прямоугольников (высота и ширина) подбираются автоматически исходя из размера области диаграммы. Некоторые элементы могут оказаться квадратными, другие вытянутыми по горизонтали или вертикали.
В этом заключается слабое место тримапа. Если сектор узкий по горизонтали, то метка данных уже не поместится, а от подписей категории останутся только первые буквы. На рисунке 5–3 мы вдвое сократили область диаграммы, и меток данных для подкатегорий почти везде пропали.
Но это не то, чтобы недоработка тримапа – так будет с любой визуализацией, которой вы задаете мало места и в то же время пытаетесь показать много данных.
Рисунок 5–3. Проблема со «скрытыми» метками данных.
Построить тримап также просто, как и круговую диаграмму. Начнем с одноуровневого примера: поместите Продажи факт в поле Значений, которое определяет площадь прямоугольника, а Подкатегория продукта в поле Категория. В случае одноуровневой диаграммы вы также можете поместить поле для категории в поле Детализация – в любом случае, у вас получится разноцветный «ковер» как показано на рисунке 5–4.
Рисунок 5–4. Тримап с дефолтными настройками.
Если вы хотите построить диаграмму с группировкой, как на рисунке 5–2, то в поле Категория нужно поместить Категорию продукта, а Подкатегорию продукта перенести в поле детализации или убрать ее и оставить только три разноцветных "кирпичика".
Перейдем к настройке форматирования. Что мы хотим улучшить в дефолтной версии диаграммы (рисунок 5–4)? Во-первых, мы должны добавить метки данных. Без них сложно визуально оценить долю даже самых крупных товаров. Tires and tubes составляют 20 % или 30 % от объема продаж? Доля Road bikes составляет 10 % или 20 %? Во-вторых, диаграмма выглядит слишком яркой, а некоторые секторы настолько светлые, что белый текст на них читается с трудом.
В этом руководстве будет всего несколько шагов, аналогичных тем, что выполняются для круговых диаграмм. Кроме того, мы покажем вам некоторые новые возможности.
Пошаговое руководство для тримапа
Шаг 1. Настроить метки данных
Включаем Метки данных и настраиваем их так, чтобы они были читаемыми и визуально привлекательными. В нашем случае мы увеличили размер шрифта, сделали его жирным и сохранили белый цвет. В вашем случае настройки могут быть другими, например, можно изменить шрифт на Segoe UI Semibold, а размер выставить 10–11 пт. Главное, чтобы значения были как можно заметнее. Нужно иметь ввиду, что если метки не умещаются по размеру в свои сегменты, они не будут отображаться (как это произошло в примере на рисунке 5–5 у сегментов в правом нижнем углу).
Рисунок 5–5. Метки данных для одноуровневого тримапа.
В случае с иерархиями ситуация гораздо сложнее – метка данных объединяется
с подписью подкатегории и занимаем значительно больше места (рисунок 5–6). Наша задача снова заключается в том, чтобы найти идеальное соотношение между читабельностью и размером. Здесь возможны варианты уменьшения шрифта до 9 пт, но обязательно с применением жирного или полужирного шрифта.
Рисунок 5–6. Метки данных для двухуровневого тримапа.
Шаг 2. Изменить тип меток данных (отобразить доли)
Часто в отображении структуры важнее видеть не абсолютный показатель, а долю, которую составляет каждая категория от общего. Если в круговой диаграмме мы могли выбрать один или несколько типов отображаемых меток данных (категория, значение, доля) из выпадающего списка в настройках меток данных, то в тримапе такой опции нет. Здесь мы можем работать отдельно с метками данных исходного поля (в нашем случае это факт продаж в деньгах) и подписью категорий. Как настраивать подписи категорий мы разберем в следующем шаге, а сейчас посмотрим, как же нам изменить тип значений, не вводя при этом дополнительные поля и меры.
В строке значений, там, где сейчас располагается поле Продажи факт, вы видите приставку “Sum of”. Это тип агрегации, который Power BI автоматически выставляет числовым значениям, но мы можем с ним работать. Для этого необходимо нажать на стрелку как показано на рисунке 5–7. В выпадающем списке вы увидите все возможные варианты. Чтобы решить нашу задачу, нам нужно выбрать Показать значение как (Show value as), а затем Процент от общей суммы (Percent of grand total). Теперь значения будут отображаться в процентах от общей суммы. Запомните эту опцию, она пригодится вам в будущем.
Рис 5–7. Настройка режима отображения значений.
В настройках процентных меток данных важно сбросить настройку единиц измерения до Авто или Нет, если вы изменяли ее до этого вручную. Следующим шагом добавьте 1 знак после запятой (рисунок 5–8), если исходная постановка заказчика не требует другого. В результате этих действий мы уменьшили размер подписей данных и, соответственно, читать диаграмму стало легче. При этом, если вам важно видеть здесь и процентные, и абсолютные показатели, вторые вы всегда можете посмотреть во всплывающей подсказке при наведении на какую-либо долю.
Рисунок 5–8. Десятичные знаки для процентных показателей.
Этот шаг не является обязательным. В зависимости от поставленной задачи мы будем настраивать отображение типов меток данных в абсолюте или проценте, но если мы сами решаете, что как будет лучше – мы рекомендуем показывать проценты.
Шаг 3. Настроить метки категорий
Мы изменяем названия категорий, придерживаясь единых правил и стандартов, чтобы сделать их хорошо читаемыми и заметными. К сожалению, как мы уже говорили, даже при самом маленьком размере шрифта последние категории останутся незаметными, если их слишком много. Однако прочитать ключевые категории мелким шрифтом будет непросто. Решите, какой цвет и размер шрифта лучше всего подходит для ваших конкретных обстоятельств.
У вас также есть вариант отключить подписи категорий, если они совсем не умещаются и добавить сверху легенду, но это не лучший вариант – легенда в структурных диаграммах (круговых и тримапе) усложняет восприятие и заставляет читателя “бегать глазами”, чтобы сопоставлять наименования и соответствующие доли. Лучше подберите другой тип диаграммы.
Шаг 4. Настроить цвета
Тримап, содержащий множество категорий, почти всегда выглядит как разноцветный попугай. Самое простое решение этой проблемы, хотя и часто трудоемкое – вручную изменить цвета в меню Цвета (Colors), как показано на рисунке 5–9.
Рисунок 5–9. Параметры цвета.
Другой вариант – использовать Дополнительные элементы управления (Advanced controls) и задать правила настройки цвета, например, градиентную растяжку. Разберем, как это сделать. При нажатии кнопки f(x) (рисунок 5–9) открывается всплывающее окно (рисунок 5-10) со следующими параметрами:
* Стиль формата. Здесь по умолчанию выбран Градиент и мы его оставляем. Другие возможные варианты – настройка по правилам и по выбранному полю. Мы рассмотрим их в главе про таблицы.
* Какое поле мы должны взять за основу? Здесь автоматически выставляется поле числового показателя, на котором построена диаграмма. В нашем случае изменять его не нужно, но часто бывают ситуации, когда форматирование настраивается по дополнительному полю. Тогда мы раскрываем список полей и находим нужное.
* Тип агрегации (Summarization) – позволяет применить к выбранному полю разные автоматические расчеты. Мы оставляем Sum.
* Как форматировать пустые значения (How should we format empty values?). Бывают ситуации, когда в исходных данных строки значений пустые (не 0, а именно “Пусто”). Здесь можно выбрать как мы хотим их видеть. В случае с тримапом такие значения вообще не будут попадать на диаграмму, но в таблице, например, они будут отображаться. По умолчанию они будут форматироваться как 0 (который, в зависимости от диапазона значений, попадает в определенный цвет по шкале внизу). Но, в большинстве задач, пустые значения не требуют форматирования. Для этого есть соответствующая строка Не форматировать (Do not format).
* Минимум – самый светлый цвет. Можно оставить автоматическое определение минимального значения из набора данных или выставить значение вручную. Цвет задан по умолчанию примененной темой, но мы можем его изменить.
* Максимум – самый темный цвет. То же самое, что для минимума.
* Добавить средний цвет (Add a middle color). Если растяжки одного цвета не хватает или хочется добавить другие оттенки, можно нажать эту галочку и между минимум и максимумом появится еще одно поле с настройкой значения и цвета.
Рисунок 5-10. Окно всплывающего меню для настройки градиента.
Мы оставили все настройки как они есть по умолчанию (рисунок 5-11). Все цвета, кроме самых крупных блоков слишком светлые и вся правая часть сливается в одно целое. К тому же, перестали читаться подписи, настроенные ранее контрастным белым.
Рисунок 5-11. Градиент тримапа, полученный по умолчанию.
Чтобы сделать тримап ярче, мы изменим цвета для градиента. Вместо растяжки от светло-голубого к синему, мы выставим цвета на 2–3 оттенка темнее (рисунок 5-12). Минимальный цвет нужно задавать таким, чтобы метки данных на нем оставались читаемыми.
Рисунок 5-12. Тримап с градиентом и выделением более ярких цветов.
