Что такое пузырьковая диаграмма Bubble chart?

Библиотека FastReport Business Graphics содержит набор классов, которые разработчики могут использовать в своих приложениях для наглядной визуализации данных и построения бизнес-диаграмм. В этой статье мы рассмотрим один из этих классов - диаграмму Bubble.

Имеет смысл начать обзор диаграммы Bubble со сравнения с другими подобными диаграммами, входящими в состав библиотеки FastReport Business Graphics. Основная цель всех этих диаграмм - показать наглядно величины, уровни вложенности иерархии и позволить пользователю интерактивно манипулировать видом представляемых данных для достижения нужного варианта отображения. Такие диаграммы являются инструментами интерпретации данных парадигмы Business Intelligence. В результате использования этих инструментов может быть принято какое-либо бизнес-решение или сформированы выводы для последующего анализа.

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

TreeMap

Icicle

Sunburst

Bubble

Величины интерпретируются в виде площади визуализируемого объекта. Человеку проще оценивать объекты круглой формы. Например, в первой диаграмме TreeMap сравнение площадей прямоугольников "The United States" и "China" сильно затрудняется разными размерами по высоте и ширине. В диаграмме Icicle эти величины очень похожи между собой также, как и в диаграмме Sunburst. В диаграмме Bubble эти величины заметно отличаются и сразу становится понятно, что оранжевый круг немного больше.

Человек обладает бинокулярным зрением, которое помогает ему оценить размеры и расстояния до объектов. Это все хорошо работает в окружающем нас трехмерном мире, но при использовании проекций на монитор или лист бумаги бинокулярное зрение может сыграть с нами злую шутку. Мы начинаем использовать такие понятия как "глазомер" и полагаться на свои ощущения. Размеры объектов оцениваются наиболее точно именно в той области, куда нацелен взгляд. Любые другие объекты, воспринимаемые периферийным зрением, не поддаются точной оценке их размеров. Также важен зрительный угол - смещение взгляда относительно направления головы. Расстояние до глаз будет разным и это будет влиять на правильную оценку размеров. Цветовая палитра и контрастность также играют большую роль в правильном восприятии размеров.

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

Возможности диаграммы Bubble не ограничиваются сравнением простого списка величин. Также, как и другие диаграммы из набора FastReport Business Graphics, эта диаграмма может визуализировать иерархические данные в виде веерообразных срезов величин на одном уровне иерархии.

Диаграмма Bubble является интерактивной. При наведении курсора на тот или иной круг, появляется всплывающая подсказка с информацией об отображаемой величине. Кликом можно выделить нужный круг. Двойной клик выполняет операцию drill-down, где диаграмма отображает информацию о подчиненных объектах иерархии. Двойной клик по области текущей иерархии вернет отображение к предыдущему уровню.

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

Компоновка кругов на диаграмме формируется алгоритмом автоматически. Круги компонуются вокруг центра диаграммы по убыванию величины.

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

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

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

Теперь предлагаю кратко рассмотреть алгоритм формирования диаграммы Bubble. Принцип упаковки кругов базируется на алгоритме Grokker. Для каждого уровня иерархии вложенных структур работает свой собственный экземпляр упаковщика. При визуализации круги масштабируются до нужного размера.

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

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

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

При работе с диаграммой Bubble следует особое внимание уделить исходным данным. Количество значений на одном уровне иерархии не должно быть слишком большим. В противном случае восприятие построенной диаграммы может быть затруднено. Также следует применить предварительную группировку малых величин для их объединения в одно значение (например: "Другие"). При настройке свойства максимальной отображаемой глубины также стоит ограничиться одним или двумя уровнями для улучшения восприятия диаграммы.

Перед заданием цветовых параметров и свойств диаграммы стоит вспомнить о цели, для которой диаграмма формируется. Цвет часто может упростить восприятие тех или иных значений. При выборе цветовой палитры обратите внимание на контрастность цветовых значений, не стоит сочетать в одной диаграмме очень насыщенные цвета и блеклые. Также стоит избегать слишком темных цветов при отображении (печати) диаграммы на светлом фоне. Это справедливо и для малоконтрастных цветов по отношению к цвету фона. Использование штриховок в заливках может затруднить восприятие размеров.

Диаграмма Bubble показала себя с хорошей стороны как простой инструмент наглядной визуализации и может быть использована в приложениях в качестве одного из инструментов Business Intelligence наравне с другими компонентами из библиотеки FastReport Business Graphics. Пример использования диаграммы можно посмотреть в комплекте поставки продукта в папке \Demos\C#\MainDemo.

Желаю всем много красивых и полезных диаграмм!