Древовидная карта: визуализация сложных иерархий


30.09.2019 Время чтения - 7 минут 1350

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

Для древовидных карт важны два типа информации: (1) значение отдельных точек данных; (2) структура иерархии.

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

A hierarchy showing four levels of the S&P 500
Иерархическая древовидная диаграмма, показывающая структуру прямоугольника S&P 500. Данная структура – основой древовидной карты, показанной ниже.
Four views of the same S&P 500 treemap, with four levels of the hierarchy of the data set highlighted
Карта рынка FinViz использует древовидную структуру данных S&P 500, изображенного выше. Элементы, окрашенные в желтый цвет и помеченные как (A), (B), (C), (D), соответствуют элементам, помеченным этими буквами на схеме выше. (A) – весь S&P 500 и является корнем древа. Прямоугольник (B) – сектор технологий, а в нём меньший прямоугольник – коммуникационное оборудование (C). Наконец, в прямоугольнике коммуникационного оборудования все меньшие прямоугольники представляют отдельные компании в этом секторе, такие как Cisco Systems (D), Qualcomm и т.д. Цвет каждого прямоугольника показывает рост акций – яркий красный цвет указывает на большой сдвиг вниз, а яркий зеленый – наоборот.
Two zoomed in images of a treemap, with the relative sizes of items shown, to compare their quantitative size
Размер каждого прямоугольника визуализирует стоимость акции, отрасли или сектора. На самом низком уровне иерархии (отдельные компании) Google (E) имеет рыночную капитализацию больше, чем Facebook (F), и поэтому их прямоугольники соответствуют их размеру. На уровень выше в иерархии (Промышленность) всей категории интернет-провайдеров (G) больше, чем прикладного ПО (H), что отлично показывают соответствующие им прямоугольники.

Назначение древовидных карт

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

Древовидные карты часто используются для данных о продажах, так как они отражают относительные размеры категорий данных, что позволяет быстро воспринимать элементы, которые вносят большой вклад в каждую категорию. Вот почему карта рынка FinViz – эталонный пример древовидной карты: она позволяет быстро идентифицировать компании, которые работают лучше.

Древовидные карты хорошо работают, когда данные измеряются по двум основным параметрам:

  1. Положительное значение, которое будет отображаться в качестве площади прямоугольника (поскольку область не может быть отрицательной, на древовидных картах нельзя визуализировать таких переменные, как прибыль/убыток, которые могут иметь как положительные, так и отрицательные значения.)
  2. Категориальное или второе количественное значение, выражаемое цветом отдельных прямоугольников. Настоятельно рекомендуется использовать только один цвет для выражения количественного значения (если все числа положительные), и два цвета для отрицательного и положительного соответственно, изменяя интенсивность цвета для выражения точного значения. НЕ РЕКОМЕНДУЕТСЯ использовать несколько цветов для представления диапазона чисел.
An overly colorful treemap
Плохой пример использования цвета: несколько разных цветов используются, чтобы показать процент населения старше 65 лет в различных регионах Европы. Каждый цвет указывает на различный процентный диапазон (синим цветом отмечены нижние диапазоны, желтым — средний, красным — высокий). К сожалению, нет универсального обозначения того, что синего меньше, чем жёлтого или красного. Было бы лучше, если бы интенсивность одного цвета отображалась в процентах.

Независимо от того, как вы используете цвет в своей карте, сделайте следующее приспособление для людей с дальтонизмом:

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

A version of the S&P 500 treemap as shown in a color blindness simulator
(Слева) Карта рынка FinViz использует красный и зеленый цвета для отображения изменения стоимости акций (зеленый – высшее значение, красный – низшее). (Справа) Та же карта, только с фильтром дейтеранопии: красный и зеленый трудно различить. В этом дизайне некоторые прямоугольники содержат альтернативную реплику: например, прямоугольник AMZN вверху в центре помечен знаком «+1,28%», что информирует о том, что цена выросла.

Вот еще несколько рекомендаций по созданию хороших древовидных карт:

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

A hover state with a clear border and popup window with additional details
Хороший пример использования чёткой границы вокруг выбранного раздела FinViz вместе с дополнительными сведениями о секторе во всплывающем окне.

Недостатки древовидных карт

Сложности в сравнении

Человеческий мозг способен быстро обрабатывать определенную визуальную информацию: такой атрибут, как длина, можно быстро и точно понять, а значения таких атрибутов можно сравнить практически без усилий. К сожалению, область карты не такой атрибут. Древовидные карты полагаются на область (иногда и цвет) для содержания значения переменной, из чего следует, что карты такого рода не подходят для задач, связанных с точными сравнениями.

A dashboard that includes a treemap.
На этом рисунке изображена карта, показывающая уровни производства продуктов, произведенных на четырёх фабриках. Цвет используется для обозначения фабрик, а размер – для результатов производства. Данная инфографика, несмотря на большое количество данных, сжатых в маленькое пространство, эффективно доносит всю важную информацию – например, легко определить лучших в каждой категории. Однако составить топ-5 будет сложно и долго. Гистограмма будет передавать информацию такого рода точнее и быстрее древовидной карты.
A dashboard treemap zoomed in to show the very similar area of two regions.  This is an example of how treemaps are poor tools for precise comparisons, due to the visual similarity.
Увеличенный фрагмент с картинки выше: что больше, (A) или (B)? Так как в этой визуализации используется область для определения размера переменной, она не позволяет легко сравнивать элементы меж собой. Для того, что бы это сделать, нужно сначала навестись на нужный раздел, дождаться появления подсказки, запомнить из неё инфу, и попытаться сравнить со вторым разделом.

Они неэффективны для не иерархических данных

Древовидные карты не следует использовать, если ваши данные не иерархичны: в таком случае они будут функционально эквивалентны круговой диаграмме, просто показывающей соотношение частей к целому. (Диаграммы тоже не самый лучший вариант визуализации – например, древовидные карты основаны на некоторой площади и атрибутах. Они должны использоваться только для того, чтобы сообщить о том, что один или два элемента больше остальных, а не для сравнения относительных значений).

Они визуально подавляющие

Древовидные карты часто используются для визуализации очень больших наборов данных с сотнями или тысячами элементов. Такое количество информации может свести с ума – древовидная карта превращается в море крошечных прямоугольников, многие из которых просто невозможно увидеть невооруженным глазом. Кроме того, в сложных древовидных картах общая иерархия может легко стать неразличимой. Решением является карта, которая использует такую текстуру, при которой каждый прямоугольник выглядит немного «приподнятым». Этот эффект пользуется тенденцией использования его в качестве рельефной поверхности, что позволяет быстрее идентифицировать различные прямоугольники.

A "cushion" treemap, used to help users see rectangles more easily.
В «подушечной «карте у каждого прямоугольника есть небольшой градиент от краев к центру. Этот эффект помогает визуально идентифицировать маленькие предметы, а также большие категории, состоящие из нескольких прямоугольников.

Они не подходят сбалансированным деревьям

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

Альтернативы древовидным картам

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

Scatterplot showing three variables.
Рассеянная диаграмма часто – лучший выбор между ней и древовидной картой для визуализации данных с двумя количественными переменными, поскольку зрительная система человека может быстро и точно определять положение в двумерном пространстве. Конкретно эта диаграмма добавляет третью категориальную переменную – цвет.

Заключение

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

Статья в оригинале.

Читайте так же: Как работать с модульной сеткой в Figma